As I delve into the world of serving pages with node, express, and ejs, I encountered an issue with linking a stylesheet to my index.ejs file using a public folder. Despite setting up the link correctly in the HTML code, the styles were not loading when I viewed the page in my browser. Strangely, there was no request for the stylesheet showing up in the network tab either. However, when I directly visited localhost:3000/styles.css, the file displayed without any problems. Here's how my files are structured:
index.ejs
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sam's Site | <%= title %></title>
<link rel="stylesheet" src="/styles.css" type="text/css">
</head>
<body>
...
</body>
</html>
app.js
const express = require('express');
const app = express();
app.set('view engine', 'ejs');
app.listen(3000);
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.render('index', {title: 'Home');
});
My app.js is located in the top level folder, index.ejs in a views folder, and styles.css in a public folder. Everything seems configured correctly, as the header appears normally and the link tag is correctly set up to load the stylesheet. Even after trying different path variations for the source of styles.css and ensuring that my CSS syntax is valid, the stylesheet still fails to load. Can someone shed light on why this might be happening?