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 or windows pc and set it up.

Also make sure that Node.js 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.

$ npx create-react-app rolodex
cd rolodex

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.

npm install gh-pages

Step 3

Add the following properties to the package.json file

"homepage": "https://yourusername.github.io/yourRepositoryName"

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

"scripts":  {
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"

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.

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.

git add .
git commit -m 'your commit message'
git push origin main

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