Express 3.0 Layouts with Jade

This took me a good bit of googling so I thought I'd put it here for reference. If you're using Express.js 3.0 with Jade as a templating language, there is no longer a concept of "layouts" - wherein you define some global html layout and then render your content within that layout.

That would have looked something like this:

app.js

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

app.get("/", function(req, res) {
  res.render('index');
});

And then in /views you'd have layout.jade

!!! 5

body
  #wrapper != body

and index.jade

h1 "hello, world"

That's how I'm used to things working, coming from a Ruby world. But with Express.js 3.0 and the latest version of Jade (0.31, I think?), this does nothing. What you want instead are blocks. Your app.js remains the same, but your views change. Here's how it works:

layout.jade

!!! 5

body

#wrapper
  block content

index.jade

extends layout

h1 "hello, world"

All of this is necessary because in Express.js 3.0, the concept of "layouts" in view rendering was removed by the authors, so you need to move your layout logic to the views themselves.