Read article Return to blog

How to Deploy your React app with Github Pages and Google Domains

Sep 07, 2022

7-10 min read

You just created your first React app, congrats! Now you want to deploy it to a custom domain and show the world what you've created. While this might seem like a daunting task, I'm here to show you how you can do this in < 10 minutes. I recently deployed a single-page React application, (a simple Wordle-like game targetted towards financially-interested folks), and I'll run you through every step it took to bring it live.

Before we start, these steps assume you have already done the following: You've bought a custom domain name from Google Domains, you've created a React application locally using create-react-app that is ready to be launched on the web, you are proficient in using terminal to run basic commands/navigate directories/install npmjs packages, & you are proficient in using GitHub as your software lifecycle management tool.

1. Confirm you have Node, npm, & yarn installed on your machine

You can check if you have all of these installed by running the following:

node -vnpm -vyarn -v

If any of the following commands give you a "command not found" error, go ahead and download the packages you are missing.

2. Host your source code on GitHub

If you aren't already, create a new github repository to host your code. If you don't know how to do this, head over to this link to add exisitng source code to Github.

3. Install gh-pages package locally

The gh-pages package is a simple-to-use package to help publish files to a gh-pages branch on GitHub.

4. Modify your "scripts" key in your package.json file in the root directory of your React app

We'll be adding two new keys in the "scripts" object, "predeploy" as well as "deploy". The two additions are highlighted below:

"scripts": {   "start": "react-scripts start",   "predeploy": "npm run build",   "deploy": "gh-pages -d build",   "build": "react-scripts build",   "deploy": "react-scripts test",   "build": "react-scripts eject" };

5. Add a "homepage" key at the root-level of package.json

In your package.json file, add a "homepage" key and put the URL of your google domain. This will allow React to figure out the root URL in the built HTML file. Make sure to replace with your own custom domain url.

"scripts": {   "name": "My react app",   "homepage": "",   "version": "1.0", };

6. Run a deployment using npm run deploy

In your terminal, make sure you are in the root directory of your react app. Then run the command "npm run deploy". This creates a new branch, gh-pages, and pushes a new build to that branch.

7. Edit your GitHub repository "pages" settings

In your GitHub repository, click the "settings" button:

Next head over to the "pages" tab:


Edit the "Branch" setting and click on "gh-pages". Enter your google domain name in the Custom domain text input as well:

8. Go to your google domain and click "manage"
9. Go to your DNS settings, click on "Default name servers" and scroll to "custom records"

This is an important step. In your google domain settings, you have to configure the DNS to sync up your Github repository to your custom domain. The DNS settings tab is on the left-side navigation menu, and the "Default name servers" option is the first of two top menu items.

Click on the "Manage custom records" button to begin editing your default name servers. Add one single "A" record with a TTL value of 3600 and with the following 4 data routes below. This point to GitHub's public IPs.

Additionally, you'll need to add one single "CNAME" record with a TTL value of 3600. In the data column, enter your custom domain name (ex. Your settings should match the following screenshot below:

And thats it! You've now successfully deployed your react application to a custom domain name. (Note: It often takes 5-10 minutes for your updated Google Domains settings to sync up with the Github deployment after applying the new custom name servers).

If you have any insights, comments, or questions about article feel free to reach out to me via the contact section below. Thanks for reading!

Contact me

Tucker Massad

Boston, MA