Composite Thrashing Code Adron's success in misadventures of thrashing coding and calamity! 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

[sourcecode language=”bash”]
$ 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

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.

[sourcecode language=”bash”]
$ node app.js
[/sourcecode]

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.

[sourcecode language=”bash”]
$ mate views/index.jade
[/sourcecode]

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

[sourcecode language=”vb”]
h1= title
p Welcome to #{title}
[/sourcecode]

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…

[sourcecode language=”html”]
<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>
[/sourcecode]

…and the Jade Template of the same.

[sourcecode language=”vb”]
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?
[/sourcecode]

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.

[sourcecode language=”vb”]
div#theIdName
[/sourcecode]

For a class added to the tag.

[sourcecode language=”vb”]
div.className
[/sourcecode]

To add both an id and a class.

[sourcecode language=”vb”]
div.className#theIdName
[/sourcecode]

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.

[sourcecode language=”vb”]
!!!
html
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

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.

[sourcecode language=”javascript”]
exports.index = function(req, res){
res.render(‘index’, { title: "Adron’s Coder Portfolio Site" })
};
[/sourcecode]

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

[sourcecode language=”html”]
doctype 5
html(lang="en")
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
body!= body
[/sourcecode]

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

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

Creating the Express.js Web Application

Build The UI With Jade Templates

Mashing it Up!

Like this:

Published by Adron

4 thoughts on “Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio”

Creating the Express.js Web Application

Build The UI With Jade Templates

Mashing it Up!

Share this:

Like this:

Published by Adron

4 thoughts on “Building a Node.js + Express.js + Jade CoderWall + Geekl.st Portfolio”