This is just a demo of shared element transitions, not the real Preact site. If you actually want Preact docs, go to the real site.

Getting Started

Project creation

Templates

Use one of our official templates to get started

Default

This template is a great starting point for most applications. It comes with preact-router and a couple of sample routes and does route-based code splitting by default.

Simple

A "bare-bones" template, starting from a "Hello World" application. If you're looking to choose your own tools or already have a setup in mind, this is a good way to start.

Material

This template comes pre-configured with preact-material-components and a small example app to get you started quickly and easily.

Netlify CMS

Looking to set up a blog? Look no further! This template gives you a simple and elegant Preact-powered blog that you can edit using Netlify CMS.

To get started with any of these templates, run npx preact-cli create to create a new project with your template of choice:

npx preact-cli create <template-name> <app-name>

Now that your project is set up, you can cd into the newly-created directory and start a development server:

cd <app-name>
npm run dev

Now open your editor and start editing! For most templates, the best place to start is src/index.js or src/components/app/index.js.

Production builds

The npm run build command compiles a production-ready build of your application and places it in build directory at the project root.

Production builds can be fine-tuned to match your needs with a series of flags. Find the full list of flags here.

Usage Example:

e.g.

This will generate webpack's asset json which can be used in a webpack analyzer.

preact build --json

Editing index.html

If you want to add or edit the markup generated by preact-cli to add meta tags, custom scripts or fonts, then you can edit src/template.html: This is generated by preact-cli v3 and is rendered using EJS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><% preact.title %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <% preact.headEnd %>
  </head>
  <body>
    <% preact.bodyEnd %>
  </body>
</html>

Note: if you're upgrading from an old version, you can create a src/template.html, and it will be used the next time you build the application or start the development server.

← IntroductionPrevious Page →Service WorkersNext Page