I am just starting out with node, express, etc. and have created a blog app. However, I am encountering an issue. My application utilizes mongoose, node, express, and ejs.
When I make the following call:
router.get('/posts', function(req, res){
Post.find({}, function(err, posts){
res.render('viewpost.ejs', {
posts
});
});
});
Everything functions correctly. I am able to retrieve my posts and the CSS styling works as expected. The problem arises when I use:
router.get('/posts/:posts_id', function(req, res){
Post.find({_id: req.params.posts_id}, function(err, posts){
res.render('viewpost.ejs',{
posts
});
});
});
The post retrieval works fine, but in the console I see:
GET /posts/posts.css 304 1.854 ms And it appears that the viewpost.ejs file is not applying the CSS styles.
Within the server file server.js:
app.use(express.static('public'))
app.use(express.static(path.join(__dirname, 'public/css/')));
app.use(express.static(path.join(__dirname, 'public/img/')));
In the viewpost.ejs file:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css">
<script src="/bower_components/jquery/dist/jquery.js"></script>
</head>
<body class="cyc">
<% include ./partials/navbar.ejs %>
<%= posts %>
</body>
</html>
It seems that everything works fine when I use the route without parameters. However, as soon as I include any parameter, my CSS file stops working correctly.