I recently started learning Express.js and mongoose by creating a simple To-Do List, and now I'm stuck with a basic thing.
When I tried to render a EJS file in a dynamic route based on URL parameters, I was unable to apply the stylesheet.css which is stored in the public folder for the EJS, and the following error message showed up in the browser console.
The error message:
Refused to apply style from 'http://localhost:3000/mylist/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
And of course, the URL request was http://localhost:3000/mylist/css/styles.css.
On the other hand, the same EJS file rendered in the home route was able to access the stylesheet.css. And the request URL was http://localhost:3000/css/styles.css.
So I guess whatever I try to render, the request URL has to be http://localhost:3000/css/styles.css in my file structure. However, I don't know how to get rid of mylist from http://localhost:3000/mylist/css/styles.css, when I render as EJS in a dynamic route based on URL parameters.
What's wrong with my code? How do you solve it?
File structure:
app.js
const express = require("express");
const mongoose = require("mongoose");
const app = express();
app.set('view engine', 'ejs');
app.use(express.static("/public"));
mongoose.connect("mongodb://localhost:27017/todolistDB", {useNewUrlParser: true, useUnifiedTopology: true});
const itemsSchema = mongoose.Schema({ name: String });
const customListsSchema = mongoose.Schema({ name: String, items: [itemsSchema] });
const Item = mongoose.model("Item", itemsSchema);
const CustomList = mongoose.model("CustomList", customListsSchema);
app.get("/", (req, res) => {
Item.find((err, foundItems) => {
if (!err) {
res.render("list", { listTitle: "Today", newListItems: foundItems });
}
});
});
app.get("/mylist/:customListName", (req, res) => {
const customListName = req.params.customListName;
CustomList.findOne({ name: customListName }, (err, foundCustomList) => {
if (!err) {
if (foundCustomList) {
res.render("list", {
listTitle: foundCustomList.name,
newListItems: foundCustomList.items
});
} else {
const customList = new CustomList({ name: customListNamem });
customList.save((err) => {
if (!err) {
res.redirect("/mylist/" + customListName);
}
});
}
}
});
});
list.ejs:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="box" id="heading">
<h1> <%= listTitle %> </h1>
</div>
<div class="box">
<form action="/delete" method="post">
<% newListItems.forEach((newListItem) => { %>
<div class="item">
<input type="checkbox" name="checkbox" value="<%= newListItem._id %>" onchange="this.form.submit()">
<p><%= newListItem.name %></p>
</div>
<% }); %>
</form>
<form class="item" action="/" method="post">
<input type="text" name="newItem" placeholder="New Item" autocomplete="off">
<button type="submit" name="listName" value="<%= listTitle %>">+</button>
</form>
</div>
</body>
</html>
I also tried and replaced app.use(express.static("/public")); with app.use(express.static(__dirname + "/public"));, but it didn't work either.
I figured out how to fix the bug by myself.
It was caused by the fact that the path to the stylesheet in the EJS was a relative path. It seems that it has to be an absolute path.
So I simply added a forward slash
/and turned<link rel="stylesheet" href="css/styles.css">to<link rel="stylesheet" href="/css/styles.css">in thelist.ejs.Now it works with
app.use(express.static(__dirname + "/public"));inapp.js, however it doesn't still work withapp.use(express.static("/public"));.What's the difference between them?