How to Deploy a React App to Github Pages With Github Actions

Solution

Requirements:

1. Generated project with create-react-app.
2. Installed gh-pages.
3. Added the homepage property to the app’s package.json file.
4. Defined its value to be the string http://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Since my GitHub username is mannyyang and the name of my GitHub repository is solunar.io, I added the following property:

//...
"homepage": "http://mannyyang.github.io/solunar.io"

After that, all that’s needed is to update your main.workflow to this:

workflow "Build and deploy" {
  on = "push"
  resolves = ["Deploy"]
}

action "Install" {
  uses = "actions/npm@e7aaefe"
  args = "install"
}

action "Build" {
  uses = "actions/npm@e7aaefe"
  args = "run build"
  needs = ["Install"]
}

action "Deploy" {
  uses = "nchaulet/github-action-gh-pages@master"
  secrets = [
    "GITHUB_TOKEN",
  ]
  needs = ["Build"]
  env = {
    PUBLIC_PATH = "build"
  }
}

GUI of main.workflow defined above

What’s happpening:

1. workflow “Build and deploy”: Initializes action’s workflow.
2. action “Install”: Install dependencies through npm install.
3. action “Build”: Build production files through npm run build.
4. action “Deploy”: Deploy to github pages through gh-pages -d $PUBLIC_PATH -b gh-pages -u "github-actions-bot <support+actions@github.com>". “build” is set as the value for the PUBLIC_PATH since create-react-app’s build script compiles the source files to the ./build folder. You’ll need to pass the GITHUB_TOKEN in this action to be able to commit/push the compiled assets to the gh-pages branch that happens through the script.

Once that’s set, anytime you push to master, it’ll automatically build and deploy to github pages! You can also add additional actions such as filters to deploy only when pushed to a certain branch. Fiddle around and adjust to your needs!

Actions used:

1. https://github.com/actions/npm
2. https://github.com/nchaulet/github-action-gh-pages

Thought Process

When the beta release of Github Actions came out, I was really excited since I can now have automated deployment using the same software I host my code at. The collocation of these two pieces is very convenient since I don’t have to deal with githooks or any extra steps needed to automate scripts on a push.

Github Actions Tab

In the midst of developing an app generated through create-react-app, I wanted a way for actions to auto-deploy my react app to Github pages so that I don’t have to manually run the deploy script every time. It only takes an npm script to deploy it and Github Actions conveniently provides an npm cli wrapper. I figured all I needed to do was to set two actions up: npm install and npm run deploy, the former to install dependencies and the latter which runs gh-pages -d build.

Using the Visual Editor to Set Up Actions

After I set that all up, I made my first push. First step executed correctly and installed all dependencies without a problem. However, the second step failed. Looking into the logs, it stated this: Error: spawn git ENOENT. Here’s a link to the error logs.

I couldn’t figure out what was going on so I asked their support team on what the issue could be, here’s their response:

Hi Manuel,

Thanks for reaching out! I see that you’re using actions/npm for your Deploy Action:

https://github.com/mannyyang/solunar.io/blob/86ac2dc673688c1ba36c4cd92e6452444b0f427c/.github/main.workflow#L12

At this time of writing, actions/npm@de7a3705a9510ee12702e124482fad6af249991b uses node:10-slim as its base image:

https://github.com/actions/npm/blob/de7a3705a9510ee12702e124482fad6af249991b/Dockerfile#L1

node:10-slim is in the same family of node:<version>-slim base images documented here containing only the minimal packages needed to run node:

https://hub.docker.com/_/node/#-node-version-slim-

There’s a likelihood that git isn't installed on this base image. What's available in actions/npm is the bare minimum to get up and running, and we encourage our community to create GitHub Actions that best fit their use cases.

Moving forward, you could create your own GitHub action using a base image that already includes git by default, or use the same base image and install git in the Dockerfile.

Our team wrote a series of guides for creating GitHub Actions and their Docker containers, as well as accessing the runtime environment here:

https://developer.github.com/actions/creating-github-actions/

We hope this helps — please let us know if you have any questions for us!

All the best,
GitHub Staff

In a nutshell, Github actions are just scripts executed in a Docker container and I was using an action that was using a slimmed down docker-node image which didn’t include git. In order to get the correct image, I figured the best way would be to create my own action through the link they sent me. Lucky for me though, I was able to find a pre-existing action made by nchaulet — https://github.com/nchaulet/github-action-gh-pages. All I needed to do was update the workflow seen above.