How to Deploy a React App to GitHub Pages

In this article, you will learn about how to deploy a React app smoothly using the GitHub page. So, let’s begin.

Prerequisites:

• First of all, you need a GitHub account,

• Download and install Git on your machine, then set it up

• Node.js and npm installed in your machine (14.18.0 includes npm 6.14.15) versions are accepted)

How to Install Create-React App:

• In order to install your react app, first go to your workspace and run the following command in the Terminal:

npx create-react-app my-funcy-app

• Then go to the project repo where your app was installed:

cd my-funcy-app

• Last but not least run the following command to see your app on the browser:

npm run start

first react app

Keep reading…

Before deployment, you should add your project to GitHub using the command line:

• Create a new repository on GitHub.

• Open your terminal.

• Initialize the local directory as a Git repository:

  git init

• Add the files to your new local repository:

  git add .

• Commit the files that you’ve staged in your local repository:

  git commit -m "initial commit"

• Copy the HTTPS URL of your newly created repo

Get HTTPS URL from your GitHub repository

• In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

git remote add origin remote repository URL

then git remote -v

• Push the changes in your local repository to GitHub using the following command :

git push -f origin master

That is all, your project is linked remotely with GitHub repo.

Deployment:

Now after you build your beautiful app, it's time to share it with the world. So let’s deploy your React app to GitHub pages:

Go back to your terminal and run this command to install gh-pages as “dev-dependency”, which will allow you to create a new branch on your GitHub repo:

npm install gh-pages — save-dev

After that, go to your package.json file in your root directory and add the homepage property at the top level.

"homepage": "https://username.github.io/repository-name",

In my case, the package.json file now looks like this:

package.json file with the homepage property

Still in your package.json file and add those two lines in the scripts property:

“predeploy”: “npm run build”,
“deploy”: “gh-pages -d build”

In my case my scripts look like that:

package.json

Save package.json, and run the following command to deploy it to GitHub Pages:

npm run deploy

Terminal screenshot while deployment

Now if you switch to your GitHub repository and then Settings -> GitHub pages section you will be able to see the URL that you assigned to the homepage property in your package.json

Congratulations 🎉! you have successfully deployed your react App using the GitHub page.

If you are getting a 404 error in your browser after clicking on the URL, keep reading.

Gh-Pages Deployment Issue With React Router

React Router Issue solution:

Don’t worry about that; we have solutions for this issue 😉. Keep going.

If you are doing routing in your app using BrowserRoute from react-router-dom

import { BrowserRoute as Router } from "react-router-dom"

You will face the 404 error page mentioned above. Because the gh-pages don't support client-side routers that use the HTML5 history.

Solution: So to solve this issue there are two ways that you can take to deploy your application either by replacing the BrowserRouter to HashRouter so you have:

import { HashRouter as Router } from "react-router-dom"

So your code will be like the following:

<Router>
  <App />
</Router>

Or by another method. You can set a 404.html file in your /public folder, so let’s go extensively with this method:

Go back now to your App.js and rechange the Router type to the BrowserRouter and still in the same file to update Router component by adding a basname prop to get dynamically repository name, because as you remember you specified the homepage in your package.json :

<Router basename={process.env.PUBLIC_URL}>
  <App />
</Router>

That is the first path, you're almost done.

Now go to your /public folder, create a 404.html file and add this code from this repo. Be sure that pathSegmentsToKeep in line 26 is setting to 1 and save the file.

Now, copy lines 9-21 from this repo. and paste it in your /public/index.html file above the close tag </head>.

And you are good to go now with your deployment.

Congratulations!

Thanks for reading! I hope this article was helpful for you.