Redux Async Boilerplate

Redux Async Boilerplate is an enterprise level boilerplate application. it provides a modern development environment and build process so you can skip the setup and get started building out your application.

This boilerplate features react, redux, react-router, react-router-redux, webpack, babel, eslint, storybook

Installation

$ git clone https://github.com/shanedasilva/redux-async-boilerplate.git
$ npm install
$ npm run dev

Open http://localhost:3000 in your browser to display the app.

NPM Commands

|npm run <script>|Description| |------------------|-----------| |dev|Serves your app at localhost:3000. HMR will be enabled in development| |lint|Lint all .js files| |lint:fix|Lint and fix all .js files| |test|Runs unit tests with Karma| |test:watch|Runs unit tests and runs watcher| |test:coverage|Runs unit tests with Karma and generates a coverage report| |doctor|Removes node_modules, reinstalls and runs dev| |clean|Cleans out the dist folder| |compile|Compiles src to dist. Overrides NODE_ENV to "production".| |deploy|Runs lint, tests, clean and deploy| |storybook|Serves the Storybook app at localhost:9001. Looks for all .stories.js files. Read more.| |storybook:deploy|Builds a static version of Storybook and deploys to github pages using the URL of your repository|

Development

Developer Tools

Redux DevTools is a development time package that provides power-ups for your Redux development workflow. By default, the dock and log monitors are provided but more can be added by editing src/containers/devTools.js. The dev tools won't be included when NODE_ENV is set to "production".

Routing

We use react-router route definitions (<route>/index.js) to define units of logic within our application.

Testing

To add a unit test, simply create a .spec.js file anywhere in ~/tests. If you're creating component tests, you can also add your .spec.js file to the component director. Karma will pick up on these files automatically, and Mocha and Chai will be available within your test without the need to import them.

Coverage reports will be compiled to ~/coverage by default. If you wish to change what reporters are used and where reports are compiled, you can do so by modifying coverage_reporters in ~/config/index.js.

Globals

These are global variables available to you anywhere in your source code. If you wish to modify them, they can be found as the globals key in ~/config/index.js. When adding new globals, make sure you also add them to ~/.eslintrc.

|Variable|Description| |---|---| |process.env.NODE_ENV|the active NODE_ENV when the build started| |__DEV__|True when process.env.NODE_ENV is development| |__PROD__|True when process.env.NODE_ENV is production|

Styles

Both .scss and .css file extensions are supported.

Storybook

React Storybook is being used as the component test bed. It allows developers to develop and design UI components out of your app, and in an isolated environment Read the full Storybook documentation here

View the demo static site at here.