ExpressJS, Jade and Twitter Bootstrap

I've started using ExpressJS and in order to learn more about Express and how to develop with it I've started a small project. Instead of creating a Todo app I'm making a small contacts manager, which I hope to grow over the next few weeks to incorporate a MongoDB backend, but for now I'm starting with a very basic shell.

For this project I've decided to use Twitter Bootstrap as the front-end framework (I love Twitter Bootstrap), but the first problem I came was how to add Bootstrap to a Jade template Express app. Well thankfully it is really straight forward to do.

The first thing you do is download Bootstrap. The latest version has a nice clean download, that contains the very basics that you need for creating a Bootstrap app, it just contains the CSS, JavaScript and images needed.

Once that is downloaded you need to create your Express app. To do this you have Node installed then use NPM to install Express. Ray Camden has a great intro to Express that is well worth checking out.

With Express installed all you need to do next is navigate to your working directory, create a folder for your app. Then inside this folder you need to create a package.json file (I have to be honest this seemed a bit odd to me, the first thing you create is this json file).

Within this JSON file you set what the apps dependencies are, for example Express is a dependency. Then from within this folder, in terminal if you run npm install Node goes through your list of dependencies and installs those (as well as there dependencies, which is awesome).

With the Express app setup, you'll find that there is a 'views' folder, and within that there are two files index and layout.jade.

As far as I can see layout.jade is, as it says, the layout for the site and index.jade is the intro/first page of the site (all pages get their layout from layout.jade).

It's within layout.jade that the links to the Twitter Bootstrap css and JavaScript files are made. This is my layout page for my contact manager app:

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/javascripts/bootstrap.min.css')
  body
    block content

So this is a quick overview of how to add Twitter Bootstrap to a Express app. Now I'm looking further into Jade, something I haven't used before.