Deploying Your React Web Application to GitHub Pages

Most of the people and especially developers want to go online with there extraordinary ideas but due to low budget or some financial issues, they are not gonna succeed to make their website live. So, this article is all about solving their problem. In this note, we'll learn How to deploy React Website to the GitHub Pages.

Before, we start you need to know few things:

• What is the Github Pages?
• How to Create React App?
• How to Create Github Repository?

What is the Github Pages?

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process and publishes a website. Review this link to know more about Github Pages. In this article we are going to use gh-pages npm package to deploy the react app on Github Pages.

How to Create React App?

If you beginner on Reactjs then I'll suggest you refer this link for creating react app.

How to Create Github Repository?

To create github repository, first of all you must have an account on github. Then refer this link to know how to create a repository on Github.

Okay, let's start. I assume now you already have installed the react app and GitHub repository.

First, we need to install the GitHub Pages package as a dev-dependency. So, move to your application folder in the terminal.

saveCopyzoom_out_map
cd your-app
npm install gh-pages --save-dev
// Or
yarn add gh-pages

Now initialize git and your remote repository.

saveCopyzoom_out_map
git init
git remote add origin git@github.com:username/your-app-reponame.git

gh-pages package would help us to create a gh-pages branch on Github and also help us to serve our react files on the branch.

Now, open package.json file which is located on your root directory, and this line "homepage": link-of-your-repository after private": true,.

saveCopyzoom_out_map
{
    "name": "your-app",
    "version": "0.1.0",
    "private": true,
    "homepage": "https://username.github.io/your-app-reponame",
    ...
}

If you are linking your custom domain to GitHub page then it should be like "homepage": "https://example.com",

Note: If you want to add a custom domain on github pages then refer to this link.

Now, in the same package.json file we need to add few more codes. So, find scripts and add the following lines.

saveCopyzoom_out_map
{
   ...
   "predeploy": "yarn run build",
   "deploy": "gh-pages -d build",
   ...
}

So, it looks like below

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

Now, in the terminal, run below command.

saveCopyzoom_out_map
npm run deploy OR yarn run deploy

This command creates a gh-pages branch on your repository if it does not exist and then pushes your built file to the gh-pages branch on your repository.

That's it!! Now we are done all the steps and our react web application is hosted on Github Pages. You can check it from the below link.

saveCopyzoom_out_map
https://username.github.io/your-app-reponame
Or
https://example.com

Routing using on gh-pages does not work well with BrowserRouter or ReactRouter, make use of HashRouter from react-router-dom instead.

I hope this tutorial helped you find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions.

P.S. Do share this note with your team.