Why isn't NodeJS loading CSS style sheets linked to html files?

Question

community. I am at a bit of a loss here. I am relatively new to NodeJS, and the runtime environment is acting in a way I didn\'t expect. It turns out this has been a problem for

Answer 1

Because your server-side code is written to handle all.http requests and deliver the same html content, regardless of the path.

try adding some if-else logic inside your handler, and deliver appropriate file based on the request path.

something like:

if(req.path === "" || req.path === "index.html")
     fs.read htnl file here
else if (req.path==="my.css")
     fs.read css file

learn to use browser dev tools (F12), which shows you exactly which requests the browser is making, what it sends, what it gets back - amongst many other things.

Answer 2

Your nodejs server is not programmed to send any style sheets when the browser requests them.

A nodejs server, like you've created, serves NO files by default. It only serves files that you program it to serve. So, your nodejs server is programmed to do one thing and one thing only and that's to deliver index.html no matter what URL is requested from it.

So, here's what happens:

1. User enters some URL for your site
2. Browser sends your server a request for that page
3. Your web server delivers index.html
4. Browser parses index.html and finds style sheet links
5. Browser sends your server a request for a style sheet link
6. Your server sends it index.html
7. Browser realizes "that's not a style sheet" and you get no styles

So, for your HTML server to work properly, you have to add code to look at the requested URL and, if it's a style sheet URL, it needs to send the proper file for that stylesheet, not just blindly send index.html no matter what was requested.

Nobody says you need to use the Express library for this, but this is what it does. It makes it very easy to configure what gets sent when different types of requests are made. And, for requests of static resources like CSS files, it can even just be configured to automatically send them direct from the file system.

If you don't want to use Express for this, you don't have to, but then you will have to write your own code to serve the right data when different URLs are requested.

If you want to write your own code for this, you will have to create some sort of if/else or switch statement or table lookup that looks at req.url and then send the appropriate content that matches the requested URL. Then, when the browser requests your style sheet, you can actually send it the appropriate style sheet, not index.html. The same would be true for Javascript files, images, page icon, ajax requests or any resource on your server that your page references.