Awesome Open Source
Awesome Open Source

logo

A slightly opinionated yet dead simple boilerplate for ReactJS, Webpack 4, and React Router v4.

❤️ Async chunk loading
❤️ Typescript
❤️ React 17
❤️ Webpack 5
❤️ React Router v5
❤️ Redux v4
❤️ Code splitting


Table of Contents

Live Demo

http://mikechabot.github.io/react-boilerplate


Features

Build Process

State Management

Routing

HTTP

Styling

Develop & Deploy


Getting Started

  1. $ git clone https://github.com/mikechabot/react-boilerplate.git
  2. $ npm install
  3. Launch environment:
  4. Build assets for production:
    • $ npm run build:prod

Custom Configuration

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" **

Example

Using configuration file @ C:\_workspaces\custom-config.json

$ cross-env ENV_CONFIG_PATH="C:\_workspaces\custom-config.json" npm start

> [email protected] start C:\_workspaces\react-boilerplate
> npm run build:prod && npm run start-prod-server


> [email protected] build:prod C:\_workspaces\react-boilerplate
> npm run clean && cross-env NODE_ENV=production webpack --progress --colors


> [email protected] clean C:\_workspaces\react-boilerplate
> rm -rf ./docs

** Using custom configuration located at "C:\_workspaces\custom-config.json" **
                    __      __        _ __             __     __
  _______ ___ _____/ /_____/ /  ___  (_) /__ _______  / /__ _/ /____
 / __/ -_) _ `/ __/ __/___/ _ \/ _ \/ / / -_) __/ _ \/ / _ `/ __/ -_)
/_/  \__/\_,_/\__/\__/   /_.__/\___/_/_/\__/_/ / .__/_/\_,_/\__/\__/
                                              /_/
┌────────────────────────────────────────────────────────────────────┐
│                                                                    │
│             Mike Chabot | Version 5.0.0 | License MIT              │
│                                                                    │
└────────────────────────────────────────────────────────────────────┘
<s> [webpack.Progress] 0% compiling
<s> [webpack.Progress] 10% building 0/0 modules 0 active

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (247,386
Css (214,667
Reactjs (70,931
Redux (13,044
Webpack (9,669
Boilerplate (5,605
Promise (1,417
Code Splitting (240
Webpack5 (172
Related Projects