Skip to content

Instantly share code, notes, and snippets.

@ankur-anand

ankur-anand/flash-app.js

Forked from brianmacarthur/flash-app.js
Created September 19, 2017 19:03
Download ZIP

Revisions

  1. @brianmacarthur brianmacarthur renamed this gist Dec 21, 2015. 1 changed file with 0 additions and 0 deletions.
    0 app.js → flash-app.js
    View file
    File renamed without changes.
  2. @brianmacarthur brianmacarthur revised this gist Jan 31, 2015. 3 changed files with 26 additions and 12 deletions.
    8 changes: 6 additions & 2 deletions index.ejs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,14 @@
    <h3> Flash messages in Express 4 </h3>
    <p><a href="http://localhost:3000/express-flash">Click here</a> for a flash message using the express-flash module.</p>
    <p><a href="http://localhost:3000/session-flash">Click here</a> for a flash message using custom middleware</p>
    <p>Refresh to clear the flash message.</p>

    <% if ( expressFlash.length > 0 ) { %>
    <p>Flash message using the express-flash module: <%= expressFlash %></p>
    <p><strong>FLASH!</strong> <%= expressFlash %></p>
    <% } %>

    <% if ( sessionFlash && sessionFlash.message) { %>
    <div class="<%= sessionFlash.type %>">
    Flash message using custom middleware: <%= sessionFlash.message %>
    <strong>FLASH!</strong> <%= sessionFlash.message %>
    </div>
    <% } %>
    13 changes: 9 additions & 4 deletions index.handlebars
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,14 @@
    <h3> Flash messages in Express 4 </h3>
    <p><a href="http://localhost:3000/express-flash">Click here</a> for a flash message using the express-flash module.</p>
    <p><a href="http://localhost:3000/session-flash">Click here</a> for a flash message using custom middleware</p>
    <p>Refresh to clear the flash message.</p>

    {{#if expressFlash}}
    <p>Flash message using the express-flash module: {{ expressFlash }}</p>
    <p><strong>FLASH!</strong> {{ expressFlash }}</p>
    {{/if}}

    {{#if sessionFlash.message}}
    <div class="{{ sessionFlash.type }}">
    Flash message using custom middleware: {{ sessionFlash.message }}
    </div>
    <div class="{{ sessionFlash.type }}">
    <strong>FLASH!</strong> {{ sessionFlash.message }}
    </div>
    {{/if}}
    17 changes: 11 additions & 6 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,12 @@
    block content
    h3 Flash messages in Express 4
    if expressFlash.length > 0
    p Flash message using the express-flash module: #{ expressFlash }
    if sessionFlash && sessionFlash.message
    div(class=sessionFlash.type)
    p Flash message using custom middleware: #{ sessionFlash.message }
    h3 Flash messages in Express 4
    p <a href="http://localhost:3000/express-flash">Click here</a> for a flash message using the express-flash module.
    p <a href="http://localhost:3000/session-flash">Click here</a> for a flash message using custom middleware
    p Refresh to clear the flash message.

    if expressFlash.length > 0
    p <strong>FLASH!</strong> #{ expressFlash }

    if sessionFlash && sessionFlash.message
    div(class=sessionFlash.type)
    p <strong>FLASH!</strong> #{ sessionFlash.message }
  3. @brianmacarthur brianmacarthur revised this gist Jan 31, 2015. 1 changed file with 0 additions and 6 deletions.
    6 changes: 0 additions & 6 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,12 +36,6 @@ app.all('/express-flash', function( req, res ) {
    res.redirect(301, '/');
    });

    app.all('/test', function(req, res ){
    req.flash('success', 'it worked');
    req.flash('error', 'error example');
    res.redirect('/');
    });

    // Route that creates a flash message using custom middleware
    app.all('/session-flash', function( req, res ) {
    req.session.sessionFlash = {
  4. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 2 changed files with 33 additions and 15 deletions.
    40 changes: 28 additions & 12 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,42 +2,58 @@ var express = require('express');
    var cookieParser = require('cookie-parser');
    var session = require('express-session');
    var flash = require('express-flash');
    var handlebars = require('express-handlebars')

    var app = express();
    var sessionStore = new session.MemoryStore;

    // View Engines
    app.set('view engine', 'jade');
    //app.engine('handlebars', handlebars()); app.set('view engine', 'handlebars');
    //app.set('view engine', 'ejs');

    app.use(cookieParser('secret'));
    app.use(session({ cookie: { maxAge: 60000 }}));
    app.use(session({
    cookie: { maxAge: 60000 },
    store: sessionStore,
    saveUninitialized: true,
    resave: 'true',
    secret: 'secret'
    }));
    app.use(flash());

    // Custom flash middleware -- adapted from Ethan Brown's book, 'Web Development with Node & Express'
    // 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;
    res.locals.sessionFlash = req.session.sessionFlash;
    delete req.session.sessionFlash;
    next();
    });

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

    app.all('/test', function(req, res ){
    req.flash('success', 'it worked');
    req.flash('error', 'error example');
    res.redirect('/');
    });

    // Route that creates a flash message using custom middleware
    app.all('/custom-flash', function( req, res, next ) {
    req.session.flash = {
    app.all('/session-flash', function( req, res ) {
    req.session.sessionFlash = {
    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'), sessionFlash: res.locals.flash });
    next();
    app.get('/', function( req, res ) {
    res.render('index', { expressFlash: req.flash('success'), sessionFlash: res.locals.sessionFlash });
    });

    var server = app.listen(3000, function () {
    8 changes: 5 additions & 3 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -3,12 +3,14 @@ Flash messaging in Express can be confusing to the newcomer. I know because I am

    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, `res.locals.flash` acts as a the getter and `req.session.flash` acts as the setter for messages with a lifetime of one request. As in the `express-flash` module, these flashes take the form, `{ type: 'type', message: 'message' }`, but only do so to follow established convention. They could as easily take the form, `{ class: 'class', intro: 'intro', text: 'text' }` and be exposed via `res.locals.flashMessages` and `req.session.flashMessages`.
    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, `res.locals.sessionFlash` acts as a the getter and `req.session.sessionFlash` acts as the setter for messages with a lifetime of one request. As in the `express-flash` module, these flashes take the form, `{ type: 'type', message: 'message' }`, but only do so to follow established convention. They could as easily take the form, `{ class: 'class', intro: 'intro', text: 'text' }` and be exposed via `res.locals.myFlashMessages` and `req.session.myFlashMessages`.

    There are a couple of important distinctions between the 2 approaches illustrated above.

    First, the custom middleware option exposes all of the properties of the flash object, not just the message. So `sessionFlash.type` and `sessionFlash.message` are both available to the templates above just by including the `sessionFlash` value, whereas the `expressFlash` message `type` would have to have been explicitly specified in `app.js` and passed as a separate value, `expressFlashType`, to the template.
    First, the custom middleware option exposes all of the properties of the flash object, not just the message. So `sessionFlash.type` and `sessionFlash.message` are both available to the templates above just by including the `sessionFlash` value, whereas the `expressFlash` message `type` would have to have been explicitly specified in `app.js` and passed as a separate value, ie `expressFlashType`, to the template.

    Second, the custom middleware does not include a mechanism for adding multiple messages of the same type to an array. As it is written, `res.locals.flash` and `req.session.flash` are single occupancy variables.
    Second, the custom middleware does not include a mechanism for adding multiple messages of the same type to an array. As it is written, `res.locals.sessionFlash` and `req.session.sessionFlash` are single occupancy variables.

    Of note, `res.locals.flash` and `req.session.flash` can be used in the custom middleware above, but I chose different targets to avoid collision with the `express-flash` messages.

    Both approaches offer simple mechanisms for passing temporary messages to the browser. Which one of the many options you choose depends on your needs. I hope this has been helpful.
  5. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.ejs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    <h3> Flash messages in Express 4 </h3>
    <% if ( expressFlash ) { %>
    <% if ( expressFlash.length > 0 ) { %>
    <p>Flash message using the express-flash module: <%= expressFlash %></p>
    <% } %>

  6. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 3 changed files with 16 additions and 16 deletions.
    10 changes: 5 additions & 5 deletions index.ejs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    <h3> Flash messages in Express 4 </h3>
    <% if ( expressFlash ) { %>
    <p>Flash message using the express-flash module: <%= expressFlash %></p>
    <p>Flash message using the express-flash module: <%= expressFlash %></p>
    <% } %>

    <% if ( customFlash ) { %>
    <div class="<%= sessionFlash.type %>">
    Flash message using custom middleware: <%= sessionFlash.message %>
    </div>
    <% if ( sessionFlash && sessionFlash.message) { %>
    <div class="<%= sessionFlash.type %>">
    Flash message using custom middleware: <%= sessionFlash.message %>
    </div>
    <% } %>
    16 changes: 8 additions & 8 deletions index.handlebars
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,9 @@
    <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 }}
    {{#if expressFlash}}
    <p>Flash message using the express-flash module: {{ expressFlash }}</p>
    {{/if}}
    {{#if sessionFlash.message}}
    <div class="{{ sessionFlash.type }}">
    Flash message using custom middleware: {{ sessionFlash.message }}
    </div>
    {{/if}}
    6 changes: 3 additions & 3 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    block content
    h3 Flash messages in Express 4
    if expressFlash
    if expressFlash.length > 0
    p Flash message using the express-flash module: #{ expressFlash }
    if sessionFlash
    if sessionFlash && sessionFlash.message
    div(class=sessionFlash.type)
    Flash message using custom middleware: #{ sessionFlash.message }
    p Flash message using custom middleware: #{ sessionFlash.message }
  7. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 2 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@ app.all('/custom-flash', function( req, res, 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 });
    res.render('index', { expressFlash: req.flash('success'), sessionFlash: res.locals.flash });
    next();
    });

    4 changes: 2 additions & 2 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    block content
    h3= Flash messages in Express 4
    h3 Flash messages in Express 4
    if expressFlash
    p Flash message using the express-flash module: #{ expressFlash }
    if sessionFlash
    div (class=#{ sessionFlash.type })
    div(class=sessionFlash.type)
    Flash message using custom middleware: #{ sessionFlash.message }
  8. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions package.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    {
    "dependencies": {
    "cookie-parser": "~1.3.3",
    "express": "~4.11.1",
    "express-flash": "0.0.2",
    "express-session": "^1.10.1",
    "jade": "~1.9.1",
    "express-handlebars": "1.1.0",
    "ejs": "2.2.3"
    }
    }
  9. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -9,7 +9,7 @@ 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'
    // Custom flash middleware -- adapted 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;
  10. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,14 @@
    **Flash Messages**
    # 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, `res.locals.flash` acts as a the getter and `req.session.flash` acts as the setter for messages with a lifetime of one request. As in the `express-flash` module, these flashes take the form, `{ type: 'type', message: 'message' }`, but only do so to follow established convention. They could as easily take the form, `{ class: 'class', intro: 'intro', text: 'text' }` and be exposed via `res.locals.flashMessages` and `req.session.flashMessages`.

    There are a couple of important distinctions between the 2 approaches illustrated above. First, the custom middleware option exposes all of the properties of the flash object, not just the message. So `sessionFlash.type` and `sessionFlash.message` are both available to the templates above just by including the `sessionFlash` value, whereas the express-flash type would have to have been explicitly specified in app.js and passed as a separate value to the template. Second, the custom middleware does not include a mechanism for adding multiple messages of the same type to an array. As it is written, `res.locals.flash` and `req.session.flash` are single occupancy variables.
    There are a couple of important distinctions between the 2 approaches illustrated above.

    First, the custom middleware option exposes all of the properties of the flash object, not just the message. So `sessionFlash.type` and `sessionFlash.message` are both available to the templates above just by including the `sessionFlash` value, whereas the `expressFlash` message `type` would have to have been explicitly specified in `app.js` and passed as a separate value, `expressFlashType`, to the template.

    Second, the custom middleware does not include a mechanism for adding multiple messages of the same type to an array. As it is written, `res.locals.flash` and `req.session.flash` are single occupancy variables.

    Both approaches offer simple mechanisms for passing temporary messages to the browser. Which one of the many options you choose depends on your needs. I hope this has been helpful.
  11. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 2 changed files with 8 additions and 4 deletions.
    2 changes: 1 addition & 1 deletion index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -4,4 +4,4 @@ block content
    p Flash message using the express-flash module: #{ expressFlash }
    if sessionFlash
    div (class=#{ sessionFlash.type })
    Flash mess
    Flash message using custom middleware: #{ sessionFlash.message }
    10 changes: 7 additions & 3 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,10 @@
    **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.
    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 `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.
    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, `res.locals.flash` acts as a the getter and `req.session.flash` acts as the setter for messages with a lifetime of one request. As in the `express-flash` module, these flashes take the form, `{ type: 'type', message: 'message' }`, but only do so to follow established convention. They could as easily take the form, `{ class: 'class', intro: 'intro', text: 'text' }` and be exposed via `res.locals.flashMessages` and `req.session.flashMessages`.

    There are a couple of important distinctions between the 2 approaches illustrated above. First, the custom middleware option exposes all of the properties of the flash object, not just the message. So `sessionFlash.type` and `sessionFlash.message` are both available to the templates above just by including the `sessionFlash` value, whereas the express-flash type would have to have been explicitly specified in app.js and passed as a separate value to the template. Second, the custom middleware does not include a mechanism for adding multiple messages of the same type to an array. As it is written, `res.locals.flash` and `req.session.flash` are single occupancy variables.

    Both approaches offer simple mechanisms for passing temporary messages to the browser. Which one of the many options you choose depends on your needs. I hope this has been helpful.
  12. @brianmacarthur brianmacarthur revised this gist Jan 29, 2015. 5 changed files with 59 additions and 31 deletions.
    61 changes: 33 additions & 28 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,40 +5,45 @@ var flash = require('express-flash');

    var app = express();

    app.use(cookeParser('secret'));
    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();
    // 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();
    });

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

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

    app.get('/', req, res, next ) {
    res.render('index', {expressFlash: req.flash('success'), customFlash: res.locals.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);
    })
    var host = server.address().address;
    var port = server.address().port;
    console.log('Flash app listening at http://%s:%s', host, port);
    });

    module.exports = app;
    7 changes: 4 additions & 3 deletions index.ejs
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,10 @@
    <h3> Flash messages in Express 4 </h3>
    <% if ( expressFlash ) { %>
    <p><%= flash %>
    <p>Flash message using the express-flash module: <%= expressFlash %></p>
    <% } %>

    <% if ( customFlash ) { %>
    <div class="<%= flash.type %>">
    <%= flash.message %>
    <div class="<%= sessionFlash.type %>">
    Flash message using custom middleware: <%= sessionFlash.message %>
    </div>
    <% } %>
    9 changes: 9 additions & 0 deletions index.handlebars
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <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 }}
    7 changes: 7 additions & 0 deletions index.jade
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    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
    6 changes: 6 additions & 0 deletions readme.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    **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.
  13. @brianmacarthur brianmacarthur created this gist Jan 27, 2015.
    44 changes: 44 additions & 0 deletions app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    var express = require('express');
    var cookieParser = require('cookie-parser');
    var session = require('express-session');
    var flash = require('express-flash');

    var app = express();

    app.use(cookeParser('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();
    });

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

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

    app.get('/', 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);
    })
    9 changes: 9 additions & 0 deletions index.ejs
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <% if ( expressFlash ) { %>
    <p><%= flash %>
    <% } %>

    <% if ( customFlash ) { %>
    <div class="<%= flash.type %>">
    <%= flash.message %>
    </div>
    <% } %>