Deploying React App to Github Pages
Tags: javascript, github, react, webdev
Published: 2020-04-10 04:21:29

I have been hosting my static webpages on Github and use the CNAME to point the hosted project on gh-pages on my own domain name. 

I am new to modern web development and have been actively exploring the Full-stack web Development recently. Earlier just pushing my static HTML, CSS and JS files to github used to deploy the static contents directly. But when I pushed the react app for the first time to my Github repository, it simply didn't publish my page. It took me no longer to understand that some other way must exist to publish the static generation from React App.

Well, it’s simpler than I considered it to be. I am showing how to deploy a react app to gh-pages in no time.

**Getting Started:**

I had created a Notes taking app using Firebase and React. Nothing fancy but a very good starter project to do. 

You must have a Github account and Git and Node installed to your system. I assume, since you are looking forward to host an existing React Application, so you must be having these installed. 

Moving forward, I will quickly jump to installing Github Pages Package `gh-pages`. There are two kinds of Development Environment when working on some App.

1. Development Environment
2. Production Environment

To practice good coding habits we take care of the Production and Development Environment and therefore we will be installing `gh-pages` to the Development Environment.

Let's quickly jump to the current working directory of our React Application and then install `gh-pages` with the NPM package manager.

`npm install gh-pages --save-dev` or `yarn add gh-pages --save-dev`

This package basically creates a `gh-pages` branch on Github and also serve our bundled react files on the branch.

In any Node application, `package.json` is used to manage the properties and dependencies of the project. Let's find the `package.json` file in the root directory, add this line of code to your script: `"homepage": "link-to-your-repository"`, and save. In my case it looks like this:
`
{
   "name": "Notes App",
   "version": "1.0.0",
   "private": true,
   "homepage": "https://akhilesh-k.github.io/notes",
...
}
`
As I wrote earlier, I used to use my custom domain until it expired, so in case you too have a custom domain, you can add the domain the `homepage` property.

You have also noticed that inside your `package.json` file there is script object, it basically contains the scripts our React App uses to run. 

Again in the `package.json` file, let's find `“scripts”` and add these lines there:
`
{
   ...
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   ...
}
`
It depends on you, what package manager you use, you can write `yarn run build` too if you use `yarn`. In my case it was `npm`.

Now our script looks like this:

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

The `predeploy` command basically works behind the scenes in bundling up the React App while `deploy` command starts using the bundled app.

Assuming that you have git repository initialized and Github remote added to the directory, We will now run the `deploy` command to deploy it on Github Pages!

So let's do it!

In the terminal, run 
`npm run deploy` 

Alternatively you could also use `yarn run deploy` if you are Yarn guy. `deploy` basically pushes the after build file to the `gh-pagesbranch` on our remote Github repository.

In the meanwhile we have successfully published our React App to the Github pages, don't forget to commit the code!

**Godspeed**