Need help deploying Vite + Three.js + TypeScript project on GitHub Pages--- works on npm run dev, but not on GitHub Pages or npm run preview

[kuuudo]

Select Topic Area

Question

Body

Hey everyone,
I’m currently working on a project using Three.js, Vite, and TypeScript. I want to make it a published website, and I’m using GitHub Pages as the hosting platform. Everything works perfectly when I run npm run dev, but when I try to run npm run preview, or when I deploy it to GitHub Pages, it just shows a blank (white) canvas.
When I open the browser console (F12), I get a 404 error saying it can’t find my main.ts file.
Here’s what I’ve tried so far:
I added this line in my package.json: "homepage": "https://kuuudo.github.io/roberterrante/"
I also updated vite.config.js to include: base: '/roberterrante/',
But none of this seems to fix the issue.
I also have a mobile.ts file that should load instead of main.ts when a mobile device is detected, but I haven’t gotten that part to work in the deployed version either.
Also, just a heads up — this is my first website project, and I probably put too many unnecessary files in the src folder 😅. There are files like car.ts, box.ts, eve.ts, followCam.ts, game.ts, keyboard.ts, main.js, othermain.ts, and a few others I’m honestly too afraid to delete right now, in case they break something.
Any ideas what I might be missing? I'd really appreciate your help!

🔗 Live website:
👉 https://kuuudo.github.io/roberterrante/
💻 GitHub repository:
👉 https://github.com/kuuudo/roberterrante
Any ideas what I might be missing? I'd really appreciate your help!

[pedrovsfelix]

Hello! Congratulations on the project, the result is incredible!

Use the Vercel (https://vercel.com/) platform to host your Node project, point your Github repository to work as a page.

If you have any questions about how to do this, please let me know here.

At,
Pedro

(If I helped you, don't forget to mark my comment as resolved)

[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! 💬

[sameersharmadev]

This usually happens when vite is serving from root / in dev, but github pages serves from a subfolder like /roberterrante/. so on prod it tries to load /main.ts and fails (404)

Try this in vite.config.ts:

import { defineConfig } from 'vite'

export default defineConfig({
  base: '/roberterrante/',
})

• make sure it’s .ts, not .js if your project uses ts
• after changing it, run npm run build again
• and deploy the updated dist/

also quick test:
run npx serve dist locally
that gives you a better idea of what github pages will see

---

about mobile.ts, if you're switching files at runtime based on device, make sure that logic runs after DOM load. otherwise nothing gets mounted.

if you want, drop the repo again and I’ll check your build or config files. but this base path thing should fix the blank screen

hope that helps

[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! 💬