A boilerplate React, Redux, Material-UI application.
This boilerplate tries to set out a sensible default configuration for developing a front-end React application by combining popular libraries and build tooling. It includes build tooling, tests, continuous integration and automated deployment.
Uses React for rendering and Material-UI for UI Components. React Storybook is included for rendering components outside of the application.
Sass is used for any global CSS.
Uses Redux for state management, following the basic structure of the Redux Todo App example in the documentation. It also integrates Redux DevTools, which are automatically excluded from the production build.
The Redux DevTools setup includes Redux DevTools DockMonitor and Redux DevTools Log Monitor. The Dock's default status is hidden and mounted bottom. To display dock: ctrl-h. To toggle dock position: ctrl-q. The DevTools configuration is in the DevTools Component.
Uses Webpack and Webpack Dev Server to transpile JSX/ES6 code to cross-browser JavaScript, and to compile Sass to CSS. The Roboto font and Material Icons have been included for compatibility with the Material-UI Components.
The Webpack production configuration splits out css code, and uglifies JavaScript, as well as injecting a production flag into the source code to allow for conditional inclusion of development tooling. JavaScript and CSS files are generated using hashes, which help overcome browser caching issues.
Webpack hot module reloading implemented to work on changes to both React and Redux, using React Hot Loader 3. The hot module code is based on the example application in the Redux DevTools documentation.
This boilerplate uses ESLint with the AirBnB rules, modified to allow JSX in .js files.
The AirBnB rules have also been modified to work better with AVA (primarily by using the babel-eslint parser).
The boilerplate supports Flow Types. These are optional, so you can switched off if not required by removing from the pre-commit hook in package.json.
The Test runner is AVA, which uses the same .babelrc configuration used by Webpack to pre-process the source files. Additionally, AVA allows use of ES6+ features including async await in the test files (NOTE: the tests are transpiled using a different babel configuration from the source files).
TBD
Code coverage is run as part of the Travis.ci build, with test reporting integrated via Coveralls.
TBD:
- Code coverage reporting
- Add React Component tests
- Update tests in line with Some thoughts on testing React/Redux Applications
Travis-ci is setup for CI, which runs a linter and tests.
On successful completion of the tests, code coverage data is sent to Coveralls and the application is deployed to Heroku.
Git hooks integrated via husky. Currently configured to run linter and tests prior to commit.