CSS not being applied on seperate ejs file

Question

So i'm trying to figure out why my CSS file won't load in one of my ejs files. I've made sure I've added the header correctly and made a tester page and rendered it with just the header/navbar and CSS loads fine.

The only thing I can think of is that the way the blog.ejs files is rendered in my app.js file. It's a blog project so I'm making each post render on its own page using route params.

See code below for my app.js

//jshint esversion:6

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const ejs = require("ejs");
const _ = require("lodash");
const app = express();

const startTitle ="Best";
const startContent="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

app.use(express.static("public"));
app.set("view engine", "ejs");
app.use(bodyParser.urlencoded({extended: true}));


let blogs = [];

app.get("/", function (req, res){
  res.render("home",{
    startTitle: startTitle,
    startContent: startContent,
    blogs:blogs
  });
});

app.get("/compose", function (req, res){
  res.render("compose");
});


app.get("/blogs/:blogId", function (req, res) {
  const requestedTitle = _.lowerCase(req.params.blogId);

  blogs.forEach(function(blog){
    const storedTitle = _.lowerCase(blog.postedTitle);

    if(requestedTitle === storedTitle){
      res.render("blog",{
        title: blog.postedTitle,
        content: blog.postedContent
      });
    }
  });


});


app.post("/compose", function (req, res){
      const blog = {
          postedTitle: req.body.title,
          postedContent: req.body.content
      };

  blogs.push(blog);
  res.redirect("/");
});


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

Answer 1

This sounds like the link to your CSS file does not start with a / . If it's just a plain relative URL with no http:// or not / at the start of the path, then the browser will add the path from the web page to your linked URL before requesting the style sheet. This will cause the browser to request a different page when the web page has a leading path such as from a page such as /blogs/blogID and your server will not be expecting that.

So, make sure that all your style sheet links start with / so you get a consistent request to your server, no matter what the path is on the host web page.