how do i fix routes to find views inside subfolders in node.js

Question

i am trying to create a route for localhost:port/admin/ and i want to keep the routes.js files and view.js files in matching folders so i wont have too much spaggeti later on

but i keep getting: 500 Error: Failed to lookup view "/admin/manage_subjects" for trying to create a new route and using same folders few the same

i have the following view folder with express

mainapp(root)
  routes(folder)
    admin(folder)
      index.js(nested inside admin)
    index.js(nested inside routes)
  views(folder)
    admin(folder)
      admin_layout.jade(nested inside admin)
      manage_subjects.jade(nested inside admin)
    index.jade(nested inside views)
    layout.jade(nested inside views)

code: routes/admin/index.js

exports.index = function (req, res) {
res.render('manage_subjects',{title:'Express'});}

views/admin/manage_subjects.jade

extends admin_layout
block content
h1 = title
p Welcome to #{title}

my app.js code

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , admin_routes = require('./routes/admin/')
  , user = require('./routes/user')
  , http = require('http')
  , path = require('path')
  , repository = new (require('./domain_model/repository'))();

var app = express();

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

//fill local subjects
repository.subjects.GetAll(function (err, data) {
    if (err) throw err;
    app.locals.subjects = data;
});

//append routes
app.get('/', routes.index);
app.get('/admin', admin_routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
  console.log('Express server listening on http://localhost:' + app.get('port'));
});

Solution 1

I've been dealing with what I think is the same problem and figured out how to fix it. So in case someone else comes across this problem I'm posting my solution.

So here is what I had that was causing 404's and 500's

app.js

var routes = require('./routes/index');
var admin = require('./routes/admin');

app.use('/', routes);
app.use('/admin', admin);

and here was my routes/index.js

//append routes
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
    res.render('index', {title: 'Express'});
});

module.exports = router;

and my routes/admin.js:

var express = require('express');
var router = express.Router();

router.get('/admin', function(req, res) {
    res.render('admin/index', {title: 'Express'});
});

module.exports = router;

by defining the second /admin inside the router.get() function I think I was effectively telling node to look for the html in my views folder under the following path views/admin/admin/index.ejs. So to fix that all I had to do was remove either the /admin from the router.get() or the /admin from the app.use() So my working code now looks like this:

app.js

var routes = require('./routes/index');
var admin = require('./routes/admin');

app.use('/', routes);
app.use('/admin', admin); //I left the /admin here and instead removed the one in routes/admin.js

and here was my routes/index.js

//append routes
var express = require('express');
var router = express.Router();

router.get('/', function(req, res) {
    res.render('index', {title: 'Express'});
});

module.exports = router;

and my routes/admin.js:

var express = require('express');
var router = express.Router();

router.get('/', function(req, res) { //NOTICE THE CHANGE HERE
    res.render('admin/index', {title: 'Express'});
});

module.exports = router;

So making that change made it so I could have sub folders in my views folder.

Solution 2

Simple Answer for sub-folders inside the views folder (mine is called frontend)

click here the picture to see the folder structure

file app.js


app.set('views', [path.join(__dirname, 'frontend'), path.join(__dirname, 'frontend/locked'), path.join(__dirname, 'frontend/template'), path.join(__dirname, 'frontend/public')]);
app.set('view engine', 'pug')

Comments

[Guihgo]

res.render('admin/index', {title: 'Express'}); solution for me - thnks

[dfresh22]

thank you! this is perfect.this should be the answer.

[Bhuro]

HI, ... I'm new to NodeJS ... and I've installed nodejs 10. Can I get source code for the above example you just gave here? Thanks in advance.