Problem with deploying to GitHub Pages / react router configuration

I’ve finished my react portfolio site featuring a Needle Tools component and am trying to deploy it on GitHub pages. Following this guide https://www.youtube.com/watch?v=Vyk3cWB6u-c I’ve gotten the site deployed, however all the content is missing. I can tell it’s partially working because it has the name of the export scene on the browser tab and in the inspector I can see its correctly using “chakra-ui-dark”, but that’s all, just a blank dark page. Where did I go wrong?
Here is the repo: GitHub - TS-Programming/my-portfolio.github.io
and the GitHub Pages URL: https://ts-programming.github.io/needle-portfolio-react/
Also included is an image of it running locally and an image of the deployed site.
Please let me know if I can provide anymore information.


Original Post on Discord

by user 216692838757433347

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Here is what I found for you :brain: Discord

When deploying a React application with Needle Engine components to GitHub Pages, there are a few common issues that you need to check:

  1. Correct Base URL: Ensure that the homepage field in your package.json is set to the correct URL for your GitHub Pages site. It should be "homepage": "https://ts-programming.github.io/needle-portfolio-react/".

  2. Router Settings: If you are using React Router, you might need to use a HashRouter instead of BrowserRouter because GitHub Pages does not support pushState.

  3. Paths for Assets: Confirm that all your asset paths are relative and correctly pointing to the locations where your assets are deployed. This includes checking the paths for the Needle Engine component.

  4. Build Process: Ensure you’ve run npm run build or yarn build to create an optimized production build of your project before deploying.

  5. 404 Fallback: GitHub Pages requires a 404.html or a single-page app redirect setup to handle client-side routing.

  6. Check Console Errors: Open the Developer Tools in your browser and check the Console for any errors that could indicate missing files or errors in your application logic.

  7. Deployment Configuration: Check your deployment configuration, this includes inspecting the gh-pages branch for the correct files and ensuring that the .nojekyll file is present to prevent GitHub Pages from ignoring files that start with an underscore.

  8. Needle Engine Specific: Ensure that the Needle Engine runtime and other related assets are correctly linked in your project and aren’t being blocked by GitHub Pages’ CSP (Content Security Policy).

thread_2ffNionBpUCVGxe8INOcdO56

If everything seems correct and you are still facing issues, I would suggest looking at the Deployment & Compression section in the Needle Engine documentation for any Needle Engine-specific deployment steps you might have missed: Needle Engine Deployment Documentation.

As you’ve provided the repo URL and mentioned you have images of the local vs deployed site, make sure the paths to the images and any other external assets are correctly configured for GitHub Pages, as these might need to be referenced differently once deployed.

Finally, please verify that the local version and the deployed version are using the same codebase and that any environment variables or build steps are properly applied in the GitHub Actions if you are using them for deployment.

1 messages left GPT 4
thread_2ffNionBpUCVGxe8INOcdO56

Hi, the page you linked above doesnt contain any needle engine component. The local build and preview builds work as expected. Could it be related to the router showing a wrong page?

My guess would be that the github path (“GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.”) is the reason and the router doesnt handle this correctly showing a blank page

Sorry, can I ask where your seeing that incorrect path? I remember writing that, but I thought I took it out and I can’t find it in my project

by user 216692838757433347

https://ts-programming.github.io/needle-portfolio-react/ < needle-portfolio-react ?

sorry react-test was my test url where i tried to deploy your project

when looking at your HTML there’s no needle-engine web component on the page and I dont see any logs so I suspect it’s the router’s fault for not handling the URL correctly (none of your other html elements are there as well)

Your saying I need to take out the last ‘/’?

by user 216692838757433347

here? my-portfolio.github.io/package.json at main · TS-Programming/my-portfolio.github.io · GitHub

by user 216692838757433347

I’m saying the routing in my-portfolio.github.io/src/App.tsx at 6241f55aab421c9735f7496f45e2cd5e372ab3b6 · TS-Programming/my-portfolio.github.io · GitHub doesnt respect the github pages base url. E.g. https://ts-programming.github.io/needle-portfolio-react/pentago doesnt work?

Since none of the content in home doesnt appear either my-portfolio.github.io/src/Home/home.tsx at main · TS-Programming/my-portfolio.github.io · GitHub

ah so, these paths: <Route path=“/” element={} /> need to be the actual url

by user 216692838757433347

They need to take the github pages base url into account

I’m not very familiar with the router in particular there but that’s what I think isnt setup correctly

You have the same thing when using sveltekit where a base url needs to be configured. Sveltekit tho does also have the base url in localhost environments as well. Not sure how this is done “correctly” in react here (you just want to prefix the base url when you have deployed on github pages I guess)

path="/needle-portfolio-react/" or so where the github repo name is only prefixed for the final build?