- node
^5.0.0or greater - yarn
^0.23.0or 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.