DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Deploy react app to GitHub pages with and without a custom domain
Veeresh
Veeresh

Posted on • Updated on

Deploy react app to GitHub pages with and without a custom domain

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

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
Enter fullscreen mode Exit fullscreen mode

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"
}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

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
Then click on choose a theme and select a random theme from themes page
Alt Text
Now your site will be live, I don't know why it's working but it worked πŸ˜‚

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
    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
Enter fullscreen mode Exit fullscreen mode
  • setting up CNAME Record what is CNAME record? click here 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

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

---Thank You---

alt

Top comments (3)

Collapse
 
josh231101 profile image
Josue Arreola

The react app is not getting render just the favicon and the title, but nothin happens after that, HELP!

Collapse
 
veerreshr profile image
Veeresh Author

Sorry for late reply, if the problem still exists could u check if there is problem with code you want to render or share the code if that is not a problem.

Collapse
 
josh231101 profile image
Josue Arreola • Edited on

After running many times the deploy, but all of a sudden worked, I really don't know why. Thank you so much anyways!!
heyiamjosue.me/

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.