How to Deploy React Apps to Github

Building a React application on your localhost or machine is one of those things we do as developers. After creating that wonderful app on your laptop, you would want the world to see that amazing application live on the world wide web. We are going to use the Create React App (CRA) process to build and deploy our app using Github pages (gh-pages).

Before we begin, you should have a basic understanding of using CRA in setting up the boilerplate for our application.

Prerequisite

These are some of the nice to have before we start.

Github account

Install Git for Mac and Windows PC and set it up

Also make sure that Node and npm are installed on your PC for installing the dependency, gh-pages for deployment.

Goals

In this tutorial, we will go over the steps of getting your project live on the internet. Here are the links to the demo and source code of the hosted Rolodex page.

* Source

* Demo

Getting started

Step 1:

For ease of getting started quickly, we would make use of Create React App to set up the environment.

set up your environment

Note: Rolodex is just a name I decided to use for my React app, you can use any name of your choice.

Step 2:

Install the Github pages package. This package helps to create a branch (gh-pages) on the created repository on Github to handle the building of our application to its live URL when we are ready to deploy to it.

install Github pages

Step 3

Add the following properties to the `package.json` file

homepage property

For the scripts section of the package.json file, add the following.

predeploy and deploy properties

Step 4

Run the npm run deploy command which creates a build folder and our app for us with all the files necessary for deployments such as HTML, JavaScript, and CSS files.

Change the default branch to gh-pages in the repository settings

Change branch to gh-pages

One very important point to note in the above steps is to commit and push your changes to Github on the same created repository name you used in deploying this application.

Commit and push your code

Conclusion

To summarize, we went through the steps in deploying our React application with gh-pages. And with these steps, you can use this method with all your React application you build and simply show the world what you are made of.

If this helped you in any way, kindly leave feedback. It is always welcome. Reach out to me on Twitter.