Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mikechabot/react-boilerplate

A slightly opinionated yet dead simple boilerplate for React 17.x, Webpack 5 and React Router v5
https://github.com/mikechabot/react-boilerplate

boilerplate code-splitting css promise reactjs redux webpack webpack5

Last synced: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/mikechabot/react-boilerplate
Owner: mikechabot
License: mit
Created: 2016-03-07T17:57:59.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2023-01-26T16:41:04.000Z (almost 2 years ago)
Last Synced: 2024-08-02T15:46:59.607Z (3 months ago)
Topics: boilerplate, code-splitting, css, promise, reactjs, redux, webpack, webpack5
Language: TypeScript
Homepage: https://mikechabot.github.io/react-boilerplate/
Size: 5.97 MB
Stars: 172
Watchers: 12
Forks: 37
Open Issues: 24
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # 

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

:heart: Async chunk loading




:heart: Typescript




:heart: React 17




:heart: Webpack 5




:heart: React Router v5




:heart: Redux v4




:heart: Code splitting




 

  

    

  

  

    

  

  

    

  



---

## Table of Contents

- [Live Demo](#live-demo)

- [Features](#features)

- [Getting Started](#getting-started)

- [Custom Configuration](#custom-config)

## Live Demo

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

---

## Features

#### Build Process

- [Typescript](https://www.typescriptlang.org/) support

- Bundled with [webpack 5](https://webpack.js.org/configuration/)

- Implements async chunk loading via [@loadable/react](https://loadable-components.com/)

- Supports ES6 via [Babel](https://babeljs.io/) transpiling

#### State Management

- [redux-entity](https://github.com/mikechabot/redux-entity) for domain entity management

- [redux-thunk](https://github.com/gaearon/redux-thunk) for [asynchronous actions](https://github.com/mikechabot/react-boilerplate/blob/master/src/reducers/entities/actions.ts)

- [redux-logger](https://github.com/theaqua/redux-logger) for capturing actions

#### Routing

- [react-router v5](https://github.com/reactjs/react-router) for client-side [routing](https://github.com/mikechabot/react-boilerplate/blob/master/src/Root.tsx#L12)

- [Async chunk loading](https://github.com/mikechabot/react-boilerplate/blob/master/src/components/Sections/ReactRouter/AsyncTabbedRouter.js#L15) at the `react-router` level

#### HTTP

- [Customizable](https://github.com/mikechabot/react-boilerplate/blob/master/src/services/data/ajax-service.js#L8), [Promise-based](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) HTTP support via [Axios](https://github.com/mzabriskie/axios)

- Utilizes a [a generic data service](https://github.com/mikechabot/react-boilerplate/blob/master/src/services/data/data-access-service.ts#L30) to easily fetch data

- Example of [implementing the data service](https://github.com/mikechabot/react-boilerplate/blob/master/src/services/domain/domain-service.ts#L7)

#### Styling

- Supports [SCSS & SASS](http://sass-lang.com/) syntax

- Browser compatibility via [autoprefixing](https://github.com/postcss/autoprefixer)

- [Bulma](https://bulma.io/documentation/overview/start/) for out-of-the-box styling

#### Develop & Deploy

- Environmental configurations for both webpack and redux

  - **Dev**: [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) with [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin). `redux-logger` enabled

  - **Prod**: [Express](http://expressjs.com/) 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](https://github.com/mikechabot/react-boilerplate/blob/master/config/config.default.json#L3), or override via [Custom Configuration](#custom-config)

4. Build assets for production:

   - `$ npm run build:prod`

---

## Custom Configuration

Use [`cross-env`](https://github.com/kentcdodds/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](https://github.com/mikechabot/react-boilerplate/blob/master/webpack.config.js#L46)), which is then accessible via the [ConfigService](https://github.com/mikechabot/react-boilerplate/blob/master/src/services/common/config-service.js#L19).

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`

```bash

$ 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              │

│                                                                    │

└────────────────────────────────────────────────────────────────────┘

 [webpack.Progress] 0% compiling

 [webpack.Progress] 10% building 0/0 modules 0 active

```