React app on github page not working displaying 404.

[thomyhabesha]

Select Topic Area

Bug

Body

I created a react app i followed all steps from npm init to npm run deploy. When i run it localy it works fine. But when i deploy on github it shows 404 error. Here is my code https://github.com/thomyhabesha/NurPor

[BlackishGreen33]

Hello @thomyhabesha
You can follow my steps and try to make changes.

• Build the React project: Ensure that your React project is complete and can be successfully built. In the terminal or command prompt, navigate to your project directory and execute the following command to build the project:

npm run build

This will generate an optimized production-ready version of your React application.

• Deploy to GitHub Pages: In the root directory of your project, create a folder named .github/workflows. Inside that folder, create a file named deploy.yml and copy the following content into the file:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 14

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: gh-pages
          folder: build

This deployment script will automatically build and deploy your project to GitHub Pages whenever you push to the main branch.

• Commit and push the changes: Add the .github/workflows/deploy.yml file to Git and commit the changes to your repository. In the terminal or command prompt, execute the following commands:

git add .
git commit -m "Add deploy workflow for GitHub Pages"
git push origin main

This will add the deployment script to your repository and push it to GitHub.

• Wait for the deployment to complete: GitHub Actions will automatically run the deployment script and deploy the built project to GitHub Pages. You can monitor the deployment progress and logs on the "Actions" tab of your repository.

• Access your website: Once the deployment is complete, your React project will be accessible on GitHub Pages through the following link:

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.

Please note that deploying to GitHub Pages may take some time to complete and there might be some delay. Once deployed successfully, your React project will be visible at the specified link.

Hope this helps.