A straightforward method to hosting your single-page application.

Getting started 📰

Let’s begin with a common ground. To begin, we’ll use the Create React App feature to create a React app and then add the code to a GitHub repository. To create this sample React app, I used the following command.

npx create-react-app <project directory> --template typescript

At this time, your project directory should resemble the image below. I haven’t changed or added anything — these are the files and directories that are created by default when we run the npx command. I just tested it locally by using the command npm run start and that is it.

Deploying to GitHub pages ⚓

Create React App places the production files in the build directory when we run the command npm run build. However, if you examine the.gitignore file, you’ll notice that the build directory has been added to this list, prohibiting you from committing the contents of this folder to GitHub. So, how do we get our app out there?

GitHub Actions 🎬

Let GitHub Actionscome to our aid! Every time we commit code, we need to create our app, which is where GitHub Actions comes in. Create a YAML file called build-deploy.yml in your app’s .github/workflows directory. Copy and paste the following into this YAML file.

Here’s the build-deploy.yml :

This YAML file defines the GitHub Actions workflow. When a change is made to the main branch or a pull request is created to merge changes to the main branch, this workflow will build the React app and deploy the contents of the build directory to the gh-pages branch.

A little word on ${{ secrets.GITHUB_TOKEN }} — GitHub generates a GITHUB_TOKEN secret for you to utilize in your workflow. It includes write access to the repository, allowing you to update the gh-pages branch. The whole list of permissions can be found here.

Commit this file to your repository if you’re following along. You’ll see right away that GitHub Pages is now building based on what’s in your workflow file. If you go to the GitHub Actions tab, you’ll see your workflow being executed and, hopefully, recognized as successful after some time. Feel free to explore this section of your GitHub repository by clicking around in the UI.

Given the successful status, this procedure would have also generated a new branch called gh-pages and deployed the production-ready code there.

Isn’t it simple? 🐣

GitHub Pages 📃

Now that we’ve moved our build files to a new branch, let’s enable GitHub Pages. Scroll down to the GitHub Pages section after selecting Settings from the menu.

We’ll configure the location of our website’s contents here. Because our build files are pushed to the gh-pages branch, select it from the menu. Save the file by clicking the Save button. The website will refresh, and when you return to this part, you will see a URL. To view the website, go to that URL.

What exactly happened? Can you view the output of the React app?

You may notice an empty screen and a slew of errors if you open the console.

Tip : If you don’t see an empty screen and instead see a 404 error from GitHub, please wait a few minutes, try a different browser, and then clear the cache. Because this is your first visit to the site, it is possible that things in the background have not yet been updated.

Setting the homepage value ⚙️

Open up the source code for this app, and in the package.json file, add this key-value pair. Replace the parts in the URL below as appropriate.

"homepage": "https://<username>.github.io/<project>/",

In my instance, this is what I had to add:

"homepage": "https://devangtomar.github.io/gh-pages-react-app/",

Give it a minute or two, then return to the website. Your React app should now be operational. You can visit the one I hosted here.

Hooray! 🥳🍾

GitHub repo for this article 💻

GitHub - devangtomar/gh-pages-react-app: Using GitHub Pages and GitHub Actions to Deploy a React App ✨

Let’s connect and chat! Open to anything under the sun 🏖️🍹

🐦 Twitter : devangtomar7

🔗 LinkedIn : devangtomar

📚 Stackoverflow : devangtomar

🖼️ Instagram : be_ayushmann

Ⓜ️ Medium : Devang Tomar

☊ Hashnode : devangtomar

🧑‍💻 Dev.to : devangtomar