How to deploy React App on GitHub for free
Tags: github, react, javascript, deploy
Published: 2021-08-12 16:22:12

## To deploy React App we need to follow five simple steps

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8erkh7n4w3bjvh9v183s.jpeg)

### Step 1

Let's create react app as name of my app is `react_app`.

```
$ npx create-react-app react_app
```

### Step 2 

Install the `gh-pages` package as a "dev-dependency" of the app.

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

           OR

$ yarn add gh-pages 
```

### Step 3

#### Create new repository on GitHub as Public.

The commands shown in the following steps can all be issued from within the app's folder. Add some properties to the app's `package.json` file.

At the top level, add a homepage property. Define its value to be the string `http://{username}.github.io/{repo-name}`, where `username` is your GitHub username, and `repo-name` is the name of the GitHub repository.

Since my GitHub username is `git_user_name` and the name of my GitHub repository is `react_app`, I added the following property:

```
//...
"name": "Project Name",
"homepage": "http://git_user_name.github.io/react_app",
"version": "0.1.0...",

```
In the existing scripts property, add a `predeploy` property and a `deploy` property, each having the values shown below:

```
"scripts": {
   //...
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
  }

          OR

"scripts": {
   //...
   "predeploy": "yarn build",
   "deploy": "gh-pages -d build"
  }
```

### Step 4

Create a git repository in the app's folder.

```
$ git init
```
Initialized and Add the GitHub repository as a "remote" in your local git repository.

```
$ git remote add origin https://github.com/git_user_name/react-app.git
```
This will make it so the `gh-pages` package knows where you want it to deploy your app. 

### Step 5

It will also make it so git knows where you want it to push your source code (i.e. the commits on your master branch).

Generate a production build of your app, and deploy it to GitHub Pages.

```
$ npm run deploy
    OR
$ yarn deploy    
```

That's it! Your app is now accessible at the URL you specified in step 4. In my case, my app is now accessible at: `https://git_user_name.github.io/react-app/`
 
I recommend exploring the GitHub repository at this point. When I explored it, I noticed that, although a master branch did not exist, a gh-pages `branch` did exist. I noticed the latter contained the built app code, as opposed to the app's source code. Optionally, commit your source code to the "master" branch and push your commit to GitHub.

```
$ git add .
$ git commit -m "Create a React app and publish it to GitHub Pages"
$ git push origin master

```
I recommend exploring the GitHub repository once again at this point. When I did that, I noticed that a master branch now existed, and it contained the app's source code. So, the master branch held the source code, and the `gh-pages` branch held the built app code.

#### Now it's time to check hosted app.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahdzsfroydtzz0i9kmrr.png)
 
You can see now in the Environments section github-pages is active.
after clicking it will redirect to this.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ka3fzh4uzs78jxupohwb.png)

Now, Click on view Deployment Button to check hosted app.

🥳 Happy hosting 😍 !