• node ^5.0.0 or greater
• yarn ^0.23.0 or npm ^3.0.0

Install all dependencies listed in package.json

npm install 

or

yarn 

To build the project in development configuration and start a local server

npm start 

or

yarn start 

To build the project for Staging with minification, uglyfication, imagemin, ...

npm run build:staging 

or

yarn build:staging 

To build the project for Production with minification, uglyfication, imagemin, ...

npm run build 

or

yarn build 

To build the project for Staging and deploy it on the ghpages branch

npm run deploy:staging 

or

yarn deploy:staging 

To build the project for Production and deploy it on the ghpages branch

npm run deploy 

or

yarn deploy 

Hot reloading is enabled by default when the application is running in development mode (npm start or yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

• For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

• For Sass, any change will update the styles in realtime, no additional configuration or reload needed.

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn't require installing any packages in your project.

We use react-router route definitions (<route>/index.js) to define units of logic within our application.