Link CSS to HTML for nodejs server [duplicate]

Question

I am trying to link styles.css file to hello.html page to show up in the localhost using nodejs. But the output is only formatted in html and css styling isn't displayed.

Here is my code!

project.js

var http = require('http');
var fs = require('fs');

http.createServer(function (req,res){
    fs.readFile('hello.html',function(err,data){
    res.writeHead(200,{'Content-Type': 'text/html'});
    res.write(data);
    res.end();
  });

}).listen(8080);

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="heading">
    <h1>FILE UPLOADING!</h1>
</div>

<form method= "POST" enctype="multipart/form-data" action="fileupload">
<input type="file" name="filetoupload">
<input type="submit" id='bt' value="Submit">
</form>


</body>
</html>

style.css

#heading{
    color:green;
    font-family: sans-serif,serif;
}

#bt{
 background-color: #4CAF50;
color: #ffffff;
border-color: #4CAF50;
}

Are you requiring a CSS file in your HTML code? If that's the case, the browser will ask it to Node, and Node has to serve it and send it to the browser. — Jeremy Thille
– Jeremy Thille, Commented Jul 6, 2017 at 8:33
Yes.. check the html code. I've linked the css file. But doesn't work. — Sreekant Shenoy
– Sreekant Shenoy, Commented Jul 6, 2017 at 8:35
Does the styles.css exist in the same directory as the html file ? — K.F
– K.F, Commented Jul 6, 2017 at 8:37
Yes.. same directory..html works with css when viewed not in the localhost.. so basically I was wondering why it doesn't work on localhost using nodejs. — Sreekant Shenoy
– Sreekant Shenoy, Commented Jul 6, 2017 at 8:40
because you have no route for that. Node is low-level, it's not trying to be "smart" or anything. It's doing exactly what you're telling it to do. You're requesting a CSS file, but you wrote no instruction (no route, no folder indication) to handle this request. Now with Express, it's easy (that's even the whole point of Express), but in pure Node without Express, I don't know how to do it. — Jeremy Thille
– Jeremy Thille, Commented Jul 6, 2017 at 8:52

gusaindpk · Accepted Answer · 2017-07-06 09:18:36Z

2

You can take refrence from the below link also you have to serve your css file also using http. Node.js serve multiple files in one request Code:

            var http = require('http');
            var fs = require('fs');

            http.createServer(function (req,res){
                if(req.url === '/hello.html') {
                fs.readFile('hello.html',function(err,data){
                res.writeHead(200,{'Content-Type': 'text/html'});
                res.write(data);
                res.end();
              });
                }
                else if(req.url === '/style.css') {
                fs.readFile('style.css',function(err,data){
                res.writeHead(200,{"Content-Type": "text/css"});
                res.write(data);
                res.end();
                });
                }

            }).listen(8080);

answered Jul 6, 2017 at 9:18

gusaindpk

1,2532 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

gusaindpk Over a year ago

@sreekant-shenoy let know and approve the ans if it works for you :)

gusaindpk Over a year ago

Also you can use express for better routing flexibility as mention by @Jeremy Thille in comments

Jeremy Thille Over a year ago

Definitely, because this looks like a very verbose and tiresome way to handle routes.

Sreekant Shenoy Over a year ago

Thanks everyone! its working.. I'll learn with express too. :)

gusaindpk Over a year ago

@SreekantShenoy Can you accept my ans :D

|

SIMDD · Accepted Answer · 2017-07-06 09:19:36Z

1

you can try this!

var http = require('http')
var fs = require('fs')

http.createServer(function (req, res) {
    let route = req.url.replace('/', '')

    let request_url = route === '' || route === '/' ? 'hello.html' : route

    console.log(request_url)

    fs.exists(request_url, (exist) => {
        if (Boolean(exist) === false) {
            res.writeHead(404, {'content-type': 'text/html'})
            res.end('Page Not Found')
            return null
        }

        fs.readFile(request_url, function (err, data) {
            res.writeHead(200)
            res.write(data)
            res.end()
        })
    })
}).listen(8080)

answered Jul 6, 2017 at 9:19

SIMDD

6555 silver badges16 bronze badges

Collectives™ on Stack Overflow

Link CSS to HTML for nodejs server [duplicate]

2 Answers 2

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Linked

Related