How do I send multiple files with expressjs?

Question

I want to be able to send many files, and if possible the a whole directory so that I can access it in my other js file that is getting called from an html file.

const app = require("express")();
const http = require("http").Server(app);
const io = require("socket.io")(http);
const port = process.env.PORT || 3000;

app.use("/styles", express.static(__dirname));

app.get("/", function (req, res) {
  //res.sendFile("C:/Users/Kevin_Who/Desktop/Online Chat Game/index.html");
  //res.sendFile("C:/Users/Kevin_Who/Desktop/Online Chat Game/mainScript.js");
  res.sendFile("C:/Users/Kevin_Who/Desktop/Online Game Files/");
  //app.use(express.static("Online Game Files"));
});

I tried sending many files with res.sendFile, but it only sends the first one. In the html file it references mainScript.js inside a script tag ( <script src="mainScript.js" type="module"></script> ). Inside the mainScript.js it also references image files, and I need help finding how to send and access these files( tiles[2].src = "./Assets/Blocks/StoneBrickWall.png"; ).

Answer 1

When the browser gets to this in your html file:

<script src="mainScript.js" type="module"></script>

It will create a NEW http request to your server. That http request will be to <somePath>/mainScript.js where <somePath> is the path of the current page URL. If that URL is a top level URL, then the request will go to /mainScript.js . Your server needs to handler that specific request for /mainScript.js and send the appropriate script file.

This is how web pages work. The browser makes a separate http request for each resource in the file (scripts, images, CSS files, etc...) and your server needs to separately respond to each of those http requests and send the appropriate resource.

In Express, these requests for static resources are typically handled with express.static() where one line of middleware can handle the serving of many files within a directory hierarchy.

Note: It is generally advisable not to use path relative URLs for your static resources because the browser will combine those path relative URLs with the path of the current web page and this will make it hard to use the same static resources in different web pages on your site. Instead, start your static URLs with a leading / so they generate a constant URL request to your server no matter which page they are used in.

I tried sending many files with res.sendFile

You can only send one file with res.sendFile() . It sends that one file as the http response and you can only send one http response per request.

Inside the mainScript.js it also references image files, and I need help finding how to send and access these files tiles[2].src = "./Assets/Blocks/StoneBrickWall.png";

This will also cause the browser to make a new request to your server that you will also need to have your server respond to. Again, you probably don't want it to start with ./ , but rather just / .