Awesome Open Source
Awesome Open Source


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

Using preact-starter will kickstart your next application! 💯 It is designed to fit the "90% use-case" for those who want to build offline-first web apps (see features below).

🚩 Important: This is meant for client-side apps only; there is no support included for universal / server-side rendering. I plan to release my own SSR kit shortly!

Please note: Boilerplate does not incorporate the latest "css-in-js" or "css modules" technique. Instead, the more traditional approach is taken, wherein styles and scripts are kept separate. That said, you may certainly and easily take that route if desired. ✅

⚠️ Boilerplate & commands will evolve as my own development process does. ⚠️


git clone
cd preact-starter
npm install
npm run build
npm start

❗️ Pro Tip: Use Yarn to install dependencies 3x faster than NPM!


  • Offline Caching (via serviceWorker)

  • SASS & Autoprefixer

  • Asset Versioning (aka "cache-busting")

  • ES2015 (ES6) and ES2016 (ES7) support

  • Hot Module Replacement (HMR) for all files

  • Preact's Developer Tools

  • Lighthouse certified




Any of the following commands can (and should 😉) be run from the command line.

If using Yarn, all instances of npm can be replaced with yarn. 👌


$ npm run build

Compiles all files. Output is sent to the dist directory.


$ npm start

Runs your application (from the dist directory) in the browser.


$ npm run watch

Like start, but will auto-compile & auto-reload the server after any file changes within the src directory.

Preact Developer Tools

You can inspect and modify the state of your Preact UI components at runtime using the React Developer Tools browser extension.

  1. Install the React Developer Tools extension
  2. Import the preact/devtools module in your app
  3. Reload and go to the 'React' tab in the browser's development tools


MIT Luke Edwards

Alternatives To Preact Starter
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,061,746
Webpack (23,634
Developer Tools (6,250
Offline (5,545
Single Page Applications (5,442
Starter Kit (4,015
Preact (1,347