How to Deploy a React App on GitHub Pages - Step-by-Step Guide

Hello Everyone, in this video we will see how to make a React project live on GitHub Pages. Follow these steps to get your React app deployed.

Step 1: Create a New React Project

First, open your terminal and create a new React project using create-react-app. Here’s how:

npx create-react-app test

Navigate into your project directory:

cd test

Open your project in VS Code:

code .

Step 2: Modify package.json

Open package.json and add the homepage field. Replace your-username and your-repo-name with your GitHub username and repository name:

{
  "homepage": "https://your-username.github.io/your-repo-name"
}

Step 3: Install gh-pages

Install the gh-pages package as a dev dependency:

npm install gh-pages --save-dev

Step 4: Add Deployment Scripts

Add the following scripts to package.json under the scripts section:

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

Step 5: Deploy Your App

Deploy your app by running the following command:

npm run deploy

Step 6: Verify Deployment

Go to your GitHub repository settings and ensure that GitHub Pages is set to use the gh-pages branch. Your site should be live at https://your-username.github.io/your-repo-name.

Additional Notes

If you encounter any issues, make sure to check the terminal output for errors and resolve them accordingly. You can also leave a comment on this post for further assistance.

Thank you for following along! Your React project should now be live on GitHub Pages.