Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jonathan Fernandes
Courses Plus Student 22,784 PointsWorking with pug subdirectories on Express and Node.js
Hi all!
So I am working with the new templating engine formally known as jade, now pug, and I am trying to render a file that is in a sub folder in my views directory.
my directory looks like this:
views
-->frontend
-->-->index.pug
my route file looks like this:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('frontend/index', { title: 'Express' });
});
module.exports = router;
and my app.js:
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'pug');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
Why won't express render my template for the index in the sub directory called frontend?
EDIT: Clarified my question by making my directory layout a bit clearer
Jennifer Nordell
Treehouse TeacherHmm... I'm a little curious at least what happens if you change the part in the routes file back to index and then point the views setup to the appropriate subdirectory.
You have this line in app.js:
app.set('views', path.join(__dirname, '/views'));
What happens if you change that to:
app.set('views', path.join(__dirname, '/views/frontend'));
I'm really curious about this. Don't know that I've ever done this before
Jonathan Fernandes
Courses Plus Student 22,784 PointsNo luck... :(
Jonathan Fernandes
Courses Plus Student 22,784 PointsJonathan Fernandes
Courses Plus Student 22,784 PointsHey Jennifer,
whoops! While I did say that, I meant in a subfolder within the views directory. I changed one word and edited my directory layout in my question to clear things up a bit.
Long story short, if I put my index.pug in the views directory and simply rendering 'index', it works, but if I put it in a subfolder like frontend, rendering 'frondend/index' does not work... I'm stumped...