E2517 / react-deploy-github-pages

Deploy a React app in github pages and integrate it with github actions

Available Scripts

npm i gh-pages

 "homepage": "https://e2517.github.io/react-deploy-github-pages/",

  "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
    },
    

OPTION 1 - LOCAL

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Go to Settings

GitHub Pages should be active and show a link

npm run deploy local computer

git push local computer

Open GitHub pages to view it in GitHub

OPTION 2 - GITHUB ACTIONS

Go to Settings (profile) -> Developer settings

Go to Personal access token -> generate a new token with repo, write, read and workflow

Go to Settings -> Secrets and paste token

Create a new GitHub Action with this code

name: CI/CD React

on:
  workflow_dispatch:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests and generate coverage report
      run: npm test -- --coverage

    - name: Build
      run: npm run build

    - name: Deploy
      run: |
        git config --global user.name $user_name
        git config --global user.email $user_email
        git remote set-url origin https://${github_token}@github.com/${repository}
        npm run deploy
      env:
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
        github_token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        repository: ${{ github.repository }}