When the site loads, only the html and css are loaded in, but the javascript is not. I inspected elements and checked the console, and it says it’s failing to load resources and exiting with code 404. I import three, I think I have the right file path, but for example, textGeometry is failing to load.
Since my index.html file is not in the root directory, I added a netlify.toml file to tell netlify where index.html is, but I’m not sure if that is messing this up.
Here is my code:
The site works fine locally, but not here or on GitHub pages. I’m also not sure if this uses Vite, as I cannot find a vite.config file.
@CalixH The structure of the repo seems a little unnecessary, since you’ve got three.js in a package.json at the root of the repo, and then all the other build dependencies in a package.json inside the CalixHuangSite folder.
As your build is being performed with vite and you have no other config, the default folder for the output of npm run build is CalixHuangSite/dist/, and that is all that you would need to have deployed by Netlify.
So to simplify things (and get it working), I would just…
Add the three.js dependency to the package.json in CalixHuangSite/
Remove the package.json and package-lock.json from the root
Copy all the files & folders from CalixHuangSite/ to the root
Delete the CalixHuangSite/ folder
Run npm install in the root to ensure everything is in place
Adjust the netlify.toml to…
[build]
publish = "dist/"
command = "npm run build"
Change the imports in your main.js file so they no longer reference ../node_modules/
I may have missed some steps, but the basic idea is to get your site running in the root, with all your dependencies in the same spot, and keep it simple.
Thanks for your reply, the website is working now!
Another issue arose, but I don’t know if it’s netlify related. Because this is built with vite, it seems that it is currently unable to load images and fonts used only by the javascript file and not the html file. The javascript code is running, but inspecting the console again I see that resources are failing to load with the error code 404, and it is exactly the 2 images and font used only by the javascript.
The node_modules folder will be created when Netlify automatically runs npm install for your build.
The dist folder will be created when your Vite build occurs.
When I perform an npm run build locally, and then do an npx serve inside the dist/ folder that it creates, I can see that the resulting build does contain your images and they load.
When performing an npm run dev the images do not load for me.
It may have something to do with the image paths you’re using, I note that the images are in the root of the repository, but that in the html they’re referred to just with their name:
<img src="CalixHuang.JPG" style="display:none">
But in the main.js file they’re referred to with the location you expect them to be post-build, which is within an assets/ folder.
const caxTexture = new THREE.TextureLoader().load('/assets/CalixHuang-eb3701c6.JPG');
I’d probably just read the asset handling documentation for Vite and ensure everything is correct:
Yep, it’s working great now! Turns out the issue was that for some reason vite didn’t recognize the files my javascript wanted, but as soon as the html or css required them, they were properly built into the asset folder.
Thank you so much! The last issue I have to figure out now is why the video won’t play…
thanks for providing 