Mastering Deployment: Showcasing Your React App on GitHub Pages

To deploy your React app on GitHub Pages, follow these steps:

1. Create a GitHub Repository:
   If you haven't already, create a new repository on GitHub where you'll store your React app's code.

2. Set Up Your React App:
   Make sure your React app is ready for deployment. Run the following command to create a production build:
   

   npm run build

1. Install gh-pages Package: Use the gh-pages package to streamline the deployment process. Install it using:

   npm install gh-pages --save-dev

1. Configure package.json: In your package.json file, add the following lines:

   "homepage": "https://<username>.github.io/<repository-name>",
   "scripts": {
     "deploy": "gh-pages -d build"
   }

1. Commit and Push: Commit your changes and push them to the repository:

   git add .
   git commit -m "Preparing for deployment"
   git push origin main

1. Deploy to GitHub Pages: Run the deployment script using:

   npm run deploy

1. Check GitHub Settings:
   In your repository on GitHub, navigate to the "Settings" tab. Scroll down to the GitHub Pages section and ensure that the source is set to gh-pages branch.

2. Access Your Deployed App:
   After a few minutes, your React app should be accessible at the URL: https://<username>.github.io/<repository-name>

3. Update and Redeploy:
   Whenever you make changes to your app, repeat steps 2, 4, 5, and 6 to update and redeploy your app.

4. Custom Domain (Optional):
   If you have a custom domain, you can configure it in the GitHub Pages settings.

By following these steps, you'll effectively deploy your React app on GitHub Pages, making it accessible to a wider audience.