React website that works on my local computer, doesn't work after I generated a Github link for it. How do I fix the problem?

[Snamude]

Select Topic Area

Question

Body

Hi,

I made sure all the codes work locally on my computer before I uploaded/sent them to my Github. However when I turned the product listing store repository into a link, for some unknown reason the product listing, the cart, and Navbar aren't shown when I click on the Github link that was generated for it. I'm getting a blank white screen. Only thing showing is the title of my website. Attached is a screenshot of what is shown when I click on the Github link that was generated for my react project repository. This is a link to the product listing of plants, Navbar, and cart repository https://github.com/Snamude/plantshopapp.git
Please help me fix this problem before 11.59pm EST tonight because this React project is due tonight for a React course I'm taking. I don't know why its not working because all the codes work on my local computer. I thank you in advance.

Sincerely,

Stella

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[Hanashiko]

Hi @Snamude ,

From your description, it sounds like your React project is working locally but not rendering anything when deployed via the GitHub Pages link. A blank white screen with only the title typically indicates that the app failed to load due to a configuration or path issue.

Here are a few things to check:

1. Check the homepage field in your package.json
   If you're using GitHub Pages for deployment, you need to set the homepage field correctly. For example:

"homepage": "https://snamude.github.io/plantshopapp"

2. Build and deploy the app correctly
   Make sure you're running:

npm run build

And then deploying the build folder using a tool like gh-pages. If you haven’t already, install it:

npm install gh-pages --save-dev

Then, add these scripts to your package.json:

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

Finally, run:

npm run deploy

3. Check the browser console for errors
   Open the Developer Tools in your browser (usually F12 or Cmd + Opt + I on Mac) and check the Console tab for any JavaScript errors or failed network requests. This might give you clues if something is missing or misconfigured.
4. React Router issues on GitHub Pages
   If you're using React Router, GitHub Pages doesn’t support client-side routing by default. You may need to add a 404.html that redirects all requests to index.html, or configure your routes to be hash-based using BrowserRouter vs HashRouter.

If you can provide any specific error messages from the browser console or deployment logs, I’d be happy to take a closer look.

Hope this helps you meet your deadline. Let us know how it goes!

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬

[Snamude]

Above solutions didn't work. I found solution on my own.