I’m stuck with a tricky problem. I’ve built a website using Three.js, Vite, and TypeScript. It runs smoothly when I use npm run dev on my computer. But when I try to put it on GitHub Pages or use npm run preview, all I get is a blank white screen.
When I check the console, it says it can’t find my main.ts file (404 error). I’ve tried adding a homepage line in package.json and updating vite.config.js with a base path, but no luck so far.
There’s also a mobile.ts file that should load for mobile devices, but that’s not working on the live site either.
I’m pretty new to web development, so I’ve got a bunch of files in my src folder (like car.ts, box.ts, eve.ts, etc.) that I’m scared to delete in case something breaks.
Any ideas on what I’m doing wrong? I’d really appreciate some guidance!
I encountered a similar issue when deploying my Three.js project to GitHub Pages. One often overlooked solution is to ensure your asset paths are correct in the production build. Try updating your vite.config.js to include ‘assetsInclude’ for your 3D models and textures.
Another potential fix is to adjust your build output directory. In vite.config.js, set ‘outDir’ to ‘docs’ instead of ‘dist’. Then, in your GitHub repository settings, change the GitHub Pages source to the /docs folder.
Regarding your mobile.ts file, verify that your device detection logic is sound. Consider using a library like ‘mobile-detect’ for more reliable results across different devices and browsers.
Lastly, don’t be afraid to clean up unused files. Start by commenting out imports you suspect are unnecessary, then gradually remove them if no issues arise.
hey there! sounds frustrating. have u double-checked ur file paths? sometimes gh pages can be picky about case-sensitivity. also, make sure ur vite.config.js has the right base path set (like ‘/your-repo-name/’). for the mobile.ts issue, check if the conditonal logic for loading it is working correctly. good luck!
I’ve been through a similar struggle with deploying Vite projects to GitHub Pages. One thing that helped me was updating the build script in package.json. Try changing it to ‘vite build && cp dist/index.html dist/404.html’. This creates a 404 page that redirects to your main page, which can solve routing issues.
Also, check your index.html file. Make sure all your script and asset references use relative paths instead of absolute ones. For example, change ‘/src/main.ts’ to ‘./src/main.ts’.
Regarding your concern about deleting files, consider using Git for version control if you’re not already. It allows you to safely experiment with removing unused files without fear of permanent loss.
Lastly, for mobile detection, ensure you’re using a reliable method like window.matchMedia(‘(max-width: 768px)’) instead of just checking screen width. This approach tends to be more robust across different devices.