paint-brush
How to Deploy a React App to GitHub Pagesby@hamzaellaouzi
10,596 reads
10,596 reads

How to Deploy a React App to GitHub Pages

by Hamza EllaouziOctober 13th, 2021
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow
EN

Too Long; Didn't Read

In this article, you will learn about how to deploy a React app smoothly using the GitHub page. 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)
featured image - How to Deploy a React App to GitHub Pages
Hamza Ellaouzi HackerNoon profile picture


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


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.