Search code examples
javascriptthree.jsgithub-pagesreact-three-fiber

Github pages responds with 404 error for three.js canvas and imports


When trying to host my webpage with a three.js background, everything loads properly when hosted locally but as soon as I push it up to github pages nothing loads - just html.

I am using vite to package my code, and gh-pages to deploy the 'dist' folder to the hosted branch. I have tried changing the urls of all images and assets to '/image' and storing the images in a public folder inside the root folder, as vite recommends. I run $ npm run build, and $ npm run preview and everything looks good. I run npm run deploy (I added a deploy script in package.json, deploy: 'gh-pages -d dist'), and then host the gh-pages branch on github pages and only the html shows up, and the console shows multiple 404: file not found errors.

Repo

The hosted code is on the gh-pages branch, if that hasn't been clear already.


Solution

  • The url to your JS and CSS files is wrong.
    Your github page is trying to load the the JS from https://talmage89.github.io/assets/index.2e5bc2a5.js...
    But it should be:
    https://talmage89.github.io/ThreeJSDemo2/assets/index.2e5bc2a5.js.

    The Vite documentation hss specific instructions for setting the base when hosting on Github Pages