How do I add TypeScript to Preact Boilerplate?

You'll need to manually configure Webpack and install TypeScript dependencies, as the boilerplate doesn't include TypeScript support out of the box. This involves modifying webpack.config.js and adding ts-loader or similar.

What's the difference between Preact Boilerplate and Preact CLI?

Preact Boilerplate is a starter kit with a fixed Webpack setup, while Preact CLI is a zero-configuration tool that automatically handles code-splitting and optimizations. The README recommends Preact CLI for new projects due to its improvements.

Can I use Preact Boilerplate for server-side rendering?

No, this boilerplate is designed for client-side SPAs; adding server-side rendering would require significant changes to the build process and server setup, as it's not supported natively.

How do I deploy my Preact Boilerplate app to Netlify?

After running npm run build, deploy the contents of the ./build directory. Netlify can automatically build from the repo, but you might need to configure the build command and output directory in your Netlify settings.

Is Preact Boilerplate still maintained?

Based on the README note recommending Preact CLI, active development may have slowed, but the project is still functional. Check the GitHub repository for recent commits or issues to gauge current maintenance.

How to integrate state management like Redux?

Install Redux and related packages via npm, then manually set up the store and providers in your components, as the boilerplate doesn't include state management by default. You'll need to modify the entry files and component structure.

Open-Awesome

Official Boilerplate

JavaScript6.0.0

A ready-to-rock Preact starter project powered by Webpack for building modern web applications.

Visit Website GitHub

962 stars182 forks0 contributors

What is Official Boilerplate?

Preact Boilerplate is a starter project for building web applications with Preact, a fast 3kB alternative to React. It provides a pre-configured development environment powered by Webpack, including tools for testing, CSS modules, routing, and production builds. It solves the problem of setting up a modern frontend toolchain from scratch, allowing developers to immediately start coding.

Target Audience

Frontend developers and teams looking to quickly bootstrap new Preact-based single-page applications (SPAs) with a proven, minimal configuration. It's ideal for those who prefer a lightweight setup over heavier frameworks like Create React App.

Value Proposition

Developers choose Preact Boilerplate for its simplicity, performance, and out-of-the-box tooling. It offers a streamlined alternative to complex setups, with built-in testing, CSS modules, and React compatibility—all while keeping bundle sizes small and development workflows efficient.

Overview

:guitar: Ready-to-rock Preact starter project, powered by Webpack.

Use Cases

Best For

Quickly prototyping new Preact applications without configuration hassle
Learning Preact with a real-world, production-ready project structure
Building lightweight SPAs where small bundle size is a priority
Migrating React projects to Preact for performance gains
Setting up a frontend project with integrated testing and CSS modules
Deploying static sites or PWAs with minimal tooling overhead

Not Ideal For

Teams starting new projects today, as the README explicitly recommends Preact CLI for its zero-configuration and automatic optimizations
Developers requiring modern browser testing with headless Chrome or Firefox, since it uses the deprecated PhantomJS
Projects needing out-of-the-box support for TypeScript or advanced build features without manual Webpack tweaks

Pros & Cons

Pros

Rapid Project Bootstrapping

Clone the repo, run npm install, and start developing with hot module replacement—ideal for quickly prototyping Preact applications without initial setup headaches.

Comprehensive Out-of-the-Box Tooling

Includes CSS Modules for scoped styling, Preact Router for basic routing, and a full testing suite with Mocha and Karma, reducing the need for additional configuration.

Seamless React Compatibility

Via preact-compat, it allows the use of third-party React components, and the bundle only includes this compatibility layer if actually used, keeping bundles lean.

Production-Ready Builds

The npm run build command generates optimized, minified, and gzipped assets ready for deployment to CDNs or static hosts like Surge.sh or Netlify.

Cons

Officially Superseded

The README explicitly states that Preact CLI is now recommended for new projects, as it offers automatic code-splitting and requires no configuration, making this boilerplate somewhat obsolete.

Deprecated Testing Stack

Relies on PhantomJS for browser testing, which is no longer maintained and lacks support for modern JavaScript features, potentially leading to compatibility issues.

Manual Configuration Management

While it provides a pre-configured Webpack setup, any deviations or updates require manual tweaking of build files, which can be cumbersome compared to zero-config tools.

Frequently Asked Questions

Related Projects

Preact Chrome Extension

Browser Extension Template with ESbuild builds, support for React, Preact, Typescript, Tailwind, Manifest V3/V2 support and multi browser build including Chrome, Firefox, Safari, Edge, Brave.

Stars692

Forks59

Last commit2 years ago

Preact PWA

Super fast progressive web app with small footprint & minimal dependancies

Stars504

Forks36

Last commit9 years ago

Preact Offline Starter

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact

Stars388

Forks38

Last commit7 years ago

Preact Simple Starter

PWA Simple Starter with Preact, Preact-mdl and Webpack2 🔥🔥🔥

Stars64

Forks9