Preact Boilerplate / Starter Kit

🎸 Ready-to-rock Preact starter project, powered by webpack.

🚀 If you're starting a new project using Preact, you've come to the right place. Below is a step-by-step guide that takes you straight from downloading this boilerplate to production.

💥 View Demo 💥

Quick-Start Guide

Installation
Development Workflow
Structure
CSS Modules
Handling URLS

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

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

5. Start local production server with superstatic:

npm start

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

Structure

Apps are built up from simple units of functionality called Components. A Component is responsible for rendering a small part of an application, given some input data called props, generally passed in as attributes in JSX. A component can be as simple as:

class Link extends Component {
  render({ to, children }) {
    return <a href={ to }>{ children }</a>;
  }
}
// usage:
<Link to="/">Home</Link>

CSS Modules

This project is set up to support CSS Modules. By default, styles in src/style are global (not using CSS Modules) to make global declarations, imports and helpers easy to declare. Styles in src/components are loaded as CSS Modules via Webpack's css-loader. Modular CSS namespaces class names, and when imported into JavaScript returns a mapping of canonical (unmodified) CSS classes to their local (namespaced/suffixed) counterparts.

When imported, this LESS/CSS:

.redText { color:red; }
.blueText { color:blue; }

... returns the following map:

import styles from './style.css';
console.log(styles);
// {
//   redText: 'redText_local_9gt72',
//   blueText: 'blueText_local_9gt72'
// }

Note that the suffix for local classNames is generated based on an md5 hash of the file. Changing the file changes the hash.

Handling URLS

💁 This project contains a basic two-page app with URL routing.

Pages are just regular components that get mounted when you navigate to a certain URL. Any URL parameters get passed to the component as props.

Defining what component(s) to load for a given URL is easy and declarative. You can even mix-and-match URL parameters and normal props.

<Router>
  <A path="/" />
  <B path="/b" id="42" />
  <C path="/c/:id" />
</Router>

License

MIT

oren/test-preact