express – mookid on code

Now, this one might be obvious if you’re experienced with Node.js and Express, but it took me a while to figure out… therefore, so I know where to look the next time I forget it, and as a service to people Googleing in frustration; without further ado:

How to make Express render flash messages

First: Realize that flash messages are messages that are stored on the server for the duration between two requests from the same client, and thus are only available in the next request :D. Don’t try to req.flash(...) stuff and expect it to be available when render ing the view immediately after… (yeah, I did that for some time – pretty stupid, I know)… the locals object is how you do that.

Next: You need to make sure that the cookie decoder and session middleware are active:

var app = require('express').createServer();

app.configure(function() {
	// (...)
	app.use(express.cookieDecoder());
	app.use(express.session());
});

var app = require('express').createServer();

app.configure(function() {

// (...)

app.use(express.cookieDecoder());

app.use(express.session());

});

Then: To store messages to be shown in the next request:

app.post('/someUrl', function(req, res) {
	req.flash('info', 'Hello there!);
	req.flash('error', "OH NOES!!!11")
	res.redirect('back');
});

app.post('/someUrl', function(req, res) {

req.flash('info', 'Hello there!);

req.flash('error', "OH NOES!!!11")

res.redirect('back');

});

Note how nifty the PRG pattern can be implemented with Express. Note also that flash supports formatters, where the default supports %s and _, e.g.

req.flash('info', 'You have added _%s items_ to your shopping cart.', count);

1	req.flash('info', 'You have added _%s items_ to your shopping cart.', count);

resulting in something like this (with jQuery UI for formatting):

Last: When handling the next request, the flash messages are available in an object that can be retrieved only once by calling flash with no arguments on the request:

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

app.get('/', function(req, res) {

res.render('index', {locals: {flash: req.flash()}});

});

Now, having passed the flash object to my view, I can do this in my HAML view:

:if typeof flash != 'undefined'
  :if flash.error
    %span.error= flash.error
  :if flash.info
    %span.info= flash.info

:if typeof flash != 'undefined'

:if flash.error

%span.error= flash.error

:if flash.info

%span.info= flash.info

where the preliminary :if typeof flash != 'undefined' ensures that we don’t get errors if we haven’t transferred the flash object to the locals object.

The only annoying thing is that we need to remember to transfer the flash object in each request handler. I set out to write a piece of Node.js middleware that handled this, and I thought it was going pretty well until I realized that the middleware was executed in the wrong place. I haven’t found out if there’s an appropriate hook that can do this, so if anyone knows, please tell me :).

This is the third post in a small series on Node.js. In this post, I will take a look at how to get up and running with Express.

Let’s get Express installed – first, let’s install NPM – a package manager for Node:

curl http://npmjs.org/install.sh | sh

1	curl http://npmjs.org/install.sh \| sh

That was easy. Now, Express can installed like this:

npm install express

1	npm install express

Too easy!

Now, let’s create a simple app like we did the last time:

cd ~
mkdir Projects/HelloExpress
cd Projects/HelloExpress
mate app.js

cd ~

mkdir Projects/HelloExpress

cd Projects/HelloExpress

mate app.js

Punch in the following few lines:

var express = require('express');
var app = express.createServer();

app.get('/', function(req, res){
    res.send('Hello Express!');
});

app.listen(3000);

var express = require('express');

var app = express.createServer();

app.get('/', function(req, res){

res.send('Hello Express!');

});

app.listen(3000);

and run the app from the terminal like so:

node app.js

1	node app.js

and navigate to http://localhost:3000 – on my machine it looked like this:
Hello Express

That was easy. See how the API pretty much resembles Node’s builtin HTTP server, except it adds routes into the mix!

Now, in order to build a web site we need some kind of view engine to help generate some HTML for us. I have used Haml a couple of years ago, and I really liked it… and luckily, some nice people have made Haml available to Node apps, so let’s try installing that:

npm install haml

1	npm install haml

Now we configure Express by punching in the following stuff in the app:

app.configure(function() {
	app.set('view engine', 'haml');
	app.use(express.staticProvider(__dirname + '/public'));
	app.use(express.bodyDecoder());
});

app.configure(function() {

app.set('view engine', 'haml');

app.use(express.staticProvider(__dirname + '/public'));

app.use(express.bodyDecoder());

});

As you can see, I tell Express to use Haml as the default view engine. Moreover, I configure Express to serve static content from the /public folder in my app dir, and then I install the bodyDecoder middleware which will parse incoming posts and make posted values available in req.body.

Now, let’s alter our action to render a view:

app.get('/', function(req, res){
    var locals = {message: 'Express + Haml!!!!'};
    res.render('index', {locals: locals});
});

app.get('/', function(req, res){

var locals = {message: 'Express + Haml!!!!'};

res.render('index', {locals: locals});

});

and now create two files, layout.haml and index.haml in the /views folder. Mine look like this – /views/layout.haml:

!!!
%html
  %head
    %title Hello Express + Haml!
  %body
    = body

!!!

%html

%head

%title Hello Express + Haml!

%body

= body

and /views/index.haml:

%p
  Hello 
  = message

Hello

= message

Now, let’s go to the terminal and node app.js and navigate to http://localhost:3000 – on my computer it looks like this:
Hello Express + Haml

As you can see, view models can be handed to the view via the locals object.

This was some basic web app stuff – only thing missing is some way to persist data, so next time I will take a look at how to get my Mongo on…

Category: express

Getting Express to show flash messages

How to make Express render flash messages

Up and running with Express