In this article, you will learn about how to deploy a React app smoothly using the . So, let’s begin. GitHub page Prerequisites: First of all, you need a , GitHub account Download and install on your machine, then Git 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 file in your root directory and add the property at the top level. package.json homepage "homepage": "https://username.github.io/repository-name", In my case, the file now looks like this: package.json Still in your file and add those two lines in the property: package.json scripts “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 in your browser after clicking on the URL, keep reading. 404 error 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 from BrowserRoute 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. So to solve this issue there are two ways that you can take to deploy your application either by replacing the to so you have: Solution: BrowserRouter HashRouter 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 file in your folder, so let’s go extensively with this method: 404.html /public Go back now to your and rechange the Router type to the and still in the same file to update Router component by adding a prop to get dynamically , because as you remember you specified the in your : App.js BrowserRouter basname repository name homepage package.json <Router basename={process.env.PUBLIC_URL}>
  <App />
</Router> That is the first path, you're almost done. Now go to your folder,  create a file and add this code from . Be sure that in line 26 is setting to and save the file. /public 404.html this repo pathSegmentsToKeep 1 Now, copy lines 9-21 from . and paste it in your file above the close tag this repo /public/index.html </head>. And you are good to go now with your deployment. Congratulations! Thanks for reading! I hope this article was helpful for you.

ATLASSIAN

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Github

Too Long; Didn't Read

Make resilience your competitive advantage

How to Deploy a React App to GitHub Pages

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Authentication: Create a Simple Rick and Morty Wiki Page

Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]

Building a React App with Rails API

Create React App is Dead! Here are Some Alternatives

Frontend Development Environment as a Package

Authentication: Create a Simple Rick and Morty Wiki Page

Build Your Own Currency Exchange Web App in ~100 lines using CRA [A Step By Step Guide]

Building a React App with Rails API

Create React App is Dead! Here are Some Alternatives

Frontend Development Environment as a Package

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps