I’m encountering an issue with my Express.js application where static files and scripts are not being found when accessing a specific endpoints. Here’s a breakdown of the problem:
I have an Express.js application with various routes serving HTML pages along with static files such as CSS, JavaScript, and images. Most endpoints work fine and serve the expected content, including the static files and scripts.
However, when I access the dynamic endpoints, say /team/:memberName, the static files and scripts cannot be found, leading to errors like:
Sandra%20Olson:19 Refused to apply style from 'http://localhost:4000/Sandra%20Olson:19
testimonial/assets/css/color-schemes/default.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Here are all of the errors:
Here is my App.js:
const express = require("express");
const path = require("path");
const fs = require("fs");
const app = express();
const util = require("util");
const homeJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "home.json"))
);
const menuJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "menu.json"))
);
const servicesJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "services.json"))
);
const blogsJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "blogs.json"))
);
const testimonialsJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "testimonials.json"))
);
const footerJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "footer.json"))
);
const cosmeticsJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "services", "cosmetics.json"))
);
const asideJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "services", "aside.json"))
);
const storeJSON = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "store.json"))
);
const contactJSON = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "contact.json"))
);
const galleriesJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "galleries.json"))
);
const teamJSON = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "team.json"))
);
const faqsJson = JSON.parse(
fs.readFileSync(path.resolve("json", "en", "faq.json"))
);
const renderAsync = util.promisify(app.render).bind(app);
console.log(menuJson);
app.use(express.static(path.resolve("./public")));
app.set("view engine", "ejs");
app.get("/", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "home",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("index", {
serviceDetails: servicesJson,
blogDetails: blogsJson,
testimonialDetails: testimonialsJson,
html: {
header: headerHtml,
footer: footerHtml,
},
...homeJson,
});
});
app.get("/services", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "services",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("services", {
serviceDetails: servicesJson,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/services/:name", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "services",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("service", {
serviceDetails: cosmeticsJson,
aside: asideJson,
selection: req.params.name,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/store", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "store",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("store", {
details: storeJSON,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/blog", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "about us",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("blogs", {
blogs: blogsJson,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/galleries", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "about us",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("gallery", {
galleries: galleriesJson,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/team", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "about us",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("team", {
team: teamJSON,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/contact", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "contact",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("contact", {
details: contactJSON,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/testimonials", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "contact",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("testimonials", {
details: testimonialsJson,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.post("/message", async (req, res) => {
console.log("Success");
res.sendStatus(200);
});
module.exports = app;
app.get("/faq", async (req, res) => {
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "faq",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("faq", {
faqs: faqsJson,
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/testimonial/:authorName", async (req, res) => {
const authorName = req.params.authorName;
const testimonial = testimonialsJson.find(testimonial => testimonial.author.name === authorName);
if (!testimonial) {
return res.status(404).send('Testimonial not found');
}
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "contact",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("detailed_testimonial", {
details: [testimonial], // Wrapping in an array because your EJS template is expecting an array
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
app.get("/team/:memberName", async (req, res) => {
const memberName = req.params.memberName;
const member = teamJSON.find(member => member.name === memberName);
if (!member) {
return res.status(404).send('Team member not found');
}
const headerHtml = await renderAsync("components/header", {
menu: menuJson,
selection: "contact",
});
const footerHtml = await renderAsync("components/footer", {
info: footerJson,
});
res.status(200).render("person_page", {
member: member, // Change here to match EJS template variable
html: {
header: headerHtml,
footer: footerHtml,
},
});
});
So, if I try to access http://localhost:4000/testimonials the CSS and JavaScript is working, but if I try to access any of the dynamically created endpoints, for example the detailed page of any testimonial – http://localhost:4000/testimonial/Sandra%20Olson, the CSS and JavaScript can not be found.
Actually, I know from where is the problem and I hope you also understood from where is the problem, but I can not understand how to fix it!
