26

I have been using sendFile method to render Html in Express project. I would like to use partials with my project. And, not switch to jade.

Is there a way to use traditional HTML with partials in Express 3.x. I have tried ejs, but dont understand it completely.

Merlin
  • 24,552
  • 41
  • 131
  • 206
  • What about EJS don't you understand? – robertklep Nov 11 '13 at 17:36
  • Why I need it? What it does. I would like to write files with Html endings – Merlin Nov 11 '13 at 17:37
  • Express itself doesn't support much HTML generating (other than manually building your HTML or serving static HTML files), it relies on external templating engines like Jade or EJS (or the dozens of others) to perform more complex dynamic operations (like partial rendering). – robertklep Nov 11 '13 at 17:41
  • ok, thanks for explaining. I am more a python/flask person. I am familar with jinga2. Could I use jinga2 templating with partials. – Merlin Nov 11 '13 at 17:52
  • There are Jinja2-like templating engines for Node/Express, like [nunjucks](https://npmjs.org/package/nunjucks) and [jinja-js](https://npmjs.org/package/jinja-js) (more [here](https://encrypted.google.com/search?q=jinja&q=site:npmjs.org&hl=en)). I don't know if they support partials though. – robertklep Nov 11 '13 at 17:56
  • Do you know how to setup say nunjucks seems like the most popular? and use HTML extensions. – Merlin Nov 11 '13 at 18:11
  • Try [some of the sample code](https://github.com/jlongster/nunjucks/tree/master/tests/express-sample). I don't have experience with nunjucks per se. – robertklep Nov 11 '13 at 18:15
  • Sorry, I meant how would I replace jade with nunjucks in express. What would I need to change in the express stack to use nunjucks - the configs..any help here? – Merlin Nov 11 '13 at 18:20
  • Also, can you answer question so I can give you credit. – Merlin Nov 11 '13 at 18:24

1 Answers1

60

A more 'HTML-like' templating engine would be nunjucks (whose syntax is similar to Jinja2, which you have experience with).

Here's a simple setup. This assumes both Express and Nunjucks are installed, if not:

npm install express
npm install nunjucks

– app.js

var nunjucks  = require('nunjucks');
var express   = require('express');
var app       = express();

app.listen(3012);

nunjucks.configure('views', {
  autoescape: true,
  express   : app
});

app.get('/', function(req, res) {
  res.render('index.html', {
    title : 'My First Nunjucks Page',
    items : [
      { name : 'item #1' },
      { name : 'item #2' },
      { name : 'item #3' },
      { name : 'item #4' },
    ]
  });
});

– views/index.html

<!doctype html>
<html>
  <head>
    <title>welcome to {{ title }}</title>
  </head>
  <body>
    <ul>
      {% for item in items %}
        {% include "item.html" %}
      {% endfor %}
    </ul>
  </body>
</html>

– views/item.html

<li>{{ item.name }}</li>
robertklep
  • 198,204
  • 35
  • 394
  • 381
  • 2
    Man I cant thank you enough.... All my python projects, can now be converted to express.....Thank You so much! – Merlin Nov 11 '13 at 20:16
  • I have stumbled across this article whilst trying to work out why my own test will not work. How do you implement this when your app.js declares express and nunjucks, but you have your rendering done in a separate js file e.g. routes.js – Jonathan Smith Nov 04 '14 at 21:54
  • @jonnyknowsbest "it depends". It should work automatically if you are using the same Express instance in your separate file(s). However, if you instantiate a new Express app instance in those files, you need to configure nunjucks against that app instance too. – robertklep Nov 05 '14 at 11:31
  • I cant believe how popular this question is. – Merlin Jan 16 '15 at 05:24
  • Is it best to go this route for maximum performance? I find that precompiling creates a huge js template file but not know how to use it or if its the right way to go. – theptrk Jun 16 '15 at 05:49
  • @theptrk what do you mean by _"this route"_? Using nunjucks in general? There are probably more lean templating engines around (with less features, too). AFAIK nunjucks will cache compiled templates in memory, which would help with performance. – robertklep Jun 16 '15 at 06:20
  • @robertklep I think I was thinking of using nunjucks a bit differently. Say I had a login and signup page served with different routes. They both extend an html structure with a generic nav bar. I thought it would be more efficient to compile both the complete login and signup pages into the full html so the server wouldn't have to compile the page each time a user visits '/login' or '/signup'. It might be best to let nunjucks cache these. – theptrk Jun 18 '15 at 03:57
  • See also: https://idyllic.co/blog/setup-simple-website-using-nodejs-express-nunjucks-gulp-nodemon/ – Guildenstern70 Dec 06 '17 at 09:47