Member-only story
Deploying a React App Using GitHub Pages and GitHub Actions
A simple guide to hosting your single page application
Introduction
I recently created a website using the Create React App starter template to demonstrate an npm package I developed. I thought it would be pretty straightforward to deploy this site using GitHub Pages, however, I was wrong. After some trial and error, I managed to sort it out. This article aims at recreating the scenario and walking you through the process of solving each problem we encounter along the way.
#1 Starting point
Let’s start with a common base. We’ll begin by creating a React app using the Create React App utility and also add the code to a GitHub repository. I’ve used the following command to generate this sample React app.
npx create-react-app <project directory> --template typescriptAt this point, your project directory should look something like the screenshot below. I haven’t added or modified anything — these are the files and folders that get generated out-of-the-box when we run the npx command stated above. I just made sure it works locally by running the command npm run start and that’s about it.
I’ve pushed these changes to my GitHub repository and if you’re following along, you can do the same, too. This is what my repository looked like at this stage if you want to compare.
#2 Deploying to GitHub pages
When we run the command npm run build, Create React App puts the production files into the build directory. However, if you take a look at the .gitignore file, you’ll see that the build directory is added to this list, thus, preventing you from committing the contents of this folder to GitHub. So, how do we publish our app, then?
GitHub Actions
Let’s bring GitHub Actions to the rescue! We need to build our app every time code is committed and that’s where GitHub Actions comes in. Create a YAML file called build-deploy.yml in the .github/workflows directory of your app…
