Deploying a React App to GitHub Pages

This article will show you how to deploy your React application to Github Pages. There is also an optional step to add a custom domain URL.

When it comes to hosting a website there are many options and it can be a bit overwhelming. Luckily GitHub Pages allows for deployment of your application directly from your GitHub repository! It is a free platform that allows for static site hosting, using HTML, CSS, and JavaScript, but what if you want to host a React application? There’s a way to do that too!

Getting Started

To get started make sure you have the following set up and installed before getting started

• A GitHub account
• Have Git configured to use in the command line
• Have Node.js installed
• Have npm (pre-installed with Node) or yarn installed

To check if you have node.js, npm, or yarn installed, run these commands in the terminal:

node -v
npm -v
yarn -v

Procedure

1. First, create a repository on GitHub.

• Can be named anything, but for the purpose of this tutorial I’ll call it website.

2. Create a new React app on your computer.

$ create-react-app portfolio

• I opted to name the app differently from the GitHub repository (i.e. website) to avoid confusion. However, they can both have the same name.
• This will create a new folder named react-gh-pages (or whatever you named your app) on your computer.

3. Install the GitHub Pages package as a dev-dependency.

$ cd react-gh-pages
$ npm install gh-pages --save-dev
OR
$ yarn add gh-pages

4. Add properties to the app’s package.json file.

• Find and open the package.json file, we’re going to add some properties
• At the top level, add a homepage property. Then define its value as a string with either a custom domain or http://{username}.github.io/{repo-name}. Make sure to replace {username} with your GitHub username and {repo-name} with the name of the GitHub repository you created in step 1. Since my GitHub username is cortezd334 and the name of my GitHub repository is website, it would look like this:

"homepage": "http://cortezd334.github.io/website

• Next, add a predeploy and deploy property to the existing scripts property, with the following values:

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}
OR
"scripts": {
  //...
  "predeploy": "yarn run build",
  "deploy": "gh-pages -d build"
}

• The following images display how your package.jsonfile should look once you’re done.

package.json with github.io homepage property

package.json with custom domain homepage property

5. Create a git repository and add it as remote in your local git repository.

$ git init
$ git remote add origin git@github.com:cortezd334/website.git

6. Optional: Custom Domain

• At this point, you are ready to deploy, unless you have a custom domain. If you do not feel free to skip to step 7.
• In your GitHub repository, go to settings, scroll down to GitHub Pages, and change your domain

Change custom domain

• Next, you need to update your Domain Name System (DNS). Log into your account (where your domain is registered) and look for Manage DNS, DNS Settings, or something similar.
• Add these four IP addresses, which connect to the GitHub server:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

• Additionally, you’ll need to add your GitHub Pages URL {username}.github.io. In my case, it looks like this:

cortezd334.github.io

• Once you’re done it should look similar to the image below. *It will not look exactly the same (this is how it’s displayed on GoDaddy.com)*

Updated DNS

• Once these steps are completed you should be able to access your website through your custom URL. In my case, I was able to access my website through my custom domain, however, it would reset back to the GitHub Pages URL each time. To fix this issue, I added a CNAME file to my React App in the public folder, with my custom domain name.

CNAME file with custom domain

7. Deploy to GitHub Pages.

• Run the following command in your terminal:

$ npm run deploy
OR
$ yarn run deploy

• Congratulations! Your site should now be deployed.

8. Optional: Commit and push your commit to GitHub.

$ git add .
$ git commit -m "your message here"
$ git push origin main

Conclusion

GitHub Pages is a great platform for hosting your website, not only because it is free but because you can deploy your application directly from your GitHub repository. Once your repository and application are created, update your package.json file and add a remote GitHub repo. If you would like to add a custom domain there are a few more changes, but otherwise your React app is ready to be deployed!

I hope you found this tutorial helpful! Don’t hesitate to ask any questions or leave a comment!