Deploy React Apps to Github Pages

Deploying React applications is a practice that must be followed to stop your hardwork go into oblivion. Getting your application running on a free hosting service can help you add it to your resume, and portfolio or present it to your future clients to obtain freelance gigs.

In this article, you will get to learn the step-by-step procedure to get your React application deployed to GitHub Pages, a popular hosting service offered by GitHub.

There are certain pre-requirements that you must ensure before pushing your code.

1. Node.js must be installed on the system used for deployment

2. React App is existing on GitHub as a repository

Step 1 - Installing Github Pages

We move on to the terminal and write the command,

npm install gh-pages --save-dev

The command npm install gh-pages --save-dev installs the gh-pages package as a development dependency for your React app. This package provides a simple way to deploy your app to GitHub Pages.

"devDependencies": {
    "gh-pages": "^5.0.0"
}

Step 2 - Homepage Property

In the same package.json of the project, we need to add a property that denotes the homepage where anyone can access your webpage on the go. All you need to do is place your username in place of the parenthesis enclosed text and repository name in place of the text enclosed inside the parenthesis with the text repo-name.

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

The newly formed property might look somewhat in this manner.

"homepage": "http://alimalim77.github.io/airbnb-clone"

Step 3 - Deployment Scripts

We need to add a couple of properties to our script property in the package.json file to ensure the proper build and deployment of our react app. The two properties being pre-deploy and deploy, we can add them or perhaps be self-explanatory, just paste the below-mentioned code.

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

Once we are done, our script property would look 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 following command runs the production build of the app and we are left with some final touches to make our React App available publicly.

npm run deploy

Step 4 - Finalizing our Deployment

Now that we are done adding the scripts to our package file. we can go ahead to the GitHub Repository settings, select pages from the left panel and choose the gh-pages branch as our source in order to make the build from the following branch.

Voila, you can access your React App from the URL or value that you just gave to the homepage property in the earlier steps of Deployment.