Skip to content
Permalink
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
/cli/getting-started
Getting started with preact CLI documentation

Installation

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

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 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:

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.

<!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.

You can’t perform that action at this time.