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.
Use one of our official templates to get started
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.
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.
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 run dev
Now open your editor and start editing! For most templates, the best place to start is
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.
This will generate webpack's asset json which can be used in a webpack analyzer.
preact build --json
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.