Based on https://github.com/Stanko/react-redux-webpack2-boilerplate and https://github.com/nicksp/redux-webpack-es6-boilerplate.
- What is this?
- Features
- Setup
- Running in dev mode
- Build (production)
- Running in preview production mode
- Linting
- Git hooks
- Changelog
Boilerplate I extracted based on existing boilerplates but customized to my own preferences.
This boilerplate includes complete, minimal react app. By complete I mean it has examples for:
- components (both container/views and regular ones)
- routes
- reducers (redux)
- actions (both sync and async),
- SASS (with autoprefixer)1
- dummy API
- using assets (in CSS and components)
- imports relative to the app root
1 Using source maps breaks urls in the CSS loader - webpack-contrib/css-loader#232. Try this to fix it (but it breaks testing from local network).
I'm still working in replacing the all in one webpack config with a separate development and production config.
- React
- React router
- Redux
- Redux Thunk
- Redux Dev Tools
- Autobind decorators
- Reselect
- Immutable reducer data
- Webpack 2 (development and production config)
- Hot Module Replacement
- Babel - static props, decorators
- SASS with autoprefixing
- Webpack dashboard
- Linting
- Included
es6-promise
andisomorphic-fetch
- Preview production build
- File imports relative to the app root
- Git hooks - lint before push
Universal may be added at some point.
- Universal rendering
- Server async data
Other nice to have features
- Generating icon font from SVGs
- Modernizr
- Google analytics
- Error reporting (not sure if this should be the part of the boilerplate)
Tested with node 6.x and 7.x
$ npm install
$ npm start
Visit http://localhost:3000/
from your browser of choice.
Server is visible from the local network as well.
It is using webpack dashboard, so please note the following:
OS X Terminal.app users: Make sure that View → Allow Mouse Reporting is enabled, otherwise scrolling through logs and modules won't work. If your version of Terminal.app doesn't have this feature, you may want to check out an alternative such as iTerm2.
Build will be placed in the build
folder.
$ npm run build
If your app is not running on the server root you should change publicPath
at two places.
In webpack.config.js
(ATM line 147):
output: {
path: buildPath,
publicPath: '/your-app/',
filename: 'app-[hash].js',
},
and in source/js/routes
(ATM line 9):
const publicPath = '/your-app/';
Don't forget the trailing slash (/
). In development visit http://localhost:3000/your-app/
.
This command will start webpack dev server, but with NODE_ENV
set to production
.
Everything will be minified and served.
Hot reload will not work, so you need to refresh the page manually after changing the code.
npm run preview
For linting I'm using eslint-config-airbnb, but some options are overridden to my personal preferences.
$ npm run lint
Linting pre-push hook is not enabled by default. It will prevent the push if lint task fails, but you need to add it manually by running:
npm run hook-add
To remove it, run this task:
npm run hook-remove
Initial release