How to Deploy a React App to GitHub Pages
Tags: javascript, webdev, react, githubpages
Published: 2024-07-02 03:07:38

# How to Deploy a React App to GitHub Pages

Deploying a React app to GitHub Pages is a great way to share your project with the world. GitHub Pages is a free hosting service that makes it easy to publish static websites directly from your GitHub repository. This article will guide you through the steps to deploy your React app to GitHub Pages.


{% youtube https://youtu.be/0d6tf4te4lw?si=kBTsma5TjiCqbE6o %}

## Prerequisites

Before we begin, make sure you have the following:

1. **Node.js and npm**: Install Node.js and npm from [nodejs.org](https://nodejs.org/).
2. **Git**: Install Git from [git-scm.com](https://git-scm.com/).
3. **GitHub Account**: Create a GitHub account if you don't have one already.

## Step 1: Create a React App

If you haven't already created a React app, you can do so using Create React App. Open your terminal and run the following commands:

```bash
npx create-react-app my-react-app
cd my-react-app
```

Replace `my-react-app` with the name of your project.

## Step 2: Install `gh-pages` Package

To deploy your React app to GitHub Pages, you'll need to use the `gh-pages` package. Install it by running:

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

## Step 3: Update `package.json`

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

1. **Homepage**: Add a `homepage` field to specify the URL where your app will be hosted. The URL should be in the format `https://<username>.github.io/<repository-name>/`.

   ```json
   "homepage": "https://<username>.github.io/<repository-name>/"
   ```

   Replace `<username>` with your GitHub username and `<repository-name>` with the name of your repository.

2. **Predeploy and Deploy Scripts**: Add `predeploy` and `deploy` scripts to automate the deployment process.

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

Your `package.json` should now look something like this:

```json
{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://<username>.github.io/<repository-name>/",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "devDependencies": {
    "gh-pages": "^3.2.3"
  }
}
```

## Step 4: Initialize a Git Repository

If your project is not already a Git repository, initialize it by running:

```bash
git init
git remote add origin https://github.com/<username>/<repository-name>.git
```

Replace `<username>` and `<repository-name>` with your GitHub username and repository name.

## Step 5: Commit Your Changes

Add and commit your changes:

```bash
git add .
git commit -m "Initial commit"
```

## Step 6: Push to GitHub

Push your project to GitHub:

```bash
git push -u origin master
```

## Step 7: Deploy to GitHub Pages

Deploy your app by running:

```bash
npm run deploy
```

This command will build your React app and push the `build` directory to the `gh-pages` branch of your repository. GitHub Pages will then serve the files from this branch.

## Step 8: Access Your Deployed App

After the deployment is complete, you can access your app at `https://<username>.github.io/<repository-name>/`. It might take a few minutes for the changes to be reflected.

## Conclusion

Deploying a React app to GitHub Pages is a straightforward process that allows you to share your projects with ease. By following these steps, you can quickly get your app online and accessible to others. Happy coding!