Deploying React App to Github Pages

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