CODEWITHSUNDEEP
javascriptnode.js
Robert Stefanic
Robert Stefanic

Reputation: 401

How do you serve CSS in a node.js application

I've been messing around with node.js and I can't seem to serve my CSS properly. Before, I had it embedded in my HTML in the header under a tag, but now I'm trying to learn how to serve it as a separate file.

So far, this is what I did. I tried to just write it in before adding loading the HTML under the server: 

//This is all my main module

var http = require('http');
var router = require('./router.js');

var server = http.createServer(function (request, response) {

response.writeHead(200,{"Content-type" : "text/css"});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: "utf8"}, function(err, data) {
 if (!err) {
   response.write(data);
} else {
  console.log(err);
}
});

  router.home(request, response);
  router.user(request, response);

});

server.listen(3000);

The home function that I called in the router module looks like this. It works perfectly fine too:

function home(request, response) {
  //if url == "/" && GET

if (request.url === "/"){
if(request.method.toLowerCase() === "get") {
  response.writeHead(200, commonHeaders);
  renderer.view("header", {}, response);
  renderer.view("search", {}, response);
  renderer.view("footer", {}, response);
  response.end();

} else {
    //if url == "/" && POST
//redirect to /:username

  request.on("data", function(postBody) {
    var query = querystring.parse(postBody.toString());
    response.writeHead(303, {"Location":"/" + query.username});
    response.end();
  });
  }
 }
}

All of my HTML loads perfectly fine. If I use my dev tools in chrome, it shows that I've created a separate folder with a styles.css file in it, but it's empty. How come it's creating my file, but my CSS isn't being written in there?

Am I doing this all wrong? I have a stylesheet linked in the header of my HTML as well. How do you serve CSS in a node.js application? I have no idea why this doesn't work.

Upvotes: 3

Views: 14932

Answers (1)

m-a-r-c-e-l-i-n-o
m-a-r-c-e-l-i-n-o

Reputation: 2672

All of my HTML loads perfectly fine. If I use my dev tools in chrome, it shows that I've created a separate folder with a styles.css file in it, but it's empty. How come it's creating my file, but my CSS isn't being written in there?

It's likely because fs.readFileSync is synchronous and yet a callback is being erroneously provided for it. Try this instead:

response.writeHead(200, {'Content-type' : 'text/css'});
var fileContents = fs.readFileSync('./views/styles.css', {encoding: 'utf8'});
response.write(fileContents);
response.end();

Am I doing this all wrong? I have a stylesheet linked in the header of my HTML as well. How do you serve CSS in a node.js application?

Wrong is a strong word, but yeah, it's not the best idea to manually serve static files this way, it likely will not scale. What you ought to do is configure your web server to serve all static files, and only deal with dynamic content in Node.js. I won't touch on specifics, but ask another question here on Stack Overflow specifying the server that you are running and how you could properly configure it with Node.js. Alternatively, you could look up some tutorials on how to run Node.js with the NGINX server — that should get you on a more sustainable path.

I hope that helps!

Upvotes: 7

Related Questions