The requirements:

This short instruction is written under the following assumptions: - You have already familiarized yourself with GitHub workflow, [Node.js](https://www.freecodecamp.org/news/what-exactly-is-node-js-ae36e97449f5/), and [Npm](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/). - Your app is neatly stored on a GitHub repository that you own. - You can work the console/ terminal window. - You're in TLDR mode and you don't have time for lengthy technical instruction. If that's not you, please refer to this [detailed instruction](https://github.com/gitname/react-gh-pages).

The setting:

a) You have just made your last commit to the dev-branch of your first React (JS) app on GitHub. b) You are itching to deploy it using [GitHub Page](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages). c) You have already grabbed a custom domain with a neat name. It's being hosted by GoDaddy, Bluehost, Namecheap or a similar (domain) hosting service.

The approach:

1) Open the console/ terminal window, make sure that you're inside the folder which contains your React project and run: ``` npm install gh-pages ``` _Notes: Open `package.json` and make sure that you have the following dependency installed for everything mentioned herein to work properly:_ ``` "devDependencies": { "gh-pages": "^3.2.3" } ``` 2) 2a) Open `package.json`, add `homepage` above your project name: ``` "homepage": "https://www.your-custom-domain-name.whatever", "name": "your-react-project-name", ``` 2b) Add a CNAME file in the public folder with a single entry of `www.your-custom-domain-name.whatever` ![CNAME file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2qlgq4wbvwi09h8qaeo.png) 3) Scroll down to the `script` section of `package.json` and make sure to add the following: ``` "predeploy": "npm run build", "deploy": "gh-pages -d build", "start": "react-scripts start", ``` 4) Configure your custom domain from the side of [your hosting service](https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site): - Simply locate `Advanced DNS` tab/option on your domain hosting dashboard. - Create the following A records: ``` 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153 ``` - Create a CNAME record with: `Host: www` and `Value: your-github-username.github.io`. Then save everything. _Notes: These changes can take a while to be applied._ 5) Open the console/ terminal window again and run: ``` npm run deploy ``` 6) Get on github.com and navigate to the repository to be deployed from, locate the `Settings` tab and click on `Pages`. 7) Select `Branch: gh-pages` as the source. 8) Make sure that your custom domain pass the DNS check and don't forget to check `Enforce HTTPS` afterward. If everything goes well, you should see: ![Successfully hosting React App on custom domain using GitHub Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3acbwqi2wasqbfmtp73.png) _BannerPic by [Martin Katler](https://unsplash.com/photos/mJLIzYB8brw?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink)_

atduong

TinyHow2: GitHub Page hosting for React (with custom domain)

Join Our Newsletter. No Spam, Only the good stuff.