Why is css not being read on server.js?

Question

my Node.js server seems to work fine, but recently I have noticed that my CSS does not go through the server. On inspect element, on sources tab I can see that it is there, but its is not being read. I think that my server.js file needs some changes. If someone could let me know how to improve my code, that would be fantastic.

const http = require('http');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  fs.readFile(__dirname + req.url,function(error,data){
    if (error){
      res.writeHead(404,'File not found!');
    }else {
      res.write(data)
    }
    res.end()
  })
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

`res.setHeader('Content-Type', 'text/html');` This is the wrong content type for css files. — tkausl, Jan 22 '20 at 15:04
https://stackoverflow.com/questions/16333790/node-js-quick-file-server-static-files-over-http — Mickael B., Jan 22 '20 at 15:08
There is nothing in your code to suggest that you are employing CSS internally or externally. If there is to it then please display. — Michael Nelles, Jan 22 '20 at 15:22

score 0 · Accepted Answer · answered Jan 22 '20 at 15:18

That's going to think everything is html. If your server is going to simply accept file names for the url's then at least you have to read the extensions type and set the content type based on that:

fs.readFile(__dirname + req.url,function(error,data){

    if (error){
        res.writeHead(404,'File not found!');
        return;
    } 

    let cType = // probably convert this to switch logic
          res.url.endsWith('.css') ? 'text/css' 
        : res.url.endsWith('.html') ? 'text/html'
        : '';

    if (cType == '')
        res.writeHead(500, 'Extension not recognized');

    res.writeHead(200, {'Content-Type': cType});
    res.write(data);
    res.end();

});

But you'll probably want to take some of that logic outside of readFile as your server gets more complicated.

Why is css not being read on server.js?

1 Answers1