Building a GitHub action for react app deployment

Issue:

During the creation of a basic react app, the result of a build of this app must be displayed as a static web application hosted in GitHub pages.

Solution:

Configuring a GitHub action (YAML) in order to build the react app and then clone the build over to the GitHub pages deployment branch.

Below is the resulting YAML pipeline for this:

name: Deploy gh-page Branch
permissions:
  contents: write
# Run workflow on every push to the master branch
on:
  push:
    branches: [ main ]

jobs:
  deploy-to-github-pages:
    # use ubuntu-latest image to run steps on
    runs-on: ubuntu-latest
    steps:
    # uses GitHub's checkout action to checkout code form the master branch
    - uses: actions/checkout@v4
      
    # sets up node
    - name: Setup node
      uses: actions/setup-node@v4

    # Installs required npm packages
    - name: Installs required npm dependencies
      run: npm install

    # Generate npm build
    - name: Generates npm build
      run: npm run build

    # Commit to gh-pages branch
    - name: Commit wwwroot to GitHub Pages
      uses: JamesIves/github-pages-deploy-action@v4
      with:
        BRANCH: gh-pages
        FOLDER: build

For the original version of this post see Daniel Bulman's personal blog at Building a GitHub action for react app deployment