How to link css file in node.js

Question

I am new to node.js and js in general. I have a simple app that have a styles.css but I dont know how to link it on the app.js.

In the index.html it has <link rel="stylesheet" type="text/css" href="css/styles.css">

And this is my app.js for the node.js:

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

const hostname = '127.0.0.1';
const port = 3000;


fs.readFile('index.html', (err, html) =>{
    if (err){
        throw err;
    }
    const server = http.createServer((req,res) => {
        res.statusCode = 200;
        res.setHeader('Content-type', 'text/html');
        res.write(html);
        res.end();

    });

    server.listen(port, hostname, () => {
        console.log('Server started on port ' + port);
    });
});

So how should I modify app.js so that it will be able to locate the css file?

Your request handler always responds with the contents of your index.html. So when the browser parses the html, it then requests css/styles.css which your server responds by sending it the index.html again. You should distinguish between requests for index.html and css/styles.css to return content accordingly. — shkaper
– shkaper, Commented Nov 11, 2018 at 22:22
Are you familiar with Express.js or is it a requirement to use raw Node.js without any frameworks? — SakoBu
– SakoBu, Commented Nov 11, 2018 at 22:28

Aagam Jain · Accepted Answer · 2018-11-11 22:29:33Z

for every request you are returning index.html.

Try this:

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

const hostname = '127.0.0.1';
const port = 3000;


fs.readFile('index.html', (err, html) =>{
    if (err){
        throw err;
    }
    const server = http.createServer((req,res) => {


        res.statusCode = 200;
        if(req.url == '/'){
        res.setHeader('Content-type', 'text/html');
        res.write(html);
        res.end();
        res.statusCode = 200;
        } 

        else if(req.url == '/css/styles.css'){
            res.setHeader('Content-type', 'text/css');
            res.write(fs.readFileSync('css/styles.css'));
            res.end();
        } else {
            res.write("invalid request")
            res.end();
        }

    });

    server.listen(port, hostname, () => {
        console.log('Server started on port ' + port);
    });
});

SakoBu · Accepted Answer · 2018-11-11 22:35:34Z

1

If you're not limited to raw node.js and can use express.js here is what you can do to serve static files

Here is your server.js

const express = require("express");
const app = express();

app.use(express.static("public"));

const PORT = process.env.PORT || 8080;

app.listen(PORT, () => {
  console.log(`Your app is listening on port ${PORT}`);
});

Then you create a folder and call it public and that's where all your client-side goes...

Here is an live demo for a complete working example: https://glitch.com/edit/#!/peridot-wildcat?path=README.md:1:0

answered Nov 11, 2018 at 22:35

SakoBu

4,0311 gold badge18 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to link css file in node.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related