Setting up Github Actions for a React App on Github Pages

In this tutorial, we deploy our changes on master to production (your domain) on each push. The idea: if you are hosting a React GH-Pages app on Github, then you no longer need to manually deploy.

This lesson goes along with Host a React App for Free using Github Pages.

Getting Started

Like the Host a React App for Free using Github Pages, our starting point will be this code repository. I would recommend pulling from the source (and not my fork). Please star my fork, so I know people are using it!

Create a new project on Github and upload the source code. Run the following commands:

npm install
npm run start

This would be for local development. You can run:

npm install
npm run deploy

This would be used to deploy your code to Github Pages.

CNAME

If you have a custom domain, you’ll have to update the package.json to copy the CNAME file to the build. Update your package.json to match:

"predeploy": "npm run build && cp CNAME build/CNAME",

If you run:

npm run deploy

It should ship your project as expected.

Creating the Workflow

The plan: push to master, run deploy, update custom domain.

From your project folder, start by creating a workflow for master with:

mkdir -p ./.github/workflows/
touch ./.github/workflows/master_deploy.yml

The contents will be the following:

name: MasterDeployCI
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [8.x, 10.x, 12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Deploy to GH Pages
      run: npm run deploy
    - name: Updating Domain
      run: echo "Update domain"

The last step is an echo on purpose. The first step is to confirm we have setup the Node environment correctly.

The only catch, it deployed for Node 8, 10, and 12. I run on 10. For now, I’ll make it only run on 10.

It failed for this reason. What happen? It doesn’t have permission on my private repo via HTTPS. We need to provide access using Personal Access Tokens. This is only for private repositories and the access token should remain private. If you commit an access token to a remote branch, you need to rotate it.

Open Settings from the dropdown.

Go to Developer Settings on the left side. Click Generate New Token.

You will need permission on the repository.

We will now update our workflow to be as follows:

name: MasterDeployCI
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Deploy to GH Pages
      run: |
        git config --global user.email "your_github_email>"
        git config --global user.name "your_github_username>"
        git remote set-url origin https://your_personal_access_token>@github.com/your_github_username>/your_repo>.git
        npm run deploy

The changes to this workflow. First, it only runs in Node version 10. You can run and test it in more but that’s your call. Second, we have to set up authentication to run git checkout during the gh-pages deploy steps. If you look at the gh-pages docs, we can set the authentication within the URL. Github forces identification and that’s why we add the config settings. The last step is to simply run the deploy.