Currently, I am in the process of building a basic blog from scratch to enhance my knowledge of node.js + express. However, I have encountered a roadblock when attempting to access a nested directory, resulting in the styles not loading. For instance:
app.get('/posts/new', (req, res) => {
res.render('create')
});
Using this path does not render the styles, but '/posts' works perfectly fine.
Does anyone have any insights into what might be causing this issue? Below is the complete code snippet:
const path = require('path');
const expressEdge = require('express-edge');
const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const app = new express();
mongoose.connect('mongodb://localhost:27017/node-blog', {
useNewUrlParser: true
})
.then(() => 'You are now connected to Mongo!')
.catch(err => console.error('Something went wrong', err))
app.use(express.static('public'));
app.use(expressEdge);
app.set('views', __dirname + '/views');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
extended: true
}));
app.get('/', (req, res) => {
res.render('index');
});
app.get('/posts/new', (req, res) => {
res.render('create')
});
app.post('/posts/store', (req, res) => {
console.log(req.body)
res.redirect('/')
});
app.listen(4000)
Below is the current directory structure:
└── node-blog
├── database
├── node_modules
├── public
├── css
├── img
├── vendor
├── js
├── theme
└── views
├── layouts
All necessary styles reside in the public folder, while the template engine files can be found in the views directory.