Styling an html page in a node.js application

Question

I have just tried to build up a server on localhost to display an html page. All good so far. The problem arises when I try to style my html page with a css file.

Consider that all my file are in the same directory.

If I run node app.js and I go to local host I can see the page but with no css styling…could you please help me?

Thanks

App.js

const http = require('http');
var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, '/')));

let {requestListener} = require('./callbackFile.js');
const PORT = process.env.PORT || 4001;

const server = http.createServer(requestListener);
server.listen(PORT);
console.log("");
console.log("express server should be up&running. Please go to http://localhost:"+PORT);

callbackFile.js

const fs = require('fs');

module.exports = {
  requestListener: (req, res) => {
  fs.readFile('./ws.html',  'utf-8', (err, data) => {
    if (err){
      res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(`${err}`);
    res.end();
    } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    res.end(); 
    }
  })
}
}

ws.html

<!DOCTYPE html>

<html>

<head> 
<link rel="stylesheet" type="text/css" href="style.css">
<title> website page </title>
</head>

<body>
<h1> Web server up & Running </h1>
<h4> Express Server listening on port 4001 </h4>
</body>

</html>

style.css

h1 {
    color: "red";
{

Answer 1

The problem here is that you set up your http server to respond to every request with ws.html . I think it will be clearer if I show a solution you instead of telling you.

App.js

const PORT = process.env.PORT || 4001;
const http = require('http');
var express = require('express');
var path = require('path');
var app = express();
let { requestListener } = require('./callbackFile.js');


app.get("/", requestListener);
app.use(express.static(path.join(__dirname, '/')));

const server = http.createServer(app);
server.listen(PORT);
console.log("");
console.log("express server should be up&running. Please go to http://localhost:"+PORT);

style.css

h1 {
  color: red;
}

What I am doing here:

Instead of passing the function requestListener to the http.createServer() function, I passed in the express app variable. You will see the reason for this later.
I put the requestListener function in an Express route. What that does is route all requests for the url "/" to the requestListener function. All other routes will be routed to the Express middleware below that.
I removed the quotes from the h1 styling in the style.css file. As @Phix said, CSS colours don't use quotes.

Why this works

As said in the Express 4.x documentation:

The app returned by express() is in fact a JavaScript Function , designed to be passed to Node's HTTP servers as a callback to handle requests. This makes it easy to provide both HTTP and HTTPS versions of your app with the same code base, as the app does not inherit from these (it is simply a callback):
 var express = require('express') var https = require('https') var http = require('http') var app = express() http.createServer(app).listen(80) https.createServer(options, app).listen(443)

So, I guess you could say that an Express application is basically a convenient way of defining a callback function for a http or https server

Here is the express 4.x documentation if you need it.
https://expressjs.com/en/4x/api.html

Hope this helps:)

Styling an html page in a node.js application

Question

1 answers

solution1
1 ACCPTED 2020-05-22 00:05:55

What I am doing here:

Why this works

Styling an html page in a node.js application

Question

1 answers

solution1 1 ACCPTED 2020-05-22 00:05:55

What I am doing here:

Why this works

solution1
1 ACCPTED 2020-05-22 00:05:55