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.
Hello there ā we have an experimental AI bot 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.
When deploying a React application with Needle Engine components to GitHub Pages, there are a few common issues that you need to check:
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/".
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.
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.
Build Process: Ensure youāve run npm run build or yarn build to create an optimized production build of your project before deploying.
404 Fallback: GitHub Pages requires a 404.html or a single-page app redirect setup to handle client-side routing.
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.
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.
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).
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.
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?
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)
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)
that might be able to help you with your question. Would you like to try this out?