Up and running with Express

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:

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

Too easy!

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

Punch in the following few lines:

and run the app from the terminal like so:

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:

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

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:

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

and /views/index.haml:

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…

7 thoughts on “Up and running with Express

  1. 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).

  2. 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?

  3. it looks like a toy because there is yet another way for one to start a webserver and write a “Hello world!”

  4. I’m a little confused about your directory structure. Could you explain the association between /public, /views and {locals: locals}

  5. 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.

  6. 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

    1. 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 :))

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.