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.