# preactjs/preact-cli

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/preactjs-preact-cli).**

4,669 stars · 369 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/preactjs/preact-cli
- awesome-repositories: https://awesome-repositories.com/repository/preactjs-preact-cli.md

## Topics

`cli` `hacktoberfest` `http2` `preact` `prpl` `pwa` `starter-kit`

## Description

preact-cli is a command line tool for scaffolding, developing, and building applications using the Preact library. It provides a Webpack-based build pipeline to coordinate code transformation, asset optimization, and production compilation.

The toolkit includes a static site prerenderer to convert application routes into static HTML files and a PWA development toolkit for generating service workers and offline asset caching. It also functions as a frontend development server featuring hot module replacement and a proxy for real-time application iteration.

The project covers a broad range of capabilities, including project scaffolding, build optimization through automatic route-based code splitting, and the integration of CSS preprocessing pipelines. It also supports the management of environment variables and the customization of build configurations through plugins and overrides.

## Tags

### Development Tools & Productivity

- [Project Scaffolders](https://awesome-repositories.com/f/development-tools-productivity/project-scaffolding-config-code-generation/project-scaffolding-configuration/project-scaffolding/project-scaffolders.md) — Scaffolds new project directories with pre-configured dependencies and structures for Preact applications. ([source](https://github.com/preactjs/preact-cli#readme))
- [Template-Based Project Scaffolders](https://awesome-repositories.com/f/development-tools-productivity/project-templates/template-based-project-scaffolders.md) — Offers a command line tool to scaffold new projects from pre-configured templates and dependency manifests.
- [Frontend Bundling Pipelines](https://awesome-repositories.com/f/development-tools-productivity/asset-compilation-pipelines/webpack-configuration-wrappers/frontend-bundling-pipelines.md) — Implements a complete bundling pipeline using Webpack to coordinate transformation and asset optimization.
- [Development Servers](https://awesome-repositories.com/f/development-tools-productivity/development-environment-management/development-environments/development-workflow-orchestration/development-servers.md) — Ships a local development server featuring hot module replacement and a request proxy.
- [Framework CLIs](https://awesome-repositories.com/f/development-tools-productivity/framework-clis.md) — Provides a command line tool for scaffolding, developing, and building Preact applications.
- [Web Application Hot Reloading](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/web-application-hot-reloading.md) — Provides a local development server that updates the browser instantly without a full page refresh.
- [Hot Module Replacement](https://awesome-repositories.com/f/development-tools-productivity/hot-module-replacement.md) — Ships a development server with hot module replacement to update components in real-time without full page refreshes.
- [Modern Web Development Environments](https://awesome-repositories.com/f/development-tools-productivity/modern-web-development-environments.md) — Offers an integrated development environment combining local servers and hot module replacement for rapid iteration.
- [Webpack Build Pipelines](https://awesome-repositories.com/f/development-tools-productivity/webpack-build-pipelines.md) — Coordinates code bundling and asset transformation through a Webpack-based build pipeline.
- [Build Tool Configurations](https://awesome-repositories.com/f/development-tools-productivity/build-tool-configurations.md) — Allows customization of the compilation process through JavaScript configuration files and plugins. ([source](https://github.com/preactjs/preact-cli/blob/master/README.md))
- [Build Configurations](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-configuration-systems/build-configurations.md) — Provides mechanisms to modify the underlying build configuration to change the operation of the build pipeline. ([source](https://github.com/preactjs/preact-cli#readme))
- [Build Plugins](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-orchestration-logic/build-orchestration-configuration/build-lifecycle-orchestrators/build-plugins.md) — Supports the integration of external build plugins to add new build steps or optimization tools. ([source](https://github.com/preactjs/preact-cli/wiki/Plugins))

### Content Management & Publishing

- [SPA Static Prerenderers](https://awesome-repositories.com/f/content-management-publishing/spa-static-prerenderers.md) — Converts dynamic single-page application routes into static HTML files at build time for faster loading.

### DevOps & Infrastructure

- [Production Build & Deployment](https://awesome-repositories.com/f/devops-infrastructure/cloud-infrastructure-deployment/managed-infrastructure-deployment/agent-deployments/production-deployments/production-build-deployment.md) — Compiles the application into optimized static assets ready for production deployment. ([source](https://github.com/preactjs/preact-cli#readme))
- [PWA Development Toolkits](https://awesome-repositories.com/f/devops-infrastructure/pwa-deployments/pwa-development-toolkits.md) — Provides integrated tools for generating service workers and offline caching to build progressive web apps.

### Software Engineering & Architecture

- [Static Prerendering](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/application-architecture-patterns/single-page-applications/static-prerendering.md) — Converts dynamic application routes into static HTML files during the build process to improve SEO and load times. ([source](https://github.com/preactjs/preact-cli#readme))
- [Route-Based Code Splitting](https://awesome-repositories.com/f/software-engineering-architecture/static-code-analyzers/dependency-based-code-splitting/route-based-code-splitting.md) — Implements automatic route-based code splitting to reduce the initial bundle size for faster page loads.

### Web Development

- [Development Servers](https://awesome-repositories.com/f/web-development/development-servers.md) — Provides a local development server with a module watcher for real-time feedback during coding. ([source](https://github.com/preactjs/preact-cli#readme))
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Automates the optimization of frontend assets through techniques like code splitting and static prerendering.
- [Service Worker Generators](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-infrastructure/service-worker-controls/service-worker-libraries/service-worker-generators.md) — Provides a toolkit for generating service workers and injecting precache manifests into the build.
- [CSS Preprocessing Workflows](https://awesome-repositories.com/f/web-development/css-preprocessing-workflows.md) — Implements a full workflow for transforming advanced stylesheet syntax into standard CSS with autoprefixing.
- [Code Splitting](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting.md) — Divides the application bundle into smaller, route-based chunks to reduce initial download size. ([source](https://github.com/preactjs/preact-cli#readme))
- [Route-Based](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies/code-splitting/route-based.md) — Implements automatic route-based code splitting to reduce the initial bundle size for faster page loads.
- [PWA Configuration Tooling](https://awesome-repositories.com/f/web-development/pwa-configuration-tooling.md) — Includes utilities to automate the generation of service workers and manifests for progressive web apps.
- [API Proxy Routings](https://awesome-repositories.com/f/web-development/traffic-routing/frontend-version-routing/api-proxy-routings.md) — Allows redirecting local API calls to a remote server via a proxy to avoid CORS restrictions. ([source](https://github.com/preactjs/preact-cli/wiki/Config-Recipes))
- [CSS Preprocessors](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/asset-lifecycle-orchestration/asset-pipelines/css-preprocessors.md) — Integrates a pipeline to transpile style files and apply autoprefixing for cross-browser compatibility. ([source](https://github.com/preactjs/preact-cli#readme))

### Part of an Awesome List

- [CSS Preprocessors](https://awesome-repositories.com/f/awesome-lists/devtools/css-preprocessors.md) — Transforms styles written in preprocessor languages into standard CSS for the web. ([source](https://github.com/preactjs/preact-cli/blob/master/README.md))

### Networking & Communication

- [Development Proxies](https://awesome-repositories.com/f/networking-communication/proxy-servers/development-proxies.md) — Includes a built-in proxy server to intercept local network requests and forward them to remote API targets.