How to send a html file with css as a response to a connecting client using express

Question

So I've been trying to figure this out for a while now and the answers that I have found are just confusing, vague without explanation and or, do not work - (At least for me).

First here is my project structure.

.. denotes a folder
- denotes a file
while four | denote a sub directory or file in parent folder

..public
|||| ..html&css
|||| |||| ..main
|||| |||| |||| - main.html
|||| |||| |||| - main.css
|||| ..javascript
|||| |||| -server.js

Hopefully the above project structure is understandable, Stack Overflows formatting is tough to work with.

Here is my code - server.js

let express = require('express');
let app = express();

app.use(express.static('../html&css'));

let server = app.listen(8080, function () {
    app.get(function (req, res) {
        res.sendFile();
    });
});

let port = server.address().port;
console.log(`Express app listening at ${port}`);

I have seen a few ways to send the files when someone connects to the server, and have managed to get html to send but never both html and css. From researching I've seen a few ways to do this but the way in which they are explained is confusing and no answers I found explain in detail how to accomplish my question along with what and why your doing the things they are saying to accomplish it.

I have just been getting a lot about routes, static, app.get this and app.get that, res.sendFile and some other mumbojumbo but not any of it is really making sense. It also doesn't help that most of the answers don't have the persons complete project structure. If they did understanding which routes were doing what would be much easier.

This link seemed to be the best answer I came across but because of lack of project structure I cannot implement it into my own project and thus understand how it works.

If someone could even just explain how that works with a project structure implemented in their answer I would be grateful, otherwise if they have another way of doing it through the use of the fs module and express or something else.

I hope my question is understandable clear. Thank you for your time.

Answer 1

I am going to explain how it works. But the code you have written is correct. Even I ran the code.

let express = require('express');
let app = express();

app.use(express.static('../html&css'));

let server = app.listen(8080, function () {
    app.get(function (req, res) {
        res.sendFile();
    });
});

let port = server.address().port;
console.log(`Express app listening at ${port}`);

Now, what express.static do? it exposes the particular folder and makes auto routes.
If you want to access main.css it will be hosted on localhost:8080/main/main.css In the main.html to use that CSS you just add a link.

<link rel="stylesheet" href="main.css"> or <link rel="stylesheet" href="/main/main.css">

But, you cannot HTTP GET let's say localhost:8080/main that will not work.

So, you need to run the server by typing node javascript/server.js and it will run just fine. But as the server.js is a backend code do not put it in the public folder. Maybe make a folder called src and put it there.

Answer 2

Let's look a a few things.

First, folder structure:

According to your setup, you have your server.js file embedded within the public folder, albeit one level down.

If you think of an MVC framework, see this sample tutorial, you want to put your server at the root of your application (not inside of the JavaScript folder inside public where you would serve any client-side javascript.

Second, regarding middleware:

When you call the express.static middleware, you will want to use the path module to create an absolute rather than relative path to the public folder, which is especially important for deployment.

app.use(express.static(path.join(__dirname, 'public')));

Now, you will be able to access all the files in your public folder like so:

http://localhost:8080/main/*
http://localhost:8080/javascript/*

Of course * refers to whatever files are there.

Third, regarding app.listen:

The callback to app.listen is expecting to be returned a server object. See the documentation. Rather than setting up a listener on a route here, you should establish that outside of the app.listen call.

For instance, you may want to set up a basic get route to serve your main.html page on /. That's up to you. The express.static middleware is already serving this page as /main/main.html.

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'public', 'main.html'));
});

let server = app.listen(8080);