Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (61 sloc) 2.88 KB
name permalink description
Getting started
Getting started with preact CLI documentation


To get started with Preact CLI, install it from npm:

npm i -g preact-cli

This installs a global preact command, which we'll use to set up a new project.

Project creation


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 preact create to create a new project with your template of choice:

preact 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 start

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 a build directory a 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:


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.

<!DOCTYPE html>
<html lang="en">
    <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 %>
    <% preact.bodyEnd %>

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.

You can’t perform that action at this time.