Preact Boilerplate / Starter Kit

🎸 Advanced ready-to-rock Preact starter project, powered by webpack. (View Demo)

Based on preact-boilerplate.

Quick-Start Guide

• Installation
• Development Workflow
• Information

Installation

1. Clone this repo:

git clone --depth 1 https://github.com/developit/preact-boilerplate.git my-app
cd my-app

2. Make it your own:

rm -rf .git && git init && npm init

ℹ️ This re-initializes the repo and sets up your NPM project.

3. Install the dependencies:

npm install

You're done installing! Now let's get started developing.

Development Workflow

4. Start a live-reload development server:

npm run dev

This is a full web server nicely suited to your project. Any time you make changes within the src directory, it will rebuild and even refresh your browser.

5. Testing with mocha, karma, chai, sinon via phantomjs:

npm test

🌟 This also instruments the code in src/ using isparta, giving you pretty code coverage statistics at the end of your tests! If you want to see detailed coverage information, a full HTML report is placed into coverage/.

6. Generate a production build in ./build:

npm run build

You can now deploy the contents of the build directory to production!

Surge.sh Example: surge ./build -d my-app.surge.sh

Netlify Example: netlify deploy

5. Start local production server with serve:

npm start

This is to simulate a production (CDN) server with gzip. It just serves up the contents of ./build.

---

Information

This boilerplate includes:

• preact-router-nested - tunned preact-router version with nesting
• preact-async-route - async load pages
• mobx-preact - components state managament
• superagent(-pomise) - HTTP client

License

MIT