Demo

https://andy770921.github.io/react-redux-boilerplate/

Installation

1. npm install

2. Install VSCode extensions: ESLint, Prettier

Usage

1. npm run watch: start typescript watch mode

2. npm run start: start running dev-server

3. npm run build: build bundled JS file from src folder into dist folder

4. npm run lint: use ESLint for manually checking files inside src folder

5. Fix format error on save automatically

6. Replace <your-repo-name> with custom relative url inside .env

PUBLIC_URL=<your-repo-name> 
// e.g. PUBLIC_URL=react-redux-router  
// The setting will direct React-Router to the right url
// e.g. https://andy770921.github.io/react-redux-router/

7. Deploy to gh-pages branch automatically via GitHub Actions by setting ACCESS_TOKEN

Initial Setting of the Project

1. Style setting: <GlobalStyle> for resetting global style in the file src/index.tsx

2. Route setting: <Redirect to="/" /> for handling wrong URL path in the file src/app/App.tsx

Folder Structure

1. Use the concept of Ducks pattern

2. Refer to the style guide of Redux official website, Redux in Actions

┌── .vscode                    # VSCode setting for ESLint auto-fix function
├── dist                       # Static files like HTML template and bundled JS
├── src                        # All source code
│    ├── app                   # Main component and router setting 
│    ├── components            # Reusable component throughout different features  
│    ├── features              # Classified by features
│    │    ├── firstFeature
│    │    │    ├── (Componentes)      # React Components
│    │    │    └── firstFeatureTask   # Redux Task in specific feature 
│    │    │                             including Actions, Action Creaters, Epics and Reducer
│    │    └── secondFeature
│    │         ├── (Componentes)
│    │         └── secondFeatureTask
│    ├── redux                 # Redux store, root action, root epics and root reducer
│    └── index.tsx             # Redux Provider, add global style, and render to DOM
├── .gitignore                 # Exclude files from Git version contral
├── .eslintrc.js               # ESLint setting
├── .env                       # Environment variables setting 
├── README.md                  # README
├── package-lock.json          # Lock the version of dependencies packages
├── package.json               # List dependencies packages,npm scripts, project name etc.
├── webpack.config.js          # Webpack setting in develop mode
├── webpack.prod-config.js     # Webpack setting in production mode
└── tsconfig.json              # TypeScript settings

Using GitHub Pages Hosting

1. npm install --save-dev dotenv

2. Add your custom PUBLIC_URL inside .env

PUBLIC_URL=<your-repo-name> 
// e.g. PUBLIC_URL=react-redux-router  
// The setting will direct React-Router to the right url
// e.g. https://andy770921.github.io/react-redux-router/

3. Add getEnv function in webpack.prod-config.js plugins array for getting environment variables successfully

const path = require('path');
const webpack = require('webpack');
const dotenv = require('dotenv');

const getEnv = () => {
    // call dotenv and it will return an Object with a parsed key 
    const env = dotenv.config().parsed;
    
    // reduce it to a nice object, the same as before
    const envKeys = Object.keys(env).reduce((prev, next) => {
        prev[`process.env.${next}`] = JSON.stringify(env[next]);
        return prev;
    }, {});
    return new webpack.DefinePlugin(envKeys);
}
module.exports = {
    mode: 'production',
    // ....
    plugins: [
        getEnv()
    ]
};

4. Add <script> in index.html and 404.html and change var segmentCount = 1 in 404.html. Script Content Ref

5. Add basename={process.env.PUBLIC_URL} in the props of <BrowserRouter> in index.tsx

Deploy to GitHub Pages Manually

1. npm install gh-pages --save-dev -g

2. Enter gh-pages -d dist in command line, change the source of GitHub Pages Settings into gh-pages

Deploy to GitHub Pages by CI/CD

1. Add a personal access token and then copy the value

2. Add a Secrets key named ACCESS_TOKEN with the value of personal access token

3. Create the file .github/workflows/github-actions.yml:

name: CI/CD

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: macos-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false
        
    - name: Build
      run: |
        npm install
        npm run build

    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        personal_token: ${{ secrets.ACCESS_TOKEN }}
        publish_branch: gh-pages
        publish_dir: ./dist

Reference

1. GitHub Pages Ref

2. GitHub Pages Ref 2

3. Use Env Variables Ref