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:
|
1 |
curl http://npmjs.org/install.sh | sh |
That was easy. Now, Express can installed like this:
|
1 |
npm install express |
Too easy!
Now, let’s create a simple app like we did the last time:
|
1 2 3 4 |
cd ~ mkdir Projects/HelloExpress cd Projects/HelloExpress mate app.js |
Punch in the following few lines:
|
1 2 3 4 5 6 7 8 |
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:
|
1 |
node app.js |
and navigate to http://localhost:3000 – on my machine it looked like this:
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:
|
1 |
npm install haml |
Now we configure Express by punching in the following stuff in the app:
|
1 2 3 4 5 |
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:
|
1 2 3 4 |
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:
|
1 2 3 4 5 6 |
!!! %html %head %title Hello Express + Haml! %body = body |
and /views/index.haml:
|
1 2 3 |
%p 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:
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…
Very nice, but can node.js and express.js be used to develop a full fledged web application?
It looks very easy to make it work, but so far it looks only like a new toy (instead of a tool).
Good question – and I think the answer depends very much on what you mean by “full-fledged web application”…
If your requirement is to serve web requests at incredible speed, rendering HTML and JSON, pulling data from e.g. MySQL or MongoDB, then I think Express definitely looks like a viable choice – especially if you are not a foreigner to web technologies like HTML and JavaScript.
I should note, however, that I have no experience whatsoever in actually using Node.js or Express.
What do you mean when you say it looks like a toy?
it looks like a toy because there is yet another way for one to start a webserver and write a “Hello world!”
I’m a little confused about your directory structure. Could you explain the association between /public, /views and {locals: locals}
My directory structure is pretty simple – it’s organized like this: m8.is on GitHub.
The views folder is where HAML by default goes to look for views. So when I response.render('index'), it goes looking for views/index.haml. Passing an object {locals: {headline: 'Hello world!'}} is how you make data available to the view – i.e. in the view, I can write HAML like this: %h1= headline to render “Hello world!” inside <h1>.
The public folder is made available to be served directly with app.use(express.staticProvider(__dirname + '/public')) – i.e. a web request for /public/css/style.css will result in the contents of that files being streamed directly in the response.
New to node and appreciate/enjoying your articles.
I could not get haml parsing my templates (I’m on Win XP using cygwin – I’ll have to get onto a POSIX OS soon) – thought it was tab/space indent issue but no luck. Eventually I switched to jade as TJ bills this as haml successor (http://jade-lang.com/) and it worked first time.
Many thanks
Thank you for your comment 🙂
I’ve been meaning to check out Jade as well, but I just have this old crush on Haml (or maybe I’m just being lazy :))