Deploying a React App to GitHub Pages
Tags: react, github, webdev, productivity
Published: 2021-06-15 13:43:45

## React App*

\* created using `create-react-app`

## Introduction

In this tutorial, I'll show you how I deployed a React app—which I created using `create-react-app` to GitHub Pages.

You can visit the deployed app, at [https://cenacrharsh.github.io/test/](https://cenacrharsh.github.io/test/).

This repository contains the files related to the app. The `master` branch contains the app's source code (the code the app's developers edit), and the `gh-pages` branch contains a *built* version of the app (i.e. the code that GitHub Pages serves to the app's visitors).

The remainder of this document contains a tutorial on creating a React app (using `create-react-app`) and deploying that app to GitHub Pages.

## Tutorial

### Prerequisites

1. An adequate version of [`Node.js`](https://nodejs.org/) is installed. Here's the adequate version I use:

    ```sh
    $ node --version
    v14.17.0
    ```

2. An adequate version of  [`npm`](https://nodejs.org/) is installed. Here's the adequate version I use:

    ```sh
    $ npm --version
    6.14.13
    ```
3. An adequate version of [`create-react-app`](https://github.com/facebookincubator/create-react-app) is installed. Here's the adequate version I use:

    ```sh
    $ create-react-app --version
    4.0.3
    ```

    In the case of `create-react-app`, you can either install it globally (i.e. `$ npm install -g create-react-app`) or install it locally (i.e. `$ npm install create-react-app`). If you choose the latter, you will have to specify its path whenever you invoke it (e.g. `path/to/node_modules/.bin/create-react-app`).

4. A [GitHub](https://www.github.com) account.

5. A command-line Git client [setup according to GitHub](https://help.github.com/articles/set-up-git/).

## Procedure

1. **Create an *empty* repository on GitHub.** 

    > For this tutorial, I'll create a repository named `test`.
    > By *empty*, I mean *without* a `README.md` file, a `.gitignore` file, a `LICENSE` file, or any other files.

2. **Create a new React app on your computer.**

    ```sh
    $ create-react-app test
    ```
    
    > This is the app you will deploy to GitHub Pages in step 7.
    > I opted to give the app the same name as my GitHub repository (i.e. `test`). However, you can name them differently from one another (e.g. you can name your app `app-123` and your GitHub Repository `repo-456`).
    > This will create a new folder named `test` (or whatever you named your app) on your computer.

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

> The commands shown in the following steps can all be issued from within the app's folder, so make sure to navigate to the newly created `test` folder and then use the commands. Use `$ cd test` to navigate to the app folder from where you are currently on the terminal.

After navigating to the `test` folder use:


    ```
    $ npm install gh-pages --save-dev
    ```
   
4. **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 you created in step 1. Since my GitHub username is `cenacrharsh` and the name of my GitHub repository is `test`, I added the following property:
    
    ```js
    //...
    "homepage": "http://cenacrharsh.github.io/test"
    ```
    
    > In the existing `scripts` property, add a `predeploy` property and a `deploy` property, each having the values shown below:

    ```js
    "scripts": {
      //...
      "predeploy": "npm run build",
      "deploy": "gh-pages -d build"
    }
    ```
   
5. **Create a git repository in the app's folder.**

    ```
    $ git init
    ```

6. **Add the GitHub repository as a "remote" in your local git repository.**

    ```
    $ git remote add origin https://github.com/cenacrharsh/test.git
    ```
    
    > This will make it so the `gh-pages` package knows where you want it to deploy your app in step 7.
    > 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) in step 8.

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

    ```
    $ npm run 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://cenacrharsh.github.io/test/
    > Explore the GitHub repository at this point. You will see that, although a `master` branch did not exist, a `gh-pages` branch did exist. The `gh-pages` branch contained the *built* app code, as opposed to the app's source code.

8. **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 -u origin master
    ```

    > Explore the GitHub repository once again at this point.You will notice that a `master` branch now existed, and it contained the app's source code.
    > So, the `master` branch holds the source code, and the `gh-pages` branch holds the *built* app code.

## References

1. [Facebook's tutorial on deploying a React app to GitHub Pages](https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom)