How to Deploy a React App to GitHub Pages by@hamzaellaouzi

How to Deploy a React App to GitHub Pages

Hamza Ellaouzi HackerNoon profile picture

Hamza Ellaouzi

Full Stack Developer || Civil Engineering || Lifelong Learner

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



  • 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

If you see something like this in the localhost browser you are good to go 👾.

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


  • 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.


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": "",

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


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:


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

npm run deploy


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.


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:

  <App />

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 />

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.


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


Signup or Login to Join the Discussion


Related Stories