Simple And Easy Way to Deploy React App On GitHub Pages
Tags: react, webdev, github, javascript
Published: 2022-09-24 15:20:05

When we build a React app then we eagerly want to deploy it and want to show our amazing app to the world.
And here, are the simple steps to deploy React app on GitHub Pages.

###Prerequisites
* You should have a GitHub account
  (If you don't have GitHub account then go in to [GitHub](https://github.com/) and create a new account.)
* Make sure [Node and npm](https://nodejs.org/en/download/) are 
  installed in your system.
* And you should have one React project.

**What is GitHub Pages?**
GitHub pages is a service provided by GitHub to publish a static website on GitHub. You add Html, CSS and JavaScript files on a GitHub repository and GitHub pages turns it into a static website.

##<u>Steps for deploy React app on GitHub Pages:</u>

---


###**Step 1:** Create a GitHub repository on [GitHub](https://github.com/) Account.
* Go in to your GitHub account, and click on the + icon in the top right corner and then click on the New repository for creating a new repository.

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpixi6ksm5uhljk3dm90.PNG)

* Now give a name for your project in Repository name field as I give it a name "First-react-app" you can give any name.

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7q72z2wgodpx08cm0bl.PNG)

* Then click on create repository button, it will create your repository.

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8syq9nknh8eeyv0xg5m.PNG)

* After your repository is created, you can see this page on your screen

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbmi401y40eukrketzc8.PNG)

###**Step 2:** 
After creating a GitHub repository, Go in to your terminal and open your react project directory in your terminal.
`cd react_app`
here react_app is my folder name where i have created react app.

###**Step 3:** Adding the GitHub Page dependency package.
Run the following command in your terminal:
for installing GitHub Pages package as a dev dependency via npm.
`npm install gh-pages --save-dev`

After installing you can see the dev dependency in your package.json file as shown in this image.
![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l537wphdako1m8s17o8a.PNG)

###**Step 4:** Adding the homepage in package.json file.
Now, Go into your package.json file in your react app folder and add the following homepage.
`"homepage": "https://myusername.github.io/my-app",`
**Note:** In place of "myusername" put the user name of your GitHub account and in place of "my-app" put the repository name which you have created earlier then save the package.json file.
As my repository name is "First-react-app".

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia8m0tzn4pccmstn401a.PNG)

###**Step 5:** Adding the deploy scripts in package.json file.
Now, scroll down in your package.json file and in scripts section put the following scripts:

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

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yoaeede5ggr13q38fyuh.PNG)
And then save the file.


###**Step 6:** Now run the following commands in your terminal.
`git init`
`git add -A`
`git commit -m "First commit"`
(In place of First commit you can write any message)
`git branch -M main`
`git remote add origin https://github.com/your_username/your_repository_name.git`
(Here, in place of your_username put your username of GitHub account and in place of your_repository_name put your repository name)
`npm run deploy`

###**Step 7:**
Go into your GitHub repository and refresh that page until you don't get a tick mark as shown in this picture:

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tv6h609mphbab6ukwfj2.PNG)
And then go to settings in your GitHub account and then go to pages which is located in left corner.

![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b83ibk1xxlb8oyramvwv.PNG)
And congratulations :) you can see your react app is deployed and you get your live link for your react app.
![GitHub account](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd5fj1iolu60a7ymnmcf.PNG)
After that click on visit site button to see your website :).

###**You can also watch this video for your help.**


{% embed https://www.youtube.com/watch?v=9cyNWTSVkXk %}