Express is a commonly used framework for building web applications with Node. This lab demonstrates how to structure a simple Express application.

Express requires a little configuration to get started. To start, let's focus on serving a static HTML page. This won't require any add-ons to Express or complicated configuration.

Create a new directory for this lab. We'll need to install the Express NPM module. To start this process generate a package.json file using the following command from the new directory:

{% highlight bash %}

npm init {% endhighlight %}

Run through the prompts supplying whatever values you like. Follow that up with installing the Express module:

{% highlight bash %}

npm install express --save {% endhighlight %}

This will add the Express module to your package.json file (because you provided --save). This will allow you to simply type npm install in the future to pull down the necessary dependencies to start the application.

Now, create a file called server.js -- this file will bootstrap our Express based application.

Here's the simplest application:

{% highlight javascript %} var express = require('express'); var app = express();

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

app.listen(3000); {% endhighlight %}

Now to start the server simply run the following command and browse to http://localhost:3000/.

{% highlight bash %}

node server.js {% endhighlight %}

Alright, so we're responding to every request for the root path with Hello World!, now let's introduce a templating engine.

A popular template engine of choice is Jade. To add Jade functionality let's install the module and save it to the package.json file.

{% highlight bash %}

npm install jade --save {% endhighlight %}

Now that the module is installed we need to configure Express to use it to render our views. This is done by using the app.engine function.

{% highlight javascript %} var express = require('express'); var app = express();

app.engine('jade', require('jade').__express);

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

app.listen(3000); {% endhighlight %}

At this point we need to add a directory called views and create a file called index.jade with the following contents:

{% highlight javascript %} html head title The page title body Hello world from Jade! {% endhighlight %}

Now let's push some data to the view. This can be done by passing a second argument to the render call in server.js.

{% highlight javascript %} var express = require('express'); var app = express();

app.engine('jade', require('jade').__express);

app.get('/', function (req, res) { res.render('index.jade', {name: 'Joe'}); });

app.listen(3000); {% endhighlight %}

Now let's make use of this object in index.jade. Take note of the = character. This allows you to print the value on the right hand side to the page.

{% highlight javascript %} html head title The title goes here! body p Hello h2= name {% endhighlight %}

There's a lot more to learn about Jade and Express. Visit their respective sites to learn more.