TinyHow2: GitHub Page hosting for React (with custom domain)
Tags: 2022, react, github, beginners
Published: 2022-05-06 15:15:32

<h2>The requirements:</h2>

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).

<h2>The setting:</h2>

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.

<h2>The approach:</h2>

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)_