This should be fairly straightforward but the style from my CSS file is not connecting to my .ejs file.
Once you start coding your own server, Express makes all decisions about how incoming URLs should be handled or “routed.” This includes the URL for the stylesheet. The
<link> tag is essentially doing a GET request at the “main.css” route. But you haven’t set up a router in Express to handle this.
If you put the files you want statically served (i.e. as soon as that route is hit, you want to simply give back a file; your server doesn’t need to take any other action) into your public folder, you can then set up all those routes at once with
app.use(express.static("public"));. See the docs here.
The CSS file is linked but I can’t seem to link 3 additional .js files that live in another directory.
Do I have to have a separate app.use call out to point to the directory that they live in? My gut says no since the initial app.use point to the topmost folder (but the .js files aren’t linking so…).
If I’m understanding the question correctly, I’d say you should make a js folder in your public folder, then put the client-side .js files in there. This is pretty typical from an organization standpoint.
Note that you won’t link to them from your html files with
/public/js/myFile.js but simply
/js/myFile.js. From the docs:
Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.
Another potential issue you may be having is if you link the file in your html without that
/ at the beginning, the URL will be relative to the page URL, rather than the root.