The latest articles on DEV Community by kuuudo (@kuuudo). https://dev.to/kuuudo https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3048720%2F0a0b60fd-bb3d-4c04-8594-fac190cbeb3c.png https://dev.to/kuuudo en kuuudo Mon, 14 Apr 2025 03:17:49 +0000 https://dev.to/kuuudo/vite-threejs-typescript-project-works-with-npm-run-dev-but-breaks-on-github-pages-need-help-2pg4 https://dev.to/kuuudo/vite-threejs-typescript-project-works-with-npm-run-dev-but-breaks-on-github-pages-need-help-2pg4 <p>Hey everyone,<br> 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.<br> When I open the browser console (F12), I get a 404 error saying it can’t find my main.ts file.<br> Here’s what I’ve tried so far:<br> I added this line in my package.json: "homepage": "<a href="https://kuuudo.github.io/roberterrante/" rel="noopener noreferrer">https://kuuudo.github.io/roberterrante/</a>"<br> I also updated vite.config.js to include: base: '/roberterrante/',<br> But none of this seems to fix the issue.<br> 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.<br> 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.<br> Any ideas what I might be missing? I'd really appreciate your help!</p> <p>🔗 Live website:<br> 👉 <a href="https://kuuudo.github.io/roberterrante/" rel="noopener noreferrer">https://kuuudo.github.io/roberterrante/</a><br> 💻 GitHub repository:<br> 👉 <a href="https://github.com/kuuudo/roberterrante" rel="noopener noreferrer">https://github.com/kuuudo/roberterrante</a><br> Any ideas what I might be missing? I'd really appreciate your help!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fratfww942fm1yz8vooq0.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fratfww942fm1yz8vooq0.jpg" alt="Image description" width="554" height="287"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjaa81odlxj8xsmis41n5.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjaa81odlxj8xsmis41n5.jpg" alt="Image description" width="554" height="203"></a></p> githubpages kuuudo Mon, 14 Apr 2025 03:15:08 +0000 https://dev.to/kuuudo/vite-threejs-site-works-in-dev-but-404s-on-github-pages-cant-find-maints-tried-setting-base-2dm7 https://dev.to/kuuudo/vite-threejs-site-works-in-dev-but-404s-on-github-pages-cant-find-maints-tried-setting-base-2dm7 <p>Hey everyone,<br> 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.<br> When I open the browser console (F12), I get a 404 error saying it can’t find my main.ts file.<br> Here’s what I’ve tried so far:<br> I added this line in my package.json: "homepage": "<a href="https://kuuudo.github.io/roberterrante/" rel="noopener noreferrer">https://kuuudo.github.io/roberterrante/</a>"<br> I also updated vite.config.js to include: base: '/roberterrante/',<br> But none of this seems to fix the issue.<br> 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.<br> 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.<br> Any ideas what I might be missing? I'd really appreciate your help!</p> <p>🔗 Live website:<br> 👉 <a href="https://kuuudo.github.io/roberterrante/" rel="noopener noreferrer">https://kuuudo.github.io/roberterrante/</a><br> 💻 GitHub repository:<br> 👉 <a href="https://github.com/kuuudo/roberterrante" rel="noopener noreferrer">https://github.com/kuuudo/roberterrante</a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8zdxczyf2w5gb7mq8ry2.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8zdxczyf2w5gb7mq8ry2.jpg" alt="Image description" width="554" height="287"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkm5cto7q7fc8wfc59bje.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkm5cto7q7fc8wfc59bje.jpg" alt="Image description" width="554" height="203"></a></p> threejs