Skip to content
An extension of create-react-app with some extras: hot-reloading, linters, redux, redux-thunk, routing and basic structure.
JavaScript CSS HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
public
scripts
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
CHANGELOG.md
README.md
package-lock.json
package.json
plopfile.js

README.md

React boilerplate

An ejected version of create-react-app v2 with some extras:

  • hot reloading 🔥
  • linters
  • redux
  • redux-thunk
  • routing
  • ImmutableJS
  • local storage (for the redux state)
  • basic structure
  • absolute imports
  • plop templates

This version also has built-in support for the following extensions:

Table of contents

  1. Branches
  2. Getting started
  3. Absolute imports
  4. Environments
  5. Linting
  6. Useful tools
    1. Chrome extensions
    2. Template generators

Branches

  • bootstrap-4

    A duplicate of the master branch, including bootstrap 4.

Getting started

  • Clone the repository
  • (optional, but recommended) Go into package.json and set the name property at the top to your new project its name. This will also set local storage keys automatically correct.
  • Run npm install
  • Run npm start

Absolute imports

This repository supports absolute paths where src is an alias to the /src directory. Absolute imports improve readability, consistency and the component can be moved easily in structure without the hassle of adjusting the import paths.

Example:

  • JSX: import Button from 'src/components/Button';
  • SCSS: background-image: url('~src/assets/images/icons/icongrid.svg');

Environments

TLDR; If you want to add a new environment (for example: staging) the only thing you have to do is the following:

  • Copy over the build script in the package.json to a build:staging script.
  • Change the REACT_APP_ENV=production to REACT_APP_ENV=staging in the build:staging script.

--

Instead of overwriting NODE_ENV we will use REACT_APP_ENV to distinguish between environments. CRA sets the NODE_ENV for us at build-time which ensures a correct build at any time. This saves us extra code to adjust in the CRA config for it to work. At the end we are aiming for a variable per environment that tells us the type of environment. If you want to distinguish between environments programmatically you want to use process.env.REACT_APP_ENV or (preferably) use import { APP_ENV } from 'src/config/constants'; which is pre-defined in this repository.

If you want a bit more info you can read it at https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables.

Linting

All rules within linting are set to a warning, except for those that are definitely a no-op, such as deprecated functions, or really bad ways of handling code such as the use of eval(). Linters should suggest, not force.

If you find any rules that are left out or should be different, feel free to make a pull request.

Useful tools

Optional extensions that might be useful.

Chrome extensions

Template generators

You can’t perform that action at this time.