Skip to content

A slightly opinionated yet dead simple boilerplate for React 17.x, Webpack 5 and React Router v5

License

Notifications You must be signed in to change notification settings

mikechabot/react-boilerplate

Repository files navigation

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

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


Build Process

State Management

Routing

HTTP

Styling

Develop & Deploy


  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

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

> react-boilerplate@5.0.0 start C:\_workspaces\react-boilerplate
> npm run build:prod && npm run start-prod-server


> react-boilerplate@5.0.0 build:prod C:\_workspaces\react-boilerplate
> npm run clean && cross-env NODE_ENV=production webpack --progress --colors


> react-boilerplate@5.0.0 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

About

A slightly opinionated yet dead simple boilerplate for React 17.x, Webpack 5 and React Router v5

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published