How to apply css to to node.js?

Question

In this code I'm calling an html file into app.js, the css style is not applied to the html but when I open the html path alone without the app.js the style is applied, here's the code:

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require('mongoose');

const app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/aqeldb1", {useNewUrlParser: true});

app.route("/order")

.get(function(req, res){
    res.sendFile(__dirname + "/ordernow.html");

});

app.listen(3000, function() {
  console.log("Server started on port 3000");
});

Answer 1

Use in your main .js file:

app.use('/css',express.static(__dirname +'/css'));

use in you main .html file:

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

Please keep .css files in the public folder

Answer 2

You need to set as static the directory where the .css files are or /index.html won't be able to access them when loaded through the express server.

app.use(express.static("directory/that/you/want/to/be/publicly/accessible"));  <-- here you keep .css, and clientside .js files.

You could also put the .css files in the public folder if you don't want to add another static directory. A good approach is to make all the directories that contain the view files (.html, .css, .js) static.

Answer 3

Try to apply app.use(express.static('public'));