webpack/react-starter

Starter template for react and webpack.

Features

Compilation with webpack
React and jsx
Also includes reflux, but this can be easily replaced
Stylesheets can be CSS, LESS, SASS, Stylus or mixed
Embedded resources like images or fonts use DataUrls if appropriate
A simple flag loads a react component (and dependencies) on demand.
Development
- Development server
- Optionally Hot Module Replacement development server (LiveReload for Stylesheets and React components enabled)
- Uses SourceUrl for performance, but you may switch to SourceMaps easily
Production
- Server example for prerendering for React components
- Long Term Cacheing through file hashes enabled
- Generate separate css file to avoid FOUC
- Minized CSS, HTML and javascript
Also supports coffee-script files if you are more a coffee-script guy.
You can also require markdown or text files for your content.
Just require the files...

Installation

Just clone this repo and change the origin git remote.

npm install

Development server

npm run dev-server
http://localhost:2992/

The configuration is webpack-dev-server.config.js.

Static HTML is served from config/dev-server-public.

It automatically recompiles and refreshes the page when files are changed.

Hot Module Replacement development server

npm run hot-dev-server
http://localhost:2992/

The configuration is webpack-hot-dev-server.config.js.

Static HTML is served from config/dev-server-public.

It automatically recompiles when files are changed. When a hot-replacement-enabled file is changed (i. e. stylesheets or React components) the module is hot-replaced. If Hot Replacement is not possible the page is refreshed.

Hot Module Replacement has a performance impact on compilation.

Production compilation and server

npm run build
npm start
http://localhost:8080/

The configuration is webpack-production.config.js.

The server is at lib/server.js

The production setting builds two configurations: one for the client (build/public) and one for the serverside prerendering (build/prerender).

WIP: Serverside data fetching and embedding data into served HTML.

Build visualization

After a production build you may want to visualize you modules and chunks tree.

Use the analyse tool with the file at build/stats.json.

Loaders and file types

Many file types are preconfigured, but not every loader is installed. If you get an error like Cannot find module "xxx-loader", you'll need to install the loader with npm install xxx-loader --save and restart the compilation.

Common changes to the configuration

Add more entry points

(for a multi page app)

Add an entry point to make-webpack-config.js (var entry).
Add a new top-level react component in app.
(Optional) Enable commonsChunk in webpack-production.config.js and add <script src="COMMONS_URL"></script> to app/prerender.html.
Add a new HTML file in config/dev-server-public that references the new output file.
Restart compilation.

Switch devtool to SourceMaps

Change devtool property in webpack-dev-server.config.js and webpack-hot-dev-server.config.js to "source-map" (better module names) or "eval-source-map" (faster compilation).

SourceMaps have a performance impact on compilation.

Enable SourceMaps in production

Uncomment the devtool line in webpack-production.config.js.
Make sure that the folder build\public\debugging is access controlled, i. e. by password.