I tried to upload everything from my project into aws but that used up a lot of time and space so I’m assuming I don’t need everything from my project. What can I get rid of?
I would go the other way around:
upload nothing, except your main project file, then see what’s missing and upload only those files, until no more errors pop up.
It looks like you are using vite.
Normally you would build the production version
npm run build
and test it works
npm run preview
Visit http://localhost:4173/ in your browser
If it is all ok,
then you upload only the files in your ./dist/ folder.
If it is not ok, then you have fundamental problems that you first need to solve.
You can read more about deployment.
2 Likes
Oh cool thank you!
So I got a load of errors and I’m not 100% sure what to do about them, I ran ‘npm audit fix’ so I would assume that fixed some of them, even though no confirmation appeared to say so. Some of the things that are in the error list I haven’t even used, does this mean I don’t need to worry about them?
I also have a feeling this may be caused because I’m using an out of date version of Threejs (someone told me in a previous post I made), how would I update it? It’s not mentioned anywhere in the Threejs docs I don’t think.
Here are the errors I get:
Thank you!
> PS C:\Users\llama\source\Websites> npm audit
> # npm audit report
>
> js-yaml <=3.13.0
> Severity: critical
> Denial of Service in js-yaml - https://github.com/advisories/GHSA-2pr6-76vf-7546
> Deserialization Code Execution in js-yaml - https://github.com/advisories/GHSA-xxvw-45rp-3mj2
> Code Injection in js-yaml - https://github.com/advisories/GHSA-8j8c-7jfh-h6hx
> fix available via `npm audit fix`
> node_modules/js-yaml
> jxLoader *
> Depends on vulnerable versions of js-yaml
> node_modules/jxLoader
>
> timespan *
> Severity: high
> Regular Expression Denial of Service in timespan - https://github.com/advisories/GHSA-f523-2f5j-gfcg
> No fix available
> node_modules/timespan
> build *
> Depends on vulnerable versions of jxLoader
> Depends on vulnerable versions of timespan
> Depends on vulnerable versions of uglify-js
> node_modules/build
>
> uglify-js <=2.5.0
> Severity: critical
> Regular Expression Denial of Service in uglify-js - https://github.com/advisories/GHSA-c9f4-xj24-8jqx
> Incorrect Handling of Non-Boolean Comparisons During Minification in uglify-js - https://github.com/advisories/GHSA-34r7-q49f-h37c
> fix available via `npm audit fix`
> node_modules/uglify-js
>
> 5 vulnerabilities (1 high, 4 critical)
>
> To address issues that do not require attention, run:
> npm audit fix
>
> Some issues need review, and may require choosing
> a different dependency.
maybe you installed a bunch of things in your project that you didnt need to.
Vite is very well managed and all you need to do is run
npm create vite@latest
and follow the prompts.
Your folder structure also doesn’t look right, You dont have a ./public folder.
You would place your static assets in the ./public folder.
And then load your model as
new GLTFLoader().load('PortfolioDesk.glb', (gltf) => { ...//etc
Maybe you are using an old version of Vite?
To update threejs,
npm install three@latest
Why don’t you run the project locally, see what it needs?
I changed the file structure, does this look better?
I also updated everything however I still get 3 errors, 1 says there is no fix, and the other two say to run ‘npm audit fix’ which doesn’t do anything because the errors are still there.
These are the errors:
> js-yaml <=3.13.0
> Severity: critical
> Denial of Service in js-yaml - https://github.com/advisories/GHSA-2pr6-76vf-7546
> Deserialization Code Execution in js-yaml - https://github.com/advisories/GHSA-xxvw-45rp-3mj2
> Code Injection in js-yaml - https://github.com/advisories/GHSA-8j8c-7jfh-h6hx
> fix available via `npm audit fix`
> node_modules/js-yaml
> jxLoader *
> Depends on vulnerable versions of js-yaml
> node_modules/jxLoader
>
> timespan *
> Severity: high
> Regular Expression Denial of Service in timespan - https://github.com/advisories/GHSA-f523-2f5j-gfcg
> No fix available
> node_modules/timespan
> build *
> Depends on vulnerable versions of jxLoader
> Depends on vulnerable versions of timespan
> Depends on vulnerable versions of uglify-js
> node_modules/build
>
> uglify-js <=2.5.0
> Severity: critical
> Regular Expression Denial of Service in uglify-js - https://github.com/advisories/GHSA-c9f4-xj24-8jqx
> Incorrect Handling of Non-Boolean Comparisons During Minification in uglify-js - https://github.com/advisories/GHSA-34r7-q49f-h37c
> fix available via `npm audit fix`
> node_modules/uglify-js
>
> 5 vulnerabilities (1 high, 4 critical)
It works fine when I run ‘npx vite’ or open with live server, is that what you mean?
I guess. I’m pretty confused, what do node, npm and auditing packages have to do with three.js?
It’s about bundling and deployment of the complete three.js project. Most of the time projects use multiple packages which have to be combined into static files that are then put on the server.
Is your project a static website? Don’t upload node_modules.
Is your project running a persistent process via node? Also don’t upload node_modules, install packages via npm install on the server instead.
Whether you choose so or not, is up to you - but you are 101% allowed to ignore npm audit warnings. They aren’t errors, just warnings about packages you’re using.
Long story short - just npm i, npm build, ignore anything in the console, and put everything from build/ (or dist/, I don’t remember which is default 
) folder onto AWS. Done 
1 Like
Oh cool thank you so much, yes my website is just static, I thought I would need the threejs files which I thought were stored in node_modules but maybe I’m wrong.
Is this the build? It seems kinda small
There is also @esbuild, I couldn’t find a dist anywhere
Nope, don’t copy absolutely anything from node_modules - not a single file 
These are just your local modules used for development.
From an example project I found locally:
Copy only contents (not the directory itself, just the things inside it, index.html, assets etc.), of the generated dist/ directory. All necessary JS / styles / modules are included there after you run npm run build in vite.
Can you paste contents of your package.json?
I fixed it! When I looked for package.json there were two (one in vite-project folder one in websites folder) so I removed one and now I think it’s worked? Is the assets folder supposed to look like this or has something gone wrong… I’m going to try the other package.json just incase that one works better.
Here’s what was in the package.json:
> {
> "name": "vite-project",
> "private": true,
> "version": "0.0.0",
> "type": "module",
> "scripts": {
> "dev": "vite",
> "build": "vite build",
> "preview": "vite preview"
> },
> "devDependencies": {
> "vite": "^5.4.1"
> }
> }
Yup, that dist directory looks exactly like it’s supposed to if you put contents of dist on your server, you should see your website working properly
Great thank you so much you’ve honestly been so helpful for me with this project, it’s the first website I’ve ever made and it was quite ambitious but I’m glad I finished, wouldn’t of been possible without you! (There’s a chance I’ll still need your hope lol)
I think it supersedes threejs here since this can be applied to any JavaScript project with or without webGL? Wouldn’t it make more sense to compile a “hello world” example first and figure out how to display that on a page?
1 Like