Deploy Your React App to Github Pages

Hi folks, Today we will learn about how to deploy React App to GitHub pages.

Warning:- This post is strictly for Apps without routing. Another post will cover the deployment of the Routed React App to Github Pages.

Prerequisites

1. The only thing we need to have is an npm package called gh-pages. So let's get started.

I'm assuming that you have some knowledge of React and Git and also you've node and npm/yarn installed. To check whether node and npm/yarn is installed or not, type these commands in a terminal window

node -v
npm -v #use anyone npm or yarn
yarn -v

Warm-up

1. We need a github repo with the same name as your React project. So go to your github account and create a repo.

   I'm assuming you've git initialized in your project folder. If not type the following in a terminal window

   git init
   

2. Now add this repo as remote to your project using command git remote add <name-of-remote> <url-of-repo> For Example:-

   git add origin https://github.com/cur10sDEV/react-project
   

   It's very important to name the remote origin as it will be used in our deployment process

3. Configure an Upstream branch and set the remote as origin.

   git push --set-upstream origin master
   

   Here master is our local repo.

The Real Game

Now comes the main part. We need to install an npm package called gh-pages in order to deploy our app to Github Pages.

1. Install gh-pages using following command

   npm install gh-pages
   

2. In order to use gh-pages properly, we need to add two scripts to package.json file.

   "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build", #script 1
    "deploy": "gh-pages -d build", #script 2
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
   },
   

3. Add homepage field to packages.json

   "homepage": "https://cur10sDEV.github.io/react-project/", #replace cur10sDEV and react-project with your username and repo respectively
   

4. The Climax. Now just run the following command to deploy the app

   npm run deploy
   

   In the background this command will take care of building the app and pushing it to a branch called gh-pages, which Github uses to link with Github pages. After successful deploy the terminal will print Published. Now you can check out your app.

Conclusion

This is it for now. Hope you folks liked it. please share with every React beginner to help them out. Thanks for reading 😊