Removing the repeated github username from the homepage url fixed the problem:

Correct value for "homepage":

"homepage": "https://myusername.github.io/myreponame"

You need to add your root path to the basename prop of BrowserRouter

If you are not using BrowserRouter, add the following

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)  

process.env.PUBLIC_URL is is a part of the node.js library and is a dynamically generated url that changes based on what development mode you are in, whether you are working on your app locally, or on an actual production server like GitHub pages (https://parthaaaaa.github.io/firstwebapp/).

Also update the route to your home/firstwebapp component(if any)

 <Route exact path='/firstwebapp' render= ... />} />

to

 <Route exact path='/' render= ... />} />

With this change when the route path matches the ‘process.env.PUBLIC_URL’ (reponame + ‘/’) it will render your firstwebapp component

Thank you! In the guides I had read online about setting up Github Pages, they said to add the homepage property to package.json as the following https://{username}.github.io/{repo-name} . After receiving some help, I had to change it to https://{username}.github.io/ . The repository name was causing the site to reroute to something that doesn’t exist.

In your index.html you have this link:

I think you need a . in front of the slash. So changing it to:

Might help, it's worth a try.

If anyone ever comes across this, I switched from BrowserRouter to HashRouter and it worked just fine.

GitHub pages only supports static sites, it does not run npm start

Your app is receiving 404 errors because it is requesting files that do not exist. Upon looking at the gh-pages branch on your Contacts repository, it appears that the URLs appear in the format of /contacts/static/js/main.124f9f15.chunk.js (note the lowercase c in contacts). Your repository is named Contacts (note the uppercase first character). In your post, you even use the uppercase C in the URL. When I manually requested the URL https://jerryfireman.github.io/contacts/static/js/main.124f9f15.chunk.js, I get the 404 error. But when I request the URL https://jerryfireman.github.io/Contacts/static/js/main.124f9f15.chunk.js, I get the expected contents of the file.

If you change the URLs in your application to use the proper casing for the Contacts path, things should work again.

I hope that helps!

I believe u need to npm build or sth along those lines and then upload it to a site. Just basing it off the screenshot.

Never use BrowserRouter on GitHub Pages. There are some issues with it, it always shows blank screen. Use HashRouter instead, that will most probably work.

import { HashRouter } from "react-router-dom";

// some code here

return (
    <HashRouter base="/">
        <App />
    </HashRouter>
)

I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:

• First things first, make sure that your ".git" folder and your project are in the same folder.

1. Run npm run build. You should have a dist folder now.
2. Open the file vite.config.js (or .ts).
3. Add the base file with your repository name. Include the two /.

Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.

export default defineConfig({
  base: "/react-beautiful-dnd/",
  plugins: [react()],
});

3. Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
4. git add .
5. git commit -m "deploy"
6. git subtree push --prefix dist origin gh-pages
7. Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd

In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.

That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.