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.

Prerequisites

Before we begin, make sure you have the following:

1. Node.js and npm: Install Node.js and npm from nodejs.org.
2. Git: Install Git from 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:

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:

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>/.

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

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

1. Predeploy and Deploy Scripts: Add predeploy and deploy scripts to automate the deployment process.

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

Your package.json should now look something like this:

{
  "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:

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:

git add .
git commit -m "Initial commit"

Step 6: Push to GitHub

Push your project to GitHub:

git push -u origin master

Step 7: Deploy to GitHub Pages

Deploy your app by running:

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!