Deploying A React app on GitHub Pages

GitHub offers more than just a host for your code. In this short tutorial, I will walk you through deploying a static react app/project on GitHub Pages.

I will be using one of my React projects from GitHub:

%[https://github.com/achingachris/myRepos]

A programmer’s learning tool is by practicing –I said that…

Let’s Get Started:

This tutorial assumes you already have your react project setup and ready to deploy

Step 1: Install the Dependencies (gh-pages):

I use npm for my projects, so while in your project root directory, open the project on your terminal or cmd (windows).

Install the gh-pages package as a dev-dependency of the app

npm install gh-pages --save-dev

Step 2: Define Homepage in package.json

In the package.json file in your react app and add homepage property using the given syntax:

http://{username}.github.io/{repo-name}

Where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository. Below is an example for my project:

"homepage": "http://achingachris.github.io/myRepos",

{
  "name": "myrepos",
  "homepage": "http://achingachris.github.io/myRepos",
  "version": "0.1.0",
  "private": true,
}