How to Deploy React Apps to Github
Tags: react, javascript, github, deployment
Published: 2020-12-28 11:11:47

---
title: How to Deploy React Apps to Github
published: true
description: In this tutorial, we will go over the steps of getting your React application live on the internet.
tags: #React, #JavaScript, #Github, #Deployment
//cover_image: https://res.cloudinary.com/codeg0d/image/upload/v1609154129/monster_rolodex_kpgwys.png
---

Building a React application on your localhost or machine is one of those things we do as developers. After creating that wonderful app on your laptop, you would want the world to see that amazing application live on the world wide web. We are going to use the Create React App (CRA) process to build and deploy our app using Github pages (gh-pages).

Before we begin, you should have a basic understanding of using CRA in setting up the boilerplate for our application.


## Prerequisite

These are some of the nice to have before we start.

* [Github](https://github.com) account

* Install [Git](https://git-scm.com/) for mac or windows pc and [set it up](https://support.atlassian.com/bitbucket-cloud/docs/install-and-set-up-git/).

Also make sure that [Node.js](https://nodejs.org/en/) and npm are installed on your pc for installing the dependency, `gh-pages` for deployment.

## Goals

In this tutorial, we will go over the steps of getting your project live on the internet. Here are the links to the demo and source code of the hosted Rolodex page.

* [Source](https://github.com/Terieyenike/rolodex/blob/master/package.json)

* [Demo](https://terieyenike.github.io/rolodex)

## Getting started

**Step 1**:

For ease of getting started quickly, we would make use of [Create React App](https://reactjs.org/docs/create-a-new-react-app.html) to set up the environment.

```
$ npx create-react-app rolodex
cd rolodex
```
**Note**: Rolodex is just a name I decided to use for my React app, you can use any name of your choice.


**Step 2**:

Install the **Github pages** package. This package helps to create a branch (gh-pages) on the created repository on Github to handle the building of our application to its live URL when we are ready to deploy to it.

 ```
npm install gh-pages
```

**Step 3**

Add the following properties to the `package.json` file

```json
"homepage": "https://yourusername.github.io/yourRepositoryName"
```

For the **scripts** section of the `package.json` file, add the following.

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

**Step 4**

Run the `npm run deploy` command which creates a build folder and our app for us with all the files necessary for deployments such as HTML, JavaScript, and CSS files.


## Change the default branch to gh-pages in the repository settings.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609117377876/YFEjDCgwe.png)

One very important point to note in the above steps is to commit and push your changes to Github on the same created repository name you used in deploying this application. 
```
git add .
git commit -m 'your commit message'
git push origin main
```

## Conclusion

To summarize, we went through the steps in deploying our React application with gh-pages. And with these steps, you can use this method with all your React application you build and simply show the world what you are made of. 

If this helped you in any way, kindly leave feedback. It is always welcome. Reach out to me on [Twitter](https://twitter.com/terieyenike)