Nunjucks extends directive not working with template in separate directory using express?

Question

I am setting up the nunjucks templating with my express app below is my directory structure for a project

. nunjucks-project
  |__ api
  |__ node_modules
  |__ views
     |__ templates
        |__ layouts
           |__ default.html  
        |__ pages
           |__ home.html
        |__ partials
           |__ header.html
           |__ footer.html

Here is my app.js :

/**
 *  Author Kailash K Yogeshwar 2016
 */

var express  = require('express');
var nunjucks = require('nunjucks');
var mongoose = require('mongoose');
var path     = require('path');
var config   = require('config');

var app               =  express();
var viewRoutes  =  require("./routes/viewroutes/index");
var apiRoutes   =  require("./routes/apiroutes/index");


var dbUrl = "mongodb://localhost:27017/techblogs";

mongoose.connect(dbUrl);

mongoose.connection.on('open',() => {
    console.log("Connection successfully established")
});

mongoose.connection.on("error",(err) => {
    console.error(err);
});

//configure views
app.set('views', path.join(__dirname, "views", "templates"));
app.set('view engine', 'html');


// configure nunjucks
var env = nunjucks.configure(app.get('views'), {
    autoescape: true,
    dev: true,
    noCache: true,
    throwOnUndefined: true,
    express : app
});

console.log(JSON.stringify(env, null, 3))

app.use('/', viewRoutes);
app.use('/api', apiRoutes);

app.listen(process.env.PORT || 8080, () => {
    console.log("Server Started to listen on ",process.env.PORT || 8080);
});


module.exports = app;

Here is my default.html, home.html :

!<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    {% include 'partials/header.html' %}
    {% block content %} {% endblock %}
    {% include 'partials/footer.html' %}
</body>
</html>

home.html

{% extends "layouts/default.html" %}
{% block content %}
<h1> I am home page <h1>
{% endblock %}

I guess extends work only if the template is in same directory and not in separate directory also i tried to specify multiple paths in nunjucks.configure([paths],{}) but that does work as it takes into account only the first path rest all path are added as relative paths.

Screenshot :

You missing quotes `{% include 'partials/header.html' %}` :) — Aikon Mogwai, Nov 09 '16 at 19:13
http://sgeproject.narod.ru/node/nun3.zip Cropped example works fine. — Aikon Mogwai, Nov 10 '16 at 05:22
@AikonMogwai that works when you define all your route in index.js but doesn;t work if route are in separate directory — kailash yogeshwar, Nov 10 '16 at 16:16
@AikonMogwai i got the solution to tackle this issue see below — kailash yogeshwar, Nov 10 '16 at 16:30

score 0 · Answer 1 · answered Nov 10 '16 at 16:29

For any one facing this similar issue i just moved my viewRoute middleware below and exported the instance of express app and use the instance in middleware for rendering.

var env = nunjucks.configure(app.get('views'), options);

var viewRoutes  =  require("./routes/viewroutes/index");
var apiRoutes   =  require("./routes/apiroutes/index");

app.use('/', viewRoutes);
app.use('/api', apiRoutes);

app.listen(process.env.PORT || 8080, () => {
    console.log("Server Started to listen on ",process.env.PORT || 8080);
});

and my viewRoutes/index.js

var express = require('express');
var nunjucks = require('nunjucks');
var app = require("../../index");

var router = express.Router();

app.get("/", function(req, res, next){
    res.render('pages/home.html',{
        title: "Home"
    });
})

module.exports = router;

Nunjucks extends directive not working with template in separate directory using express?

1 Answers1