Deploy react app to GitHub pages with and without a custom domain
Tags: github, react
Published: 2020-08-16 10:26:09

> Want to deploy your react app for free?
If yes, then gh-pages from Github is your free tool for deployment

## **Let's get started!**
![lets get started](https://media.giphy.com/media/l0IyjiXOXTX6Yemsg/giphy.gif)
### **Here are simple steps we will be going through**
1. Install gh-pages as a dev dependency
2. few changes to package.json in your code
3. deployment
4. Adding a custom domain

### **STEP 1**
```
npm install gh-pages --save-dev
```
This will save gh-pages dependency as a dev dependency

### **STEP 2**
```
"homepage" : "http://{github-user-name}.github.io/{github-repository-name}"
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}

```
Paste the above code inside of your package.json.Remember to paste script predeploy and deploy as extra scripts to existing scripts and don't override your previous scripts

### **STEP 3**
```
npm run deploy
```
Run the above command in terminal. Now your app is live on GitHub pages. It's available at homepage URL you specified above(http://{github-user-name}.github.io/{github-repository-name})
![you did it ](https://media.giphy.com/media/3oz8xAFtqoOUUrsh7W/giphy.gif)
> Yes, it's live now. But sometimes you won't be able to see your output (maybe due to some GitHub glitches), All you need to do is go to your GitHub repo settings and search for Github pages in it
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/14ocn3vpnf5tqbbdrglu.jpg)
Then click on choose a theme and select a random theme from themes page
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n8t7lo5hk3edq6uuqm17.png)
Now your site will be live, I don't know why it's working but it worked :joy:

### **STEP 4 :** *Adding custom domain*
* Search for GitHub pages in repo settings and enter your domain name inside of custom domain input field(format must be www .domain.com or domain.com only)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ruon6l972dfir4bmea5f.png)
This will create a CNAME file in the root of your project publishing source. This file contains the domain name you entered

* Configure DNS Records, You just need to set A and CNAME records in your domain name registrar(like GoDaddy, Namecheap etc).

* Setting up A record
> **A record** stands for an address record, it connects your domain name to the actual IP addresses where your site resides on a server

Now set the following IP's for A records as value and host(or name) as @ symbol
```
185.199.108.153
185.199.109.153
185.199.110.153 
185.199.111.153
```
* setting up CNAME Record
what is CNAME record? [click here](https://support.dnsimple.com/articles/cname-record/)
Add cname record with name www, type cname,ttl hour or less, data field with URL of your GitHub deployed page domain **ending with dot**

> {username}.github.io/{repo-name}. 

*For reference :*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/anj0a78t67ylc5pdtzw2.png)

#### **That's it, it will be live on your custom domain may be within 24hrs**

### **yay! now you know how to deploy your react app to GitHub with and without custom domain**
![yay](https://media.giphy.com/media/54YeJKsHggPxoQWXKL/giphy.gif)


# **<center>---Thank You---<center>**


![alt](https://media.giphy.com/media/cL5HSQ3L3bi3DX67nP/giphy.gif)