Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Build a Simple Dynamic Site with Node.js HTTP Methods and Headers Perfection Suggestions

simhub
simhub
26,544 Points
Posted by simhub
simhub
26,544 Points

"Build a Simple Dynamic Site with Node.js " [Extra Credit] can not load .css file !!!

can not load .css file !!! on the browser i get this console error:

"Resource interpreted as Stylesheet but transferred with MIME type text/plain "

the browser loads the .css file with status 200 but set the type to "text/plain"

how can i change it to {'Content-Type': 'text/css'} without changing the type of the other files?

3 Answers

Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points
Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points

Its very hard to help without any line of code.

What you should do is

check for a get request with a url ending .css and then creating a response by sending the file if it exists or a 404 if it does not.

you could just serve a list of files or a folder

simhub
simhub
26,544 Points
simhub
simhub
26,544 Points

thanks! i thing i got this part of your answer: "check for a get request with a url ending .css" by trying this :

if (request.url.indexOf('.css') != -1) {
            response.setHeader("Content-Type", 'text/css');
}
else {
    response.writeHead(200, {'Content-Type': 'text/html'});
     ....
     ....
    response.end();
}

it works! the browser loads the .css file and recognise the right "Content-Type" but he can't read/parse the .css file :(

Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points
Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points

The problem @simhub is that your code is incomplete

I think that you are missing a piece of information. With HTTP 1.0 or 1.1 protocol each request will server one (1) and only file.

So one request (and one response) is for the css file and a DIFFERENT request is for the html/file

In conclusion, after you set the header with response.setHeader("Content-Type", "text/css") , you should follow it with response.write(filename) and then response.end (since you have answered to the request for the css file

the else statement responds to the request for the html file

You can also keep them in different functions , as andrew did per route, handling the css request simply as a different route

simhub
simhub
26,544 Points
simhub
simhub
26,544 Points

Thanks!!! i got it :) it works

Andrew Dibb
Andrew Dibb
7,722 Points
Andrew Dibb
Andrew Dibb
7,722 Points

Hey Guys,

I've been working on the same 'extra credit' trying to serve static css files. I found a bunch of solutions using express framework but I was sure you can do it with pure node.js. I've added this function to my router.js but it's not working. What am I missing?

function serveCSS (request, response) {
  //if url == "/.css" && GET
  if (request.url.indexOf('.css') != -1) {
            response.setHeader("Content-Type", 'text/css');
            response.write('styles.css');
            response.end();
  }
  else {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end();
  }
}

module.exports.serveCSS = serveCSS;
Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points
Kostas Oreopoulos
Kostas Oreopoulos
15,184 Points

You should just first read the file. Look at following links

http://www.davidgranado.com/2011/01/serve-a-static-html-file-with-nodejs/

(you can response.write inside the readfile callback)

and this link is a tad more general

http://thunemedia.no/2014/12/quickserver-super-simple-node-js-server-for-static-files/

Jeffrey Sullivan Jr
Jeffrey Sullivan Jr
5,456 Points

My server still crashes when attempting to serve static CSS file with:

events.js:141
      throw er; // Unhandled 'error' event
      ^
Error: write after end.

I have a standalone function to handle the css file, and it is called from app.js:

//Handle static files processing
function staticFiles(request, response) {
  if(request.url.indexOf('.css') != -1) {
    var cssFile = fs.readFileSync("./styles.css");
    response.writeHead(200,{'Content-Type': 'text/css'});
    response.write(cssFile);
    response.end();
    }
}

Not sure how to debug this one, I have already looked at the below examples with no luck. Any suggestions?

Thanks