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