Cannot load the CSS with NodeJS

Question

I am beginner to NodeJS and facing problem in loading the CSS. Here is my code.

I am just creating a server running in 9090 port and loading the default HTML file.

var server = http.createServer(function(request, response) {
    var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
        response.writeHead(200,{"Content-Type": "text/html"});
        response.write(html);
        response.end();   
});
server.listen(9090);

On Loading http://localhost:9090/ i am able to see the index.html html page but not able to see the linked css feature.(If i just load my index.html in browser i am able to see css feature but not through the server)

This is my simple HTML.

<html>
<head>
<link type="text/css" rel="stylesheet" href="./css/styles.css">
</head>
<body>
<h2 class="heading"><em>Login Page</em></h2>
</body>
</html>

CSS file

.heading {
    text-align: center;
}

I can see below warning in browser console

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:9090/css/styles.css".

any help would be much appreciated

Path to the css file is proper i feel , because if i click on the path in VSCode , i am able to navigate to css file — Pradeep hebbar
– Pradeep hebbar, Commented Feb 24, 2018 at 7:20

Patrick Hund · Accepted Answer · 2018-02-24 08:26:37Z

The problem is that you have a created a web server that only serves a single file, the index.html. It does not read any CSS file from the local file system, and it does not serve any CSS files.

You could analyze the incoming request and see if the path of the request‘s URL points to the CSS file. If it does, read the CSS file instead of the HTML file and return it with the response.

Here's a working, modified version of your code (assuming that styles.css is located in a subdirectory of the dir where your index.html is located):

var server = http.createServer(function(request, response) {
    if (request.url.match(/^\/css\//)) {
        var css = fs.readFileSync('./FirstApp/HtmlPages' + request.url);
        response.writeHead(200,{"Content-Type": "text/css"});
        response.write(css);
        response.end();
        return;
    }
    var html = fs.readFileSync('./FirstApp/HtmlPages/index.html');
    response.writeHead(200,{"Content-Type": "text/html"});
    response.write(html);
    response.end();
});
server.listen(9090);

Please note: I would only do this for learning purposes, not for building an actual production web application. For that, I would use an existing HTTP server solution, for example Express.

michael-38 · Accepted Answer · 2018-02-24 07:26:55Z

0

I would suggest checking your file path is correct when linking to the css file. Try removing the . and have your path as /css/styles.css (but it comes down to ensuring that you have the correct path.

As a beginner, a common mistake might be that you forgot to save your css file after you made your edits.

Also, you should use the chrome developer tool (right click on page and inspect) to see if your css is already being applied to your html.

If you can show us the index.html code, that might help as well.

edited Feb 24, 2018 at 7:26

answered Feb 24, 2018 at 7:23

michael-38

437 bronze badges

6 Comments

Pradeep hebbar Over a year ago

Thanks for the help , but i have tried giving . also , but no luck

michael-38 Over a year ago

@Pradeephebbar try removing rel="stylesheet" from the link

Patrick Hund Over a year ago

I don’t think it’s a problem with the path to the CSS file. The problem is that you have a created a web server that only serves a single file, the index.html. It does not read any css file from the local file system, and it does not serve any css files.

Pradeep hebbar Over a year ago

@PatrickHund , So what modification do i need to do to include css also

Patrick Hund Over a year ago

Well, in your function, you could analyze the incoming request and see if the path of the request‘s URL points to the CSS file. If it does, read the CSS file instead of the HTML file and return it with the response. But I would do something like that only for learning purposes, not for building a real web application. For that, I would rather use an existing http sever solution, Express is most commonly used.

|

Collectives™ on Stack Overflow

Cannot load the CSS with NodeJS

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related