Can't get the CSS to load in the node.js server

Question

So I've been trying to serve css in my dynamic website using node.js, but when my server serves css, it just serves it as plain/text and not CSS. I can't tell what I'm doing wrong. We didn't go over anything like this in the video, and I've been watching them over and over, but it seems like this challenge was out of left field with no help at all.

Here's what I have. In my router module, I included this in my home function:

//I defined two headers, one for text/html, and the other for text/css
var commonHeaders = {'Content-Type': 'text/html'};
var cssHeaders = {'Content-Type': 'text/css'};

//main function that's used to create the page

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

  if (request.url === "/"){
    if(request.method.toLowerCase() === "get") {
      response.writeHead(200, cssHeaders);
      renderer.css(response);
      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();
      });
    }
  }
}

My thought process here was that I could just change the Content-Type to text/css, and then everything could load perfectly fine. The video made it seem like that's all that needed to be done in order to load css properly.

Then in my renderer module, I added a function to add css, which looks similar to my view function that was called in the home function above. The view one works fine, but the css doesn't:

function css(response) {
  var cssFile = fs.readFileSync("./views/styles.css", {encoding: "utf8"});
  response.write(cssFile);
}
function view(templateName, values, response) {
  //READ from the Template files
  var fileContents = fs.readFileSync('./views/' + templateName + '.html', {encoding: "utf8"});

  //Insert values into content
  response.writeHead(200, {'Content-Type': 'text/html'});
  fileContents = mergeValues(values, fileContents);

  //write out contents to the response
  response.write(fileContents);
}

I added the view function here that's called in my router module because that one works, and looks similar to my css function; yet my css function doesn't work. Why is this? And on top of why this doesn't work, how can I get it to work? In my head, this all makes sense, but node.js doesn't think so hah.

Thanks for the help!

Rob

Answer 1 · 2016-07-12T12:47:54Z

July 12, 2016 12:47pm

Okay, after nearly 3 days of struggle, I figured it out! I hope this can help others and save them from the headaches as well.

So CSS doesn't get sent along with the pages in a dynamic site like this. The HTML gets sent to the client, and then the client requests the files from the server. So what I did was I added a router to the CSS in my app.js:

var server = http.createServer(function (request, response) {
  router.css(request, response);
  router.home(request, response);
  router.user(request, response);
});
server.listen(3000);

It's important to keep the request for the CSS file at the top, so that when the HTML gets sent and the DOM loads it, it can reference the CSS stylesheet that's linked in the header of the HTML. So now we have to make sure that the CSS file is properly linked in the HTML file.

    <link rel="stylesheet" href="styles.css"/>

I put this, where it belonged, in my header.html. The following was the first major thing that I learned doing this. In the normal static sites that'd I'd create, I'd have to reference the subfolder that it was in (so in my case for example, I have the CSS stylesheet in my views folder, and I'd normally reference it like so: href='./views/styles.css'). But on a dynamic site, when a request is made, and a response is sent, the response is sent to the '/', and NOT to the subfolder that's on the server side (at least by default). There is no subfolder on the client's side. Responses are simply just sent to the '/' by default. So make sure that the HTML is referencing the client side's files, and not the server side's files!

Now that the stylesheet is being properly referenced in the HTML, and the HTML can be styled, we can write the CSS request.

I just created a CSS function in the router module. I basically set it up so that if the request.url is '/styles.css', then make the content-type text/css, load the file (from the server side), and write it (in the response to the client).

My new function looks like this:

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

This made it so that, there's is a copy of styles.css on the client's side, and then when the HTML loads, it can properly reference the stylesheet that's in the HTML CSS tag. I hope this has helped others! Best of luck!

Answer 2 · 2017-03-23T19:22:15Z

March 23, 2017 7:22pm

Here's a non-blocking way to serve CSS. I feel the page loads a little faster

//css router
const serveCSS = function (req, res) {
    if (req.url.indexOf('css') !== -1) {
        const css = fs.createReadStream(__dirname + req.url, 'utf8');
        css.pipe(res);
    }
};


//user router
const userRoute = function (req, res) {
        let username = req.url.replace('/', '');
        const miscUrls = req.url.indexOf('css') !== -1;
        if (username.length > 0 && !(miscUrls)) {
             // do stuff
        }
};

//app.js
http.createServer((req, res) => {
        router.serveCSS(req, res);
        router.home(req, res);
        router.user(req, res); 
});

Answer 3 · 2017-12-30T23:39:04Z

December 30, 2017 11:39pm

There may be a simpler solution using some other modules. I had a similar issue where my javascript files wasnt coming in. So i added the modules "path" and "body-parser"

  const path = require('path');
  const bodyParser = require('body-parser');

  //body parser middleware
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended: false}));
  app.use(express.static(path.join(__dirname, 'public')));

This allowed my html file to access the css and the javascript files in the public folder.

Hope this helps.

Welcome to the Treehouse Community

Looking to learn something new?

Robert Stefanic

Robert Stefanic

Can't get the CSS to load in the node.js server

Robert Stefanic

Robert Stefanic

3 Answers

Robert Stefanic

Robert Stefanic

Brendan Moran

Brendan Moran

Brendan Moran

Brendan Moran

Brendan Moran

Brendan Moran

Przemyslaw Mazur

Przemyslaw Mazur

pooya tolideh

pooya tolideh

Brandon Benefield

Brandon Benefield

Nick Bordeau

Nick Bordeau

JASON LEE

JASON LEE

Robert McNeil

Robert McNeil

lauralouise

lauralouise