How can you import CSS into a node.js server?

Question

Say you have a CSS file with the code:

body{
    margin:0px;
}

And the HTML file index.html. How could you create a server that takes index.html and adds the CSS? Edit:

var http = require('http');
var fs = require('fs');

function sendFile(res, filename, type) {
    fs.readFile(filename, function(err, data) {
        if (err) {
            console.log(err);
            res.statusCode = 404;
            res.end();
            return
                ;
        }
        res.writeHead(200, { 'Content-Type': type });
        res.write(data);
        res.end();
    });
}

http.createServer(function(req, res) {
    if (req.url == "/") {
        sendFile(res, "index.html", "text/html");
    } 
    else if (req.url == "/styles.css") {
        sendFile(res, "styles.css", "text/css");
    } 
    else {
        res.statusCode = 404;
        res.end();
    }
}).listen(8080);

You can either insert the CSS directly into index.html yourself. Or, if you want to put the CSS in a separate file such as styles.css, then you need to code your http server so that it servers both index.html and styles.css. Since you don't show any of your web server code, we can't really help more specifically than that. Please show your existing http server code that serves index.html. — jfriend00
– jfriend00, Commented Jun 10, 2022 at 21:43
Thank you for helping, I have: javascript var http = require('http'); var fs = require('fs'); http.createServer(function (req, res) { fs.readFile('index.html', function(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); return res.end(); }); }).listen(8080); — two
– two, Commented Jun 11, 2022 at 0:21
Please use the "edit" link to put your code into your question so your question properly shows what your code is. Multi-line code in comments is completely unreadable. — jfriend00
– jfriend00, Commented Jun 11, 2022 at 0:21

jfriend00 · Accepted Answer · 2022-06-11 22:08:58Z

2

This stuff is a lot simpler with a simple framework like Express where you can configure it to automatically serve a directory of static files.

But, if you want to do it yourself using only the built-in http object, you can do something like this:

const http = require('http');
const fs = require('fs');

function sendFile(res, filename, type) {
    fs.readFile(filename, function(err, data) {
        if (err) {
            console.log(err);
            res.statusCode = 404;
            res.end();
            return;
        }
        res.writeHead(200, { 'Content-Type': type });
        res.write(data);
        res.end();
    });
}

http.createServer(function(req, res) {
    if (req.url === "/") {
        sendFile(res, "index.html", "text/html");
    } else if (req.url === "/styles.css") {
        sendFile(res, "styles.css", "text/css");
    } else {
        res.statusCode = 404;
        res.end();
    }
}).listen(8080);

Then, inside of index.html, you can have:

<html>
<head>
<link href="/styles.css"  rel="stylesheet">
</head>
<body>
    <div class="red">This is some text that is supposed to be red</div>
</body>
</html>

In styles.css, you can have:

.red {
    color: red;
}

That will cause the browser to request /styles.css and your web server will be configured to serve that file for that request.

edited Jun 11, 2022 at 22:08

answered Jun 11, 2022 at 0:29

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

two Over a year ago

jfriend00 so now i have the edited code but it still doesn't work

jfriend00 Over a year ago

@two - "Still does not work" does not give us anything to go on. What troubleshooting did you do? What did you learn? What errors did you see? What HTML are you using? Since you've shown none of that, there's nothing else we can provide except to say that the code I show in my answer works just fine for me. Perhaps you can use that as a starting point.

two Over a year ago

Sorry, but now I have got it working, I just had to rename "styles" to "style". Thanks for the help.

jfriend00 Over a year ago

@two - Glad you got it figured out. Since it looks like you may be a bit new here, if this answered your question, then you can indicate that to the community here by l clicking the checkmark to the left of the answer. That will also earn you some reputation points.

Collectives™ on Stack Overflow

How can you import CSS into a node.js server?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related