Learning Node.js, Express, and Jade.

I spent most of today trying to come up with a sample site that I would be happy to have live on the Internet.

The work in progress is at https://github.com/FinVamp1/NodeGIT and I am happy with what I’ve done today.

To set the scene I should explain that in order to demonstrate the GIT Integration that is included in Windows Azure Web Sites I have a dummy Node.js site that I store on GitHub.

I can then show the workflow where I edit the site locally in WebMatrix and then commit the changes up to GitHub and then onto Windows Azure Web Sites.

Here’s the view of the default route.

h1= title
p Welcome to #{title}

I knew I wanted to extend this into a proper web site and so I did some reading on the Jade View Engine and decided I wanted to use the layouts and blocks support as discussed in this link.

http://www.devthought.com/code/use-jade-blocks-not-layouts/

The issue with this approach is that the default site comes with Express 2.5.7 and the Blocks and sections comes up with Express 3.

So I decided to upgrade to Express 3.

This was relatively pain-free as I just needed to pop out to the command line and run this command.
”npm install express@latest –save”

This upgraded both my Express configuration and saved the package changes.

Then I should be ready to go, right?

Well first I needed to update my version of Node.js on my dev machine to the latest to support Express 3.

Then I needed to edit my Server.Js as the Express() is a JavaScript function and app.Address is no longer present.

So I changed from

var app = module.exports = express.createServer();

var app = express();

and commented out the line with the calls to app.address etc.

//console.log(“Express server listening on port %d in %s mode”, app.address().port, app.settings.env);

Then I was ready to go.

I could now have a layout like this with all my main areas and just extend that on each of the pages

E.G

Layout
!!!5
html
head
    title #{title}
    link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body
     .container
       .header
        include header
    .container
      .main-content
        block content
      .sidebar
        block sidebar
    .container
      .footer
        include footer

Extended Home Page.
extends layout
block content
   h2 About Me
   a(href=”http://blogs.msdn.com/finbar_ryan”, title=”Work Blog”) My Work Blog.
   br
   a(href=”http://www.finbarrsweb.com”, title=”Personal Blog”) My Personal Blog.
block sidebar
     h2 Social Media
     p
     a(href=”https://twitter.com/FinVamp1″, title=”My Twitter”) Find me on Twitter.
     br
     a(href=”https://www.facebook.com/finbar.ryan”, title “My Facebook”) Find me on Facebook.
     br
     a(href=”http://uk.linkedin.com/pub/finbar-ryan/10/717/b44″, title=”My LinkedIn”) Find me on LinkedIn.

Note: You’ll also see that I used include which gives me the flexibility of having a Header and Footer with the content defined in jade files of those names.

Resources.

Nicola Hibbert and her migration blog.
http://nicolahibbert.com/migrating-to-expressjs-v3/

The Express Wiki on Migration.
https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

Jade Node Template Engine
http://jade-lang.com/

ExpressJS App Framework
http://expressjs.com/

Node.js Home Page
http://www.nodejs.org/

Jaspreet Chahal’s Tutorial Post
http://jaspreetchahal.org/build-a-javascript-compressor-tool-using-nodejs-expressjs-jade-uglifyjs-tutorial/

Ben Gourley’s Tutorial Post.
http://www.verious.com/tutorial/a-simple-website-in-node-js-with-express-jade-and-stylus/