bhanditz / preact-cli

😺 Your next Preact PWA starts in 30 seconds.

preact-cli

Start building a Preact Progressive Web App in seconds 🔥

Features:

• 100/100 Lighthouse score, right out of the box (proof)
• Fully automatic code splitting for routes
• Transparently code-split any component with an async! prefix
• Auto-generated Service Workers for offline caching powered by sw-precache
• PRPL pattern support for efficient loading
• Zero-configuration pre-rendering / server-side rendering hydration
• Support for CSS Modules, LESS & autoprefixer
• Monitor your bundle/chunk sizes with built-in tracking
• Automatic app mounting, debug helpers & Hot Module Replacement
• In just 4.5kb you get a productive environment:
  • preact
  • preact-router
  • 1.5kb of conditionally-loaded polyfills for fetch & Promise

Commands

preact create your-app-name: create a new app

preact build: build an app

preact watch: start a dev server

Quickstart

# once and you're good:
npm i -g preact-cli

# create a new project:
preact create my-great-app
cd my-great-app

# start a live-reload/HMR dev server:
npm start

# go to production:
npm run build

CLI Options

$ preact create

  --name      directory and package name for the new app
  --dest      Directory to create the app within                  [default: <name>]
  --type      A project template to start from
              [Options: "default", "root", "simple", "empty"]     [default: "default"]
  --less      Pre-install LESS support                 [boolean]  [default: false]
  --sass      Pre-install SASS/SCSS support            [boolean]  [default: false]

$ preact build

  --src             Entry file (index.js)                         [default: "src"]
  --dest            Directory root for output                     [default: "build"]
  --production, -p  Create a minified production build.           [default: true]
  --less, -l        Build and compile LESS files                  [default: false]
  --sass, -s        Build and compile SASS files                  [default: false]
  --prerender       Pre-render static app content.                [default: true]
  --clean           Clear output directory before building.       [default: true]
  --json            Generate build statistics for analysis.       [default: false]

$ preact watch

  --src        Entry file (index.js)                              [default: "src"]
  --port, -p   Port to start a server on                          [default: "8080"]
  --host                                              [boolean]   [default: "0.0.0.0"]
  --prerender  Pre-render static app content on initial build     [default: false]

$ preact serve

  --dir       Directory root to serve static files from.          [default: "build"]
  --cwd       The working directory in which to spawn a server.   [default: .]
  --server    Which server to run, or "config" to produce a firebase config.        
          [options: "simplehttp2server", "superstatic", "config"] [default:"simplehttp2server"]
  --dest      Directory or filename where firebase.json should be written
              (used for --server config)                          [default: -]
  --port, -p  Port to start a server on                           [default: "8080"]

Deploying

# create a production build:
npm run build

# generate configuration in Firebase Hosting format:
npm run serve -- --server config

# Copy your static files to a server!

Custom Configuration

TL;DR Currently in progress. See #56

Browserslist

You may customize your list of supported browser versions by declaring a "browserslist" key within your package.json. Changing these values will modify your JavaScript (via babel-preset-env) and your CSS (via autoprefixer) output.

By default, preact-cli emulates the following config:

// package.json
{
  "browserslist": [
    "> 1%", 
    "IE >= 9",
    "last 2 versions"
  ]
}