Mustachioed

A better template engine for Express apps

Matthew Nuzum —  — 1 Comment

In my last post I explained how to set up a Node.js project “the right way.” After some trial and error, I’d like to recommend a small improvement. The “hjs” template rendering engine leaves a little bit to be desired, so now I use hogan-middelware instead. It requires a few changes to your project, which I’ll explain briefly below.

The biggest improvement is that it supports a greater set of features from the Hogan.js mustache template engine, including much easier configuration of partial-templates. Once your site grows beyond a few pages, this is a critical feature. Also, based on my reading of the code, when Hogan.js launches version 3.0 shortly it will be easy to upgrade this module with support for template inheritance.

Go ahead and start your project as described in the previous article, but before you run npm install, let’s make a couple minor changes. Open package.json and delete this line:

"hjs": "*",

Instead, replace it with this line:

"hogan-middleware": "*",

Now you can use npm install.

We still need to update your app.js file, so open it with your favorite editor and find this line:

app.set('view engine', 'hjs');

And change it to have these two lines:

app.set('view engine', 'mustache');
app.engine('mustache', require('hogan-middleware').__express);

Save and exit. If you use npm start and try to visit the webpage, you’ll see an error, failed to lookup view “index”. This is because express happily created index.hjs for us. That made sense because we told it we wanted to use *.hjs templates. Well, now we’re going to use *.mustache templates, so expand the views folder and rename index.hjs to index.mustache. Now your demo site should work just fine.

So what do you gain with this handy, dandy new module? Partial templates! I tend to call these sub-templates, but I’ll try to be consistent as I write this (anything goes if you ask me about it in person though).

In your views folder create a file called header.mustache and a file called footer.mustache. Open index.mustache and remove all of the code before the <h1> tag and put it into header.mustache, then all of the code after the </p> tag and put it into footer.mustache.

At the top of index.mustache use this code:

{{>header}}

And at the end add

{{>footer}}

So the end result should be:

{{>header}}
 <h1>{{ title }}</h1>
 <p>Welcome to {{ title }}</p>
{{>footer}}

Now refresh the page and you should magically see nothing change! The benefit comes, obviously, when you have more sophisticated templates. You can have common sections of code that define the look of your page that are reusable throughout your site.

I hope soon to be able to write about hogan.js 3.0 support, which includes template inheritance, similar to what you may find with Django templates, but I am very happy with what this provides us for now.

Hopefully this will help you, I’d love to hear your comments!

If it helped, please share!Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Matthew Nuzum

Posts Twitter Facebook

Web guy, big thinker, loves to talk and write. Front end web, mobile and UX developer for John Deere ISG. My projects: @dsmwebgeeks @tekrs @squaretap ✝
  • Thank you Matthew. This tutorial was one of the best Express.js and Node.js ones online and it really helped me grasp the language and outline of an app. Implementing the .mustache partials seems very powerful. Thanks!