I'm building a simple website using Node.js, Express and the EJS template engine and I'm having trouble getting my external CSS files to load on the routes that have route parameters. My code looks like this:
const express = require("express");
const app = express();
var AWS = require('aws-sdk');
var uuid = require('uuid');
var request = require('request');
var Amplify = require('aws-amplify');
const { info } = require("console");
app.use(express.static("public"));
app.set("view engine", "ejs");
app.get("/Test1/", function(req, res){
res.render("Test1.ejs");
});
app.get("/Test2/:route", function(req, res){
res.render("Test2.ejs")
});
Test1.ejs and Test2.ejs are exact duplicates of each other, one being copy pasted from the other.
I'm able to to see the CSS file loading properly on Test1 but on Test2 express is sending the HTML of Test2.ejs in place of the actual CSS file. This is without reloading or changing anything. I would be less confused if the CSS just wasn't loading properly on any of my routes, as that would indicate some problem with how I'm using express, but I can't figure out how it can be working properly on all my other routes and fail whenever a route parameter is used. I'm also tried actually using the route parameter e.g.
app.get("/Test2/:route", function(req, res){
const routeParam = req.params.route;
res.render("Test2.ejs", {
routeParam: routeParam
});
});`
I also displayed routeParam in the page to make sure that was working, and it does, except the page is still getting the HTML of the page in place of the proper CSS file, causing it to be poorly formatted.
I'd appreciate any help on this, thank you
