Flash messaging in Express 4: express-flash vs. custom middleware in ejs, handlebars, or jade

readme.md

Flash Messages Flash messaging in Express can be confusing to the newcomer. I know because I am a newcomer. The confusion tends to arise from the distinction between the concept of flash messaging, a temporary message from the server available to templates, and the various implementations of flash messaging, which include express-flash and other modules. This Gist provides a minimal example of 2 approaches to flash messaging, the express-flash module and custom middleware, using 3 common templating engines.

The express-flash module exposes getter and setter methods for a flash message of the form, { flash: { type: 'type', message: 'message' }} and depends on the express-session module. The method req.flash(type, message) sets the value of a new flash message and adds it to an array of messages of the same type. The method req.flash(type) gets the value of all flash messages matching of the same type and returns either a string value for the message if there is only 1 of that type, or an array of string values for messages matching that type. The flash messages have a lifetime of one request and are deleted afterward.

The custom middleware is lifted with modifications from Ethan Brown's excellent book, Web Development with Node & Express, and depends on the express-session module. In it, the res.locals context is used to store flash messages across the lifetime of a single request, and the req.session context is used to set and expire those messages. As in the express-flash module, these flashes take the form, { flash: { type: 'type', message: 'message' }}, but here one could add additional fields to the flash object without breaking the middleware. Additionally, the flash.type property is available to templates without additional logic, whereas req.flash(type) only exposes the message string.

app.js

var express = require('express');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var flash = require('express-flash');

var app = express();

app.use(cookieParser('secret'));
app.use(session({ cookie: { maxAge: 60000 }}));
app.use(flash());

// Custom flash middleware -- from Ethan Brown's book, 'Web Development with Node & Express'
app.use(function(req, res, next){
    // if there's a flash message in the session request, make it available in the response, then delete it
    res.locals.flash = req.session.flash;
    delete req.session.flash;
    next();
});

// Route that creates a flash message using the express-flash module
app.all('/express-flash', function( req, res, next ) {
    req.flash('success', 'This is a flash message using the express-flash module.');
    res.redirect(301, '/');
    next();
});

// Route that creates a flash message using custom middleware
app.all('/custom-flash', function( req, res, next ) {
    req.session.flash = {
        type: 'success',
        message: 'This is a flash message using custom middleware and express-session.'
    }
    res.redirect(301, '/');
    next();
});

// Route that incorporates flash messages from either req.flash(type) or res.locals.flash
app.get('/', function( req, res, next ) {
    res.render('index', { expressFlash: req.flash('success'), customFlash: res.locals.flash });
    next();
});

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log('Flash app listening at http://%s:%s', host, port);
});

module.exports = app;

index.ejs

<h3> Flash messages in Express 4 </h3>
<% if ( expressFlash ) { %>
  <p>Flash message using the express-flash module: <%= expressFlash %></p>
<% } %>

<% if ( customFlash ) { %>
  <div class="<%= sessionFlash.type %>">
    Flash message using custom middleware: <%= sessionFlash.message %>
  </div>
<% } %>

index.handlebars

<h3> Flash messages in Express 4 </h3>
{{ #if expressFlash }}
  <p>Flash message using the express-flash module: {{ expressFlash }}</p>
{{ /if }}
{{ #if sessionFlash }}
  <div class="{{ sessionFlash.type }}">
    Flash message using custom middleware: {{ sessionFlash.message }}
  </div>
{{ /if }}

index.jade

block content
  h3= Flash messages in Express 4
  if expressFlash
    p Flash message using the express-flash module: #{ expressFlash }
  if sessionFlash
    div (class=#{ sessionFlash.type })
      Flash mess