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");
});
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.
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
Try to apply app.use(express.static('public'));