This project is archived and no longer maintained. Please refer to react-template instead.

This project is meant to be used as a boilerplate code for web projects based on React. It comes with an opinionated base folder structure and all libraries and webpack pre-configured.

• react
• react-router-dom

• styled-components

• redux
  • Pre-configured to use Redux DevTools extension (you must install it for it to work) and redux-logger.
• redux-saga

• axios

• webpack

• eslint - based on Airbnb
• stylelint

• jest
• @testing-library/react

• react-helmet - to allow dynamically management of the document's head section.

Change the browserslist config inside package.json according to your needs.

$ cd react-boilerplate
$ npm install

Run the project locally by using webpack-dev-server, also providing live reloading.

$ npm start

Create a dist directory with the production build of the app, ready for deployment. By default it runs the validate script right before building.

$ npm run build

Run the building script without validating the project.

$ npm run build:nocheck

Serve the generated assets locally using http-server package, for testing purposes. You must have it installed for it to work.

$ npm i http-server -g
$ npm run serve

Lint

Running the following command will run both eslint and stylelint.

$ npm run lint

You can also run them separately

$ npm run eslint
$ npm run stylelint

Jest

Run all tests.

$ npm test

Run watch mode.

$ npm run test:watch

Validation

Run both test and lint scripts.

$ npm run validate

Clean

Delete node_modules and dist folder (This script won't work on Windows)

$ npm run clean

• Implement React Refresh
• Browserslist is the default for webpack target, however it currently breaks page refresh on changes. This is an issue with webpack-dev-server that should be fixed in future releases (v4+)

Feel free to contribute and open pull requests or issues.

Based on react-base, from Thiago L. Lima.

MIT