webpack/react-starter

Aims to be simplified version of original webpack.react-starter.

Differences:

• purely declarative configs
• config options are commented and linked to Webpack doc sections
• ES6 syntax everywhere (including webpack configs)
• different file/folder names and structure
• build/public/ are merged into public/
• React Hot Loader by default (dev)
• SourceMaps by default (dev)
• Nodemon by default (dev)
• LESS is kept, SASS / Stylus are removed
• mentions of CoffeeScript are removed ;)
• uses nunjucks templates on backend

---

Starter template for React with Webpack

Features

• Compilation with Webpack
• React, React-Router, JSX
• Stylesheets can be CSS, LESS or mixed
• Autoembed assets by threshold
• Optional lazyload for any React component
• Live reload for CSS styles and React components
• Sourcemaps
• Server example with API
• Isomorphic app (initial data inlined in page)
• Long term caching through file hashes enabled
• Separate CSS file to avoid FOUC
• Minimization, uglification etc.
• Possibility to require markdown or text files

Local Installation

Install node.js or io.js

Just clone this repo and change the origin git remote.

$ npm install && bin/install

Development

1. Optionally change webpack.config-dev.js

2. Start the webpack-dev-server in HMR mode and wait for compilation

$ npm run dev

3. Start the Nodemon server (second terminal)

$ npm run nodemon

4. Open http://localhost:80/

Production

1. Optionally change webpack.config-prod.js

2. Build the client bundle and the prerendering bundle

$ npm run prod

3. Start the NodeJS server (second terminal)

$ NODE_ENV=production npm start

4. Open http://localhost:80/

Build visualization

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

Use the analyse tool with the file at public/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

Multi page app

1. Add an entry point to webpack.config-xxx.js
2. Add a new top-level react component in app (xxxRoutes.js, xxxStoreDescriptions.js, xxxStores.js)
3. (Optional) Enable commonsChunk in webpack-production.config.js and add <script src="{{ commonsUrl }}"></script> to frontend/react-prerender.html
4. Modify the server code to require, serve and prerender the other entry point
5. Restart compilation