preactjs/preact-cli

★ 4,676JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Preact CLI))
    What it does
      App scaffolding
      Optimized build
      Dev server
    Performance
      Code splitting
      Service worker
      Pre-rendering
      Lighthouse 100
    Templates
      Default
      TypeScript
      Netlify CMS
      Widget
    Config
      Custom Webpack
      Custom Babel
      Sass and Less
    Status
      Maintenance mode
      Use Vite instead

mindmap root((Preact CLI)) What it does App scaffolding Optimized build Dev server Performance Code splitting Service worker Pre-rendering Lighthouse 100 Templates Default TypeScript Netlify CMS Widget Config Custom Webpack Custom Babel Sass and Less Status Maintenance mode Use Vite instead

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Scaffold a new Preact app with Lighthouse-perfect performance defaults in one command, without manually configuring a bundler.

USE CASE 2

Convert an existing Preact CLI app to serve pages offline using the auto-generated service worker.

USE CASE 3

Add TypeScript to a Preact project by using the TypeScript template at project creation time.

USE CASE 4

Extend the build configuration with custom Webpack or Babel settings without ejecting the project setup.

Tech stack

JavaScriptPreactWebpackBabelSassCSS Modules

Getting it running

Difficulty · easy Time to first run · 5min

Now in maintenance mode, new projects should use Vite with create-preact instead, existing apps remain stable.

No license terms are stated in the explanation.

In plain English

Preact CLI is a command-line tool that scaffolds and builds web applications using Preact, a lightweight alternative to React. Its purpose is to give developers a fully configured project setup without manually wiring together a bundler, a development server, and deployment optimizations. You run one command with a template name and a project name, and you get a working application structure. The tool is now in maintenance mode and no longer receives active development. The README recommends using Vite with the create-preact tool for new projects instead. Preact CLI remains stable and usable for existing applications, but new feature work has stopped. When it was current, the standout features were strong defaults for performance. It aimed for a perfect score on Google Lighthouse, a tool that measures web page quality, right from the start without any manual tuning. It automatically splits code so that each page of your app only loads the JavaScript it needs rather than the entire application at once. It generates a service worker, which is a browser-level script that caches content so the app continues to work offline or on slow connections. It also pre-renders each route into static HTML before the JavaScript loads, so visitors see content immediately rather than a blank screen. The CLI has a handful of commands. The create command generates a new project from one of several official templates, covering standard setups, TypeScript, a single-file minimal version, a Netlify CMS integration, and an embeddable widget. The build command produces optimized files for deployment. The watch command starts a local development server with automatic reloading when you change files. A separate info command prints information about your local environment to help with debugging. Configuration can be extended without ejecting. You can provide custom Babel, Webpack, and browserslist configs alongside the project, and the tool picks them up. CSS preprocessors including Sass, Less, and Stylus are supported, and CSS Modules work without additional setup.

Copy-paste prompts

Prompt 1

I'm starting a new Preact project with preact-cli. What is the exact create command for a TypeScript template, and what files does it generate?

Prompt 2

My preact-cli app is not passing Lighthouse performance checks. What does preact-cli do automatically to optimize performance and what might I have broken?

Prompt 3

Show me how to add a custom Webpack plugin to a preact-cli project using the preact.config.js file without ejecting.

Prompt 4

I have a preact-cli app and want to add Sass stylesheets with CSS Modules. Is there any extra setup required or does preact-cli support it out of the box?

Prompt 5

The README says preact-cli is in maintenance mode. Help me migrate my existing preact-cli project to use Vite with the create-preact tool instead.

Open on GitHub → Explain another repo

← preactjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.