React + Redux w/ ES6 Starter Project
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:
- webpack and webpack-dev-server as a client-side module builder and module loader.
- npm as a package manager and task runner (say NO to gulp/grunt).
- Babel 6 as a transpiler from ES6 to ES5.
- React and JSX as a virtual Dom JavaScript library for rendering user interfaces (views).
- Redux as an incredibly simple way of modelling your data app state, with great community support.
- Redux DevTools as a live-editing environment for your Redux apps.
- ESLint as a reporter for syntax and style issues. eslint-plugin-react for additional React specific linting rules.
- Sass as a compiler of CSS styles with variables, mixins, and more.
- Mocha as a test framework.
- Chai as a BDD assertion library that works along with
Mocha.
Getting Started
Installation
$ git clone https://github.com/nicksp/redux-webpack-es6-boilerplate.git app-name
$ cd app-name
$ npm install
White Label It
- Update name, desription, author, repository in
package.json - Update app title in
src/index.html
Development
There are two ways in which you can build and run the web app:
-
Build once for (ready for Production):
$ npm run build- Open
build/index.htmlthrough the local webserver
-
Hot reloading via webpack dev server:
$ npm start- Point your browser to http://localhost:3000/, page hot reloads automatically when there are changes
Testing
To execute all unit tests, use:
npm run testTo run unit tests continuously during development (watch tests), use:
npm run test:watchFAQ
What's this for?
This 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.
What's happening under the hood when I run 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.
How is Sass being processed?
We're handling it differently in DEV vs PROD.
When you run npm start:
- The sass-loader compiles Sass into CSS
- Webpack bundles the compiled CSS into app.js. Sounds weird, but it works!
- app.js contains code that loads styles into the <head> section of index.html via JavaScript. This is why there is no stylesheet reference in index.html. In fact, if you disable JavaScript in your browser, you'll see the styles don't load either.
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:
- The sass-loader compiles Sass into CSS
- The extract-text-webpack-plugin extracts the compiled Sass into app.css
- buildHtml.js adds a reference to the stylesheet to the head of index.html.
How do I deploy this?
npm run build. This will prepare and build the project for production use. It does the following:
- Minifies all JS and CSS
- Inline base64 URLs for images and fonts if their size is less than specified limit
- Sets NODE_ENV to
productionso that React is built in production mode - Places the resulting built project files into
/builddirectory. (This is the folder you'll expose to the world).
TODO
- Watch
index.htmlfor changes - Add an ability to test React components using Karma and Jasmine
- Make a lightweight version of boilerplate (exclude Redux support?)
License
Brought to you by Nick S. Plekhanov