Yml file for GitHub Pages React App Deployment

main.yml

# This is a workflow to auto-deploy you React app with secrets
# https://github.com/marketplace/actions/deploy-to-github-pages

name: Deploy & Build React App

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

env:
  # Any secret you want to appear in your app must be referenced using the bracket syntax below 
  # and stored in the GitHub repository's Settings/Secrets menu:
  # https://docs.github.com/en/actions/reference/encrypted-secrets#using-encrypted-secrets-in-a-workflow
  REACT_APP_KEY_ADDED_GITHUB: ${{ secrets.REACT_APP_KEY_ADDED_GITHUB }}
  REACT_APP_ANOTHER_KEY_ADDED_THRU_GITHUB: ${{ secrets.REACT_APP_ANOTHER_KEY_ADDED_THRU_GITHUB }}

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout 🛎️
        uses: actions/[email protected]
        with:
          persist-credentials: false 

      # Runs a set of commands using the runners shell
      - name: Install and Build 🔧
        run: |
          npm install
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/[email protected]
        with:
          # The GITHUB_TOKEN option is the access token used to authorize the action to manipulate your repository.
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: build