Agfdhyk

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?

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);

    });

});

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