Odtnhj

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