Server can't find folder, only files

[neu5]

Okey, so first thing is that I would recommend you to spend some time learning the Web basics. So far in this thread I see that you don’t know what is what and what tool you should use.
Second thing is that you don’t need Webpack. Vite is enough what I did prove already. They are both bundlers.

• I want to create an app on a ec2 instance, so I need to write a server that serves the client with files. - I can’t help you with that, I don’t have experience with ec2
• A folder called node_modules contains the dependencies - to be more clear in the node_modules you have downloaded required libraries and then while importing eg. function from any library the bundler should add that function to YOUR bundled JS file which is later executed by the browser. In other words you shouldn’t import directly from the node_modules
• I’m required to call on imports using ./ .// so the server doesn’t search for them in my system, but rather in cd, which is public, thanks to - no, you don’t
• Now I’m supposed to install webpack to be able to import folders. - no, you don’t
• Why is the index.js file filled with non-server stuff? I thought babylon stuff should be in main.js. - there is no strict rule in the naming convention, you can have index.js in the client and in the server
• Why is the src folder not in the public folder, why doesn’t the client get a folder? Why should I make a src folder if I can just put files in the public folder or keep them at root? - in the src folder you should have source code (src is short for source), and from that src folder you should build whatever you need to the public/dist folder. So in the src/ folder you can have things that you don’t want to be reachable online - that’s why you don’t want to put everything in the public/ folder

@Shirhix

Yes, this did work. I don’t understand why though, if you can explain why this works, like what is changed internally?

First of all, in the public/ folder via build script you build things into the dist folder. So you want to serve public/dist via Express (node). That’s why I wrote you need to change it to
app.use(express.static("public/dist"));
Secondly, as I already wrote, you don’t want to import things from the node_modules. Please learn about ES modules and bundlers. You import from @babylonjs/core and bundler is looking for that in the node_modules and takes it and put it in your output file.

@Shirhix

Bit of a hassle to rebuild each time, I guess this is why I was instructed to install webpack.

No, webpack is not for that. Webpack is for the client part and for the dev part. Not for the server part.
For the refreshing the server on the change you can use nodemon or forever or some other watcher.

As for the learning part I suggest you to read this

How does babylonjs-loaders work when using "webpack" with typescript and babylon.js?

If I may - this is not a babylon issue. This is an issue with understanding how typescript is working and how import is working, and how es6 is working, and how npm is working. And how webpack is working. And how to combine them all. Notice that I asked - what is the error you get during the build process. What do you get when you are actually trying to compile the project. Here is my recommendation. You can take it or leave it. You are trying to jump head down into a very deep pool from the 10…

It has 3 years and isn’t exactly the same as yours example - but I think it’s very well written by Raanan and as he said - you can take it or leave it

To sum up, you don’t need to use webpack at all. Please learn about the tools and the environment step by step.
The flow is like eg.:

1. as for the development you have two consoles opened
   1a) in the first one you have client running on vite and rebuilding on the change
   1b) on the second one you have Node server running and serving whatever vite is building
2. for the production part you build your stuff via build script to the public/dist folder and you serve it from the Node server. The names of the folders are free to be changed. You can look at the BabylonJS template (where Webpack is used) or into my repo (where I use Parcel).

Good luck