Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio

If you’re looking for Part 2…

Alright, diving right in. First, get an express.js application setup and install all the dependencies.

Creating the Express.js Web Application

$ express codingWall

   create : codingWall
   create : codingWall/package.json
   create : codingWall/app.js
   create : codingWall/public
   create : codingWall/public/javascripts
   create : codingWall/public/images
   create : codingWall/public/stylesheets
   create : codingWall/public/stylesheets/style.css
   create : codingWall/routes
   create : codingWall/routes/index.js
   create : codingWall/views
   create : codingWall/views/layout.jade
   create : codingWall/views/index.jade

   dont forget to install dependencies:
   $ cd codingWall && npm install

$ cd codingWall/
$ npm install
npm http GET https://registry.npmjs.org/express/2.5.8
npm http GET https://registry.npmjs.org/jade
npm http 200 https://registry.npmjs.org/express/2.5.8
npm http GET https://registry.npmjs.org/express/-/express-2.5.8.tgz
npm http 200 https://registry.npmjs.org/jade
npm http 200 https://registry.npmjs.org/express/-/express-2.5.8.tgz
npm http GET https://registry.npmjs.org/mime/1.2.4
npm http GET https://registry.npmjs.org/mkdirp/0.3.0
npm http GET https://registry.npmjs.org/qs
npm http GET https://registry.npmjs.org/connect
npm http GET https://registry.npmjs.org/commander/0.5.2
npm http 200 https://registry.npmjs.org/qs
npm http 200 https://registry.npmjs.org/mkdirp/0.3.0
npm http GET https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz
npm http 200 https://registry.npmjs.org/mime/1.2.4
npm http GET https://registry.npmjs.org/mime/-/mime-1.2.4.tgz
npm http 200 https://registry.npmjs.org/commander/0.5.2
npm http GET https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
npm http 200 https://registry.npmjs.org/connect
npm http 200 https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.0.tgz
npm http 200 https://registry.npmjs.org/mime/-/mime-1.2.4.tgz
npm http 200 https://registry.npmjs.org/commander/-/commander-0.5.2.tgz
npm http GET https://registry.npmjs.org/formidable
npm http 200 https://registry.npmjs.org/formidable
jade@0.26.0 ./node_modules/jade
├── commander@0.5.2
└── mkdirp@0.3.0
express@2.5.8 ./node_modules/express
├── qs@0.4.2
├── mime@1.2.4
├── mkdirp@0.3.0
└── connect@1.8.7
$

Next get a basic app with a message built. This will make sure all the Jade, Express.js and of course Node.js bits are all installed and running.

$ node app.js

Build The UI With Jade Templates

At this point you should be able to navigate to http://localhost:3000 in a browser and view the default express.js web app. So now let’s add something relevant to the page. First, I’m just going to stick my name on the page in the index.jade file. My method for editing the file is usually to just use a text editor such as TextMate.

$ mate views/index.jade

There isn’t really a whole lot to the file yet. One thing you’ll notice though, is the Jade Templating.

h1= title
p Welcome to #{title}

This might seem strange at first, but here’s an example of the HTML mess we normally see and then the same thing cleaned up. So here’s the some HTML goo…

<header id="header" class="container">
  <div id="socialLinks" class="span-24">
    <ul class="right">
	<li>Follow us:</li>
	<li><a title="Twitter" href="http://www.twitter.com" target="_blank"><img src="images/Twitter_32x32.png" alt="" /></a></li>
	<li><a title="Facebook" href="http://www.facebook.com" target="_blank"><img src="images/Facebook_32x32.png" alt="" /></a></li>
    </ul>
</div>
<div id="titleContent" class="span-24">
<div id="textLogo">
  <a title="GoldMind" href="/">
    <span id="companyName">GoldMind</span>
  </a>
</div>
  <span id="textLogoSubtitle">What do you have to learn?</span></div>
</header>

…and the Jade Template of the same.

header.container#header
  div.span-24#socialLinks
    ul.right
      li Follow us:
      li
        a(href='http://www.twitter.com')
          | <img src="images/Twitter_32x32.png" alt="" />
      li
        a(href='http://www.facebook.com')
          | <img src="images/Facebook_32x32.png" alt="" />
  div.span-24#titleContent
    div#textLogo
      a(href='/', title='GoldMind')
        span#companyName GoldMind
    span#textLogoSubtitle What do you have to learn?

Much shorter, much cleaner, and lots less noise when one yanks away all the repetitive chevrons. Now that we’ve looked at an example of nasty HTML and clean Jade, let’s step through how to get certain markup with Jade.

The first thing to note is that each tag is indented below the tag it is included within. That’s how things are nested in Jade, and intelligently, no closing tag is needed. But what if you need the id or class added to the tag. That’s also extremely easy. To add the id just add a hash between the tag and the id parameter like this.

div#theIdName

For a class added to the tag.

div.className

To add both an id and a class.

div.className#theIdName

If you open up the layout.jade file you’ll fine some other parts of the Jade Templating I haven’t covered, variables. In the layout.jade file you’ll find the following code.

!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body

The title is set to title. Which is actually set in the index.js file. The index.js file has the routing functions that are called from the app.js file that launches the web application. Looking in the index.js file you’ll find the value that is passed in as the title. Change that to something custom for our app example. I changed mine as follows.

exports.index = function(req, res){
  res.render('index', { title: "Adron's Coder Portfolio Site" })
};

Also, to get a little closer to the HTML5 Spec, I changed the layout.jade page as follows.

doctype 5
html(lang="en")
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body!= body

With those two changes we should have a custom message that is processed and also HTML5 compliance. Be sure to kill node.js if it is still running and restart it so all the changes are taken into account.

Mashing it Up!

Now it is time to mash this CoderWall & Geekli.st stuff up, but alas, that’s coming in the NEXT blog entry. Stay tuned, I’ll have it up in the morning!

Added: Part 2