How to deploy a React app to GitHub Pages



Image not found!!

Deploying a React app to GitHub Pages involves a few steps. GitHub Pages allows you to host static websites directly from your GitHub repository. Here's a step-by-step guide:

Step 1: Create a GitHub Repository

If you don't have a GitHub repository for your React app, create one. Make sure your React app is ready and committed to the repository.

Step 2: Install GitHub Pages Package

You'll need to install the gh-pages package to help with deploying your React app to GitHub Pages. Open your terminal and run the following command:

bash
npm install gh-pages --save-dev

Step 3: Update package.json

Add the following lines to your package.json file:

json
"homepage": "https://your-username.github.io/your-repository-name",
"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build",
  ...
}

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

Step 4: Deploy the App

Run the following commands in your terminal:

bash
npm run deploy

This will run the predeploy script to build your React app and then deploy it to GitHub Pages using the deploy script.

Step 5: Check Your GitHub Repository Settings

Go to your GitHub repository, navigate to the "Settings" tab, and scroll down to the "GitHub Pages" section. You should see a message indicating that your site is published.

Step 6: Access Your Deployed App

Your React app is now deployed to GitHub Pages. You can access it at the URL mentioned in the "GitHub Pages" section of your repository settings.

Note:

  • Make sure your React app uses relative paths for assets and links to work correctly on GitHub Pages.
  • If you encounter issues, check the GitHub Pages documentation and the gh-pages package documentation for troubleshooting.

Remember to update your GitHub Pages whenever you make changes to your React app by running npm run deploy again.

Category List