NoteTutes with Express 3.0: Jade layouts, partials and includes

Express 3.0 removed partials and layouts and now expects the template engine to take care of them. Many tutorials and helpful websites are now "broken". Here's how to make the NodeTutes Episode 10 work:

app.js

(changed lines in bold)

var express = require('express');

var app = express();

app.configure(function() {
  app.use(express.logger());
  app.use(express.static(__dirname + '/static'));
});

app.configure('development', function() {
  app.use(express.logger());
  app.use(express.errorHandler({
    dumpExceptions: true,
    showStack: true
  }));
});

app.configure('production', function() {
  app.use(express.errorHandler());
});

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

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

var products = require('./products');

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

app.get('/products/:id', function(req, res) {
  var product = products.find(req.params.id);
  res.render('products/show', { product: product });
});

app.listen(4000);

The main difference is that you don't have to call the variables that you give to the template "locals", you just pass them as the second argument to render.

layout.jade:

!!! 5
html
  head
    link(rel='stylesheet', href='/stylesheets/styles.css')
    title Express demo app!
  body
    #main
      yeild

The yeild call makes sure that the view page which includes the layout will sit inside the main div.

index.jade:

include ../layout
  h1 Products:
  #products
    - each product in products
      include product

product.jade

Put this file in the same directory as index.jade

h2= product.name
p= product.description
p Price: #{product.price}

show.jade

Put this file in the same directory as index.jade

include ../layout
  h2= product.name
  p= product.description
  p Price: #{product.price}
  p
    a(href='/products') Back