LuchoTurtle/react-boilerplate

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

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

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

---

Table of Contents

• Live Demo
• Features
• Getting Started
• Custom Configuration

Live Demo

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

---

Features

Build Process

• Typescript support
• Bundled with webpack 4
• Implements async chunk loading via @loadable/react
• Supports ES6 via Babel transpiling

State Management

• redux-entity for domain entity management
• redux-thunk for asynchronous actions
• redux-logger for capturing actions

Routing

• react-router v5 for client-side routing
• Async chunk loading at the react-router level

HTTP

• Customizable, Promise-based HTTP support via Axios
• Utilizes a a generic data service to easily fetch data
• Example of implementing the data service

Styling

• Supports SCSS & SASS syntax
• Browser compatibility via autoprefixing
• Bulma for out-of-the-box styling

Develop & Deploy

• Environmental configurations for both webpack and redux
  • Dev: webpack-dev-server with React Hot Loader. redux-logger enabled
  • Prod: Express server with redux-logger disabled

---

Getting Started

1. $ git clone https://github.com/mikechabot/react-boilerplate.git
2. $ npm install
3. Launch environment:
   • Production: $ npm start
   • Development: $ npm run dev
   • Available at http://localhost:3060

     Update port via config.default.json, or override via Custom Configuration

4. Build assets for production:
   • $ npm run build:prod
5. Execute tests:
   • $ npm test

---

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

> 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