Hosting a React App on GitHub Pages

In this guide, I'll walk you through the steps to host your React app on GitHub Pages.

Step 1: Create a GitHub Repository

1. Go to GitHub and create a new repository.
2. Name the repository (e.g., my-react-app).
3. Optionally, initialize the repository with a README.md file.

Step 2: Install gh-pages

Navigate to your React app's directory and install the gh-pages package:

npm install gh-pages --save-dev

Step 3: Update package.json

Open your package.json file and make the following changes:

Add a homepage Field

At the top of your package.json, add:

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

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

Add Deployment Scripts

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

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

• predeploy: Automatically runs npm run build before deploying.
• deploy: Deploys the contents of the build directory to the gh-pages branch.

Step 4: Build and Deploy

Run the following command to build and deploy your app:

npm run deploy

This command creates a production build of your app and pushes it to a gh-pages branch in your repository.

Step 5: Configure GitHub Pages

1. Go to your repository on GitHub.
2. Click on the "Settings" tab.
3. Scroll down to the "GitHub Pages" section.
4. Under "Branch," select gh-pages.

Your React app should now be live on GitHub Pages at https://<your-username>.github.io/<your-repository-name>.