A slightly opinionated yet dead simple boilerplate for ReactJS, Webpack 4, and React Router v4.
❤️ Webpack 4
❤️ Code splitting
❤️ React Router
❤️ Redux
http://mikechabot.github.io/react-boilerplate
- Built with webpack 4
- Code splitting at the react-router v4 level
- Supports ES6 via Babel transpiling
- redux-entity for domain entity management
- redux-thunk for asynchronous actions
- redux-logger for capturing actions
- react-router v4 for client-side routing
- Customizable, Promise-based HTTP support via Axios
- Utilizes a a generic data service to easily fetch data
- Example of implementing the data service
- Supports SCSS & SASS syntax
- Browser compatibility via autoprefixing and normalize.css
- Bulma for out-of-the-box styling
- glamorous for CSS-in-JS styling
- Environmental configurations for both webpack and redux
- Dev: webpack-dev-server with React Hot Loader.
redux-logger
enabled - Prod: Express server with
redux-logger
disabled
- Dev: webpack-dev-server with React Hot Loader.
- Tested with Mocha and Chai
- Coverage support via nyc
- react-addons-test-utils for component testing
- Sinon.JS for mocking, stubbing & spying
$ git clone https://github.com/mikechabot/react-boilerplate.git
$ npm install
- Launch environment:
- Production:
$ npm start
- Development:
$ npm run dev
Available at http://localhost:3060
- Production:
- Build assets for production:
$ npm run build:prod
- Execute tests:
$ npm test
Use cross-env
or a comparable library/command to set the ENV_CONFIG_PATH
to the path of your JSON configuration file:
$ cross-env ENV_CONFIG_PATH=/path/to/config.json npm start
Note: This path is made available to Webpack only, however the contents of the file are stamped on a global variable during the build process (
process.env.APP_CONFIG
, see webpack.config.js), which is then accessible via the ConfigService.
If your configuration is loaded successfully, you can expect to see the following indicator during startup:
** Using custom configuration located at "/path/to/config.json" **
Using configuration file @ D\:\_workspaces\foo.json
mikec@Krait MINGW64 /d/_workspaces/react-boilerplate (master)
$ cross-env ENV_CONFIG_PATH="D\:\_workspaces\foo.json" npm start
> react-boilerplate@2.5.0 start D:\_workspaces\react-boilerplate
> npm run prod
> react-boilerplate@2.5.0 prod D:\_workspaces\react-boilerplate
> npm run build:prod && npm run start-server
> react-boilerplate@2.5.0 build:prod D:\_workspaces\react-boilerplate
> cross-env NODE_ENV=production webpack --progress --colors
** Using custom configuration located at "D:\_workspaces\foo.json" **
Hash: 32bbf23a46e7ac19741a
Version: webpack 3.5.5
Time: 8711ms
Asset Size Chunks Chunk Names
bundle.js 563 kB 0 [emitted] [big] main
css/bundle.css 1.68 kB 0 [emitted] main
index.html 1.58 kB [emitted]