How To Upload React Application Github

In this article, you volition larn about how to deploy a React app smoothly using the GitHub page. Then, let's begin.

Prerequisites:

Offset of all, yous need a GitHub account,
Download and install Git on your machine, and so set up it up
Node.js and npm installed in your auto (14.18.0 includes npm 6.fourteen.15) versions are accepted)

How to Install Create-React App:

In social club to install your react app, first become to your workspace and run the following command in the Terminal:

          npx create-react-app my-funcy-app

Then go to the projection repo where your app was installed:

          cd my-funcy-app

Concluding but not least run the post-obit command to meet your app on the browser:

          npm run start

If yous encounter something like this in the localhost browser you are skilful to go 👾.

Go on reading…

Before deployment, y'all should add your project to GitHub using the command line:

Create a new repository on GitHub.
Open up your terminal.
Initialize the local directory every bit a Git repository:

git init
Add the files to your new local repository:

git add .
Commit the files that yous've staged in your local repository:

git commit -m "initial commit"
Re-create the HTTPS URL of your newly created repo

In the Command prompt, add together the URL for the remote repository where your local repository volition exist pushed.

git remote add origin remote repository URL

and then git remote -v

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

git button -f origin main

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

Deployment:

Now later on yous build your beautiful app, it'southward time to share it with the earth. So allow'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 lot to create a new branch on your GitHub repo:

          npm install gh-pages — salve-dev

After that, get 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 instance, the package.json file now looks like this:

Still in your package.json file and add those ii lines in the scripts belongings:

          "predeploy": "npm run build", "deploy": "gh-pages -d build"

In my instance my scripts look like that:

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

          npm run deploy

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

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

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

React Router Event solution:

Don't worry well-nigh that; nosotros have solutions for this issue 😉. Proceed going.

If y'all are doing routing in your app using BrowserRoute from react-router-dom

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

Yous 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 effect there are 2 ways that you can take to deploy your application either by replacing the BrowserRouter to HashRouter so you take:

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

And so your code will be like the following:

          <Router>   <App /> </Router>

Or past another method. You can set a 404.html file in your /public folder, and so let's become extensively with this method:

Go back now to your App.js and rechange the Router type to the BrowserRouter and nevertheless in the same file to update Router component by calculation a basname prop to become dynamically repository name, because as y'all retrieve you lot specified the homepage in your package.json :

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

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

Now go to your /public binder, create a 404.html file and add together this code from this repo. Exist sure that pathSegmentsToKeep in line 26 is setting to ane and salvage the file.

Now, re-create lines nine-21 from this repo. and paste information technology in your /public/alphabetize.html file above the shut tag </head>.

And you lot are adept to go now with your deployment.