Skip to content

Latest commit

 

History

History
98 lines (71 loc) · 2.75 KB

README.md

File metadata and controls

98 lines (71 loc) · 2.75 KB
Raw

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
  1. Start the Nodemon server (second terminal)
$ npm run nodemon
  1. Open http://localhost:80/

Production

  1. Optionally change webpack.config-prod.js

  2. Build the client bundle and the prerendering bundle

$ npm run prod
  1. Start the NodeJS server (second terminal)
$ NODE_ENV=production npm start
  1. 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