Node using Jade Templates with Express

After my first article on Node – My First Node Application – I setup and installed the Node server as well as the Express add-on package.  In today’s article, I’m going to expand on that by creating actual output.  In my research and comparison, Jade templates look quite nice.

Let’s be honest, anything that can simplify the mundane typing of HTML code and let me output my content faster is a win-win in my books!

Let’s get started.

To begin using Jade jQuery template, it must be added via the package manager – just like we did with Express in the first post.  Inside of a command prompt, type the following:

[code]
npm install jade
[/code]

If you didn’t follow the previous article, be sure you have installed Express as well:

[code]
npm install express
[/code]

Before moving on, it’s important to understand the directory structure of Express-based applications:

• <root>
  • app.js
  • public
    • js
    • css
    • images
• routes
  • index.js
• views
  • partials
    • menu.jade
  • index.jade
  • layout.jade

The public directory is for storing your static files, such as public facing JavaScript, CSS files, and images.  The routes directory is similar to a controllers directory in a standard MVC application.  The JavaScript files in here typically perform the variety of processing that must be performed.  The final folder is views, this contains the Jade template files.  There is also a sub folder called partials that also stores Jade templates, they difference is partial views are typically inserted into multiple views.

At the very root of the site is a single file called app.js.  This is typically the default JavaScript file that is used to start-up your web server.

Let’s begin by creating this file now:

[code]
var express = require(‘express’), jade = require(‘jade’);
var app = express();

app.set(‘views’, __dirname + ‘/views’);
app.set(‘view engine’, ‘jade’);

app.get(‘/’, function(req, res) {
res.render(‘index.jade’, {
pageTitle: ‘Test’,
layout: true
});
});
app.listen(8000);
[/code]

To begin with, both Express and Jade are included and configured.  Next a route is created for the default page in the site (/).  Inside of this function, I am calling the res.render() function that tells the Express engine to render my index.jade template.  I’ve also passed a variable called pageTitle to the view and finally I set layout to true.  This will cause Express to load my layout.jade file and include the index.jade within it.

In the next two examples, I am going to create extremely simple jade files: views/layout.jade and views/index.jade.

I’ll start with the layout first:

[code]
!!! 5
html(lang+”en”)
head
title= pageTitle
body
h1 Test
block content
[/code]

Lots of funny things going on above – the short of it is, I’m creating a web page with the doctype set to HTML5, setting the title of the page to the variable I passed in called pageTitle.  The final line of code block content is where my index.jade output code will be placed.

The index file is much simpler as I don’t need to recreate the header and body of my HTML page in this file:

[code]
extends layout

block content
h2 Welcome
[/code]

The first line of this function indicates to Express and this file is extending my previously created layout file.  And finally, the mysterious block content is used again.  Anything beneath will be displayed inside of the web page that I previously defined in my layout.

That completes this brief introduction into the Jade templating system.  My goals for future Node articles are to attempt to recreate some previous work I’ve done in other languages to help demonstrate the true difference in development.