Deploy your React App on GitHub
Tags: react, github, javascript, webdev
Published: 2023-01-17 17:58:50

Hey Everyone!...
I know that you came here when you are really tired from deploying your React App on Netlify or Heroku etc. which makes the process little complex.
But are you aware that you can deploy your React application for free on GitHub?

How?

I'm going to show you how my [Emoji Search App](https://payalsasmal10.github.io/emoji-search/) website is online using GitHub Page.
 
Here it comes....

**How to deploy React applications on GitHub**
The following steps are required.

**1. Create your react application**
I know you did that step, which is why you're here. But the one who didn't, that's for them. But don't worry about it, you can skip it.

- Open the terminal from which you wish to create the project.

- You can create the project however you prefer. I am using below command to create project.
```javascript
npx react-create-project <Project Name>
```
Here I give the project name **_emoji-search_**.

- Now navigate to the created project folder
```javascript
cd emoji-search
```
**2. Setup a GitHub repository.**

- You can create the repository by clicking the **New button**, or you can push your codes if the repository already exists.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6e4p0e6pts0netr6rm4.png)

- You can either create a remote repository or, if you already have one, proceed as described for an existing repository. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79yll393ekye2g4nb9zl.png)

**Note: Your remote name should be **_origin_** and nothing else. Otherwise, you could be left with an error below...**

```javascript
Failed to get remote.origin.url (task must either be run in a git repository with a configured origin remote or must be configured with the "repo" option)`
```

**3. Deploy your React app to GitHub Repo.**

- Install [GitHub pages](https://github.com/gitname/react-gh-pages) npm package.

```javascript
npm install gh-pages --save-dev
```

- Open the **package.json** file 

- Add the **home,page** property to the **package.json** file inas follows.
```javascript
"https://{username}.github.io/{repo-name}"
```

```javascript
{ "homepage": "https://PayalSasmal10.github.com/emoji-search",
  "name": "emoji-search",
  "version": "0.1.0",
  "private": true,

```

- Add **predeploy** and **deploy** properties into the package.json file to the script object.

```javascript
"scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

- And finally, publish your website.
```javascript
npm run deploy
```
Once it is completed, you might see the published message at last and one build folder will be created in your react app project. As **predeploy** command will create distributed versions of React App.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fldcafqudij2sbbe0f83.png)

- Now to go your repo -> settings -> pages

That's how your **_pages_** look like now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxk1nzk0tjbyto0usanq.png)

After your successful deployment, you GitHub page will be look like below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7jlifr3gfo51fuv1hck.png)

You can see that my site name is the same as the one I provided as my homepage in **package.json**. 

And That's all. You have successfully deployed your React Application free of charge.

If you notice an error during your deployment, please let me know in the feedback section.

Thank you for reading the blog. If you like it, please do share.

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp0fjywubjx6wb39etti.gif)](https://www.buymeacoffee.com/payalsasmal)