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

Prerequisites:

How to Install Create-React App:

npx create-react-app my-funcy-app


cd my-funcy-app


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:

git remote add origin remote repository URL

then git remote -v

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:

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:

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