Express 3.0 Changes

CHANGES.md

Changes in Express 3.0 Templates

Related: PeepCode Full Stack Node.js screencast (an included code sample works with Express 3.0).

There are several syntax changes in Express 3.0. They do require modifications to your code, but they aren't too complicated.

The biggest change is that Express templates now use Django style inheritance rather than ERB/Rails style automatic layouts.

Summary

• Use extends to explicitly specify a layout template.
• Use include instead of partial.
• Use block to make a placeholder in a layout.
• Use block again in an individual template to specify the content to render in the layout.

Details

The biggest changes are:

• You must explicitly tell sub-templates what layout they should use. Previously, they would automatically be wrapped by the layout template. Now you need to call extend at the top of the template. For example, in apps/sidewalk/views/index.jade:

extends ../../../views/layout

• Use include to render another template (this previously used partial). If you want to use a leading underscore for partial templates, mention it explicitly when includeing the template. For example, in views/layout.jade:

body

  include _admin-menu

• To render other templates, use block with a name. In layout.jade, this looks like this:

block content

• The corresponding content in a template uses block with the same name. So apps/sidewalk/views/index.jade looks like this:

block content
  ul
    each pie in pies
      # etc

• So the full template of apps/sidewalk/views/index.jade looks like this:

extends ../../../views/layout

block content
  ul
    each pie in pies
      li(class=[helpers.cssClassForPieAge(pie), pie.type])
        = pie.name
        span.status
          = helpers.wordsForPieAge(pie)

• ALSO: Express did away with built-in support for the extremely useful view helper methods. You can recreate it with a bit of middleware. Assign methods to app.helpers or app.dynamicHelpers. Then see middleware/upgrade.coffee in the PeepCode Express 3.0 demo app for a way to automatically load these as helpers in your views.

routes = (app) ->
  app.all '*', (req, res, next) ->
    app.locals
      helpers: app.helpers
      flash: req.flash()
    for method of app.dynamicHelpers
      do (method, req, res) ->
        app.locals[method] = () ->
          app.dynamicHelpers[method] req, res
    next()

module.exports = routes

We hope to update the video to mention these changes. In the meantime, try the HotPie-Express3 app in the code download at PeepCode.

Another change (or bug in express ?) is the 'location' field while using 'res.redirect' function: 'http:' is not present.
[Error: Invalid URI "//localhost:3001/login"]

This fails some tests in the application, but tested browsers (chrome and mozilla) do not complain.