Before we delve into the question, let me share with you the folder structure of my node.js express app:
/home
server.js
index.html
/app
/routes
public.js
/public
/css
main.css
In my server.js file, here is what I've implemented:
// ROUTING FOR STATIC CONTENT
var public_dir = __dirname + '/public';
app.use(express.static(public_dir));
// INITIALIZE ROUTER
var public_router = express.Router();
// IMPORT PUBLIC ROUTES
require('./app/routes/public')(public_router, public_dir);
// REGISTER ROUTES
app.use('/', public_router);
This is the contents of /app/routes/public.js:
var path = require('path');
module.exports = function(public_router, public_dir) {
public_router.get('/new', function(req, res) {
res.sendFile(path.join(public_dir, 'index.html'));
});
public_router.get('/popular', function(req, res) {
res.sendFile(path.join(public_dir, 'index.html'));
});
public_router.get('/popular/today', function(req, res) {
res.sendFile(path.join(public_dir, 'index.html'));
});
}
Within index.html, I reference the css file as follows:
<link rel="stylesheet" href="css/main.css">
The issue at hand:
Upon visiting mydomain.com/new and mydomain.com/popular, the css file loads correctly and the page displays properly. However, when accessing mydomain.com/popular/today, the css file fails to load correctly. Upon inspecting in Chrome dev tools, it seems like the browser is attempting to fetch the css from the popular folder, which is incorrect.
I welcome any ideas or suggestions that could help resolve this matter. Thank you in advance!