Node Js html css

Question

****Css File Cannot connect with the below****

it is in the flow of root

/index.html

/server.js

/css/style.css

My /server.js Code

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

fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000);
});

**CSS css/style.css**

   .raj{
    background-color: red;
   }

**html /index.html**

<html>
<head>
  <title></title>
  <!-- <link rel="stylesheet" type="text/css" href="/css/style.css" /> -->
  <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<span class="raj">
asldfasd <br/>
fasd <br/>
fas <br/>
dfa <br/>
sdf <br/>
sadf <br/>
asd <br/>
fas <br/>
df <br/>
sad <br/>
</span>
</body>
</html>

css cannot connect with this above html file

Mohammad Ali · Answer 1 · 2017-03-09T06:39:38.317

0

The problem is caused by your web server not checking the path of the URL request but is rather going to return the same HTML file no mater the path or file extension you use. To get around this shortcoming of the node http module I would recommend utilizing a framework such as express.js Or if you only want to serve static files I would recommend you use http-server, you can install it using the following command:

npm install http-server -g

After installation you can navigate to the folder you store your html and CSS files in then run your webserver using the following command:

http-server

You can read more about the module here

edited Mar 09 '17 at 06:39

answered Mar 09 '17 at 06:28

Mohammad Ali

878
8
16

if you have any sample please attach – Vignesh Sathiyanarayanan Mar 09 '17 at 06:34
Rather than the node http try a lightweight mod like https://www.npmjs.com/package/serve-static – Matthew Campbell Mar 09 '17 at 06:38
@VigneshSathiyanarayanan I've edited in an example – Mohammad Ali Mar 09 '17 at 06:39

score -1 · Answer 2 · edited Apr 10 '17 at 12:04

-1

Just Replace this line of code :

<link rel="stylesheet" type="text/css" href="/css/style.css" />

with this,

<link rel="stylesheet" type="text/css" href="./css/style.css" />

edited Apr 10 '17 at 12:04

Ousmane D.

54,915
8
91
126

answered Mar 09 '17 at 07:33

Utkarsh Dubey

703
11
31

Node Js html css

2 Answers2