A boilerplate using React, Redux, webpack + hot module reloading, and ES6 + JSX via Babel.
The provided boilerplate enables client-side ES6 via the following technologies:
Mocha.$ git clone https://github.com/manishshanker/react-redux-d3-webpack-es6-seed.git app-name
$ cd app-name
$ npm installpackage.jsonsrc/index.htmlThere are two ways in which you can build and run the web app:
Build once for (ready for Production):
$ npm run buildbuild/index.html through the local webserverHot reloading via webpack dev server:
$ npm startTo execute all unit tests, use:
npm run testTo run unit tests continuously during development (watch tests), use:
npm run test:watchThis starter kit implements best practices like testing (unit testing), minification, bundling, and so on. It saves you from the long, painful process of wiring it all together into an automated dev environment and build process.
npm start?Webpack serves your app in memory when you run npm start. No physical files are written. However, the web root is /src, so you can reference files under /src in index.html. When the app is built using npm run build, physical files are written to /build folder and the app is served from /build.
We're handling it differently in DEV vs PROD.
When you run npm start:
The approach above supports hot reloading, which is great for development. However, it also create a flash of unstyled content on load because you have to wait for the JavaScript to parse and load styles before they're applied. So for the production build, we use a different approach:
When you run npm run build:
npm run build. This will prepare and build the project for production use. It does the following:
production so that React is built in production mode/build directory. (This is the folder you'll expose to the world).