Troubleshooting Three.js, Vite, and TypeScript project deployment on GitHub Pages: works locally but fails online

Other Questions NPM
1

Hey folks,

I’m stuck with my first website project. I’m using Three.js, Vite, and TypeScript. It runs fine locally with npm run dev, but when I try to deploy it on GitHub Pages or use npm run preview, I just get a blank white screen.

The console shows a 404 error for my main.ts file. I’ve tried adding “homepage”: “https://myusername.github.io/myrepo/” to package.json and base: ‘/myrepo/’ to vite.config.js, but no luck.

I’ve got a bunch of files in my src folder (like scene.ts, renderer.ts, camera.ts, etc.) that I’m scared to touch. There’s also a mobile.ts file for mobile devices, but that’s not working either.

Any ideas what I’m doing wrong? Really need some help here!

2

yo, had similar probs. make sure ur vite.config.js is set right for github pages. try this:

export default defineConfig({
base: ‘/myrepo/’,
build: {
outDir: ‘docs’
}
})

then set github pages to use the docs folder. also, double check all ur file paths are relative, not absolute. good luck!

3

I’ve encountered similar issues when deploying Three.js projects. One crucial step often overlooked is ensuring your build process is correctly configured for production. In your vite.config.js, try adding a build configuration:

export default defineConfig({
base: ‘/myrepo/’,
build: {
assetsDir: ‘assets’,
rollupOptions: {
output: {
manualChunks: undefined
}
}
}
})

This setup can help with asset management and chunking issues. Also, double-check that your GitHub Pages settings are pointing to the correct branch and folder where your built files are located. Sometimes, the problem lies in how GitHub Pages is configured to serve your content.

Lastly, verify that all your imports in main.ts are using the correct paths. Relative paths can sometimes cause issues in production builds. Consider using aliases in your vite.config.js to ensure consistent pathing across your project.

4

I’ve been down this road before with Three.js and GitHub Pages. It’s a tricky beast! Have you double-checked your build output? Sometimes the issue is that the compiled files aren’t ending up where you expect.

One thing that helped me was running ‘npm run build’ locally and then checking the ‘dist’ folder (or wherever your output is set to go). Make sure all your assets, including main.js (compiled from main.ts), are there and the paths look correct.

Also, in your vite.config.js, try setting the build output directory explicitly:

export default defineConfig({
  base: '/myrepo/',
  build: {
    outDir: 'docs'
  }
})

Then in GitHub Pages settings, set it to deploy from the ‘docs’ folder on your main branch. This approach solved it for me when I was banging my head against the wall with a similar setup.

Let me know if this helps or if you need more troubleshooting ideas!