How To Easily Install Bootstrap (2.0) in ExpressJS (3.0)

I’m certainly no expert when it comes to using ExpressJS or Bootstrap so there may be far better ways of doing this than what I detail below, however, if you do know of better ways please let me know as I bumbled my way through!

Here goes.

Prerequisites:

I’m installing this on an Ubuntu 11.10 EC2 micro box and have the following installed:

$ apt-get install node npm make zip unzip git

Process:

Install via NPM the following: ExpressJS, Less & UglifyJS:

$ npm install -g express less uglify-js

Create an ExpressJS working directory, we’ll call it testme, with Less:

$ express --css less testme

Move inside your new directory:

$ cd testme

Create a new directory called vendors:

~/testme$ mkdir vendors

Move inside the vendors directory:

~/testme$ cd vendors

Download from github Bootstrap:

~/testme/vendors$ git clone https://github.com/twitter/bootstrap.git bootstrap

Move into the newly created Bootstrap directory:

~/testme/vendors$ cd bootstrap

Build Bootstrap:

~/testme/vendors/bootstrap$ make -i

You may see a cannot remove docs/assets/bootstrap.zip file – just ignore. It would also be great if you could make to a target directory, but I couldn’t find how this could be done.

Once the build has been completed, move to the docs/assets directory:

~/testme/vendors$ cd bootstrap/docs/assets

You should see a css, img, js folders and a bootstrap.zip file:

~/testme/vendors/bootstrap/docs/assets$ ls

Go back to the testme folder:

~/testme/vendors/bootstrap/docs/assets$ cd ~/testme

Move the bootstrap zip file you just created into your public folder:

~/testme$ mv vendors/bootstrap/docs/assets/bootstrap.zip public

Move to the public folder:

~/testme$ cd public

Unzip the bootstrap.zip file:

~/testme/public$ unzip bootstrap.zip

You should see a bootstrap folder in the public folder

~/testme/public$ ls

Remove the bootstrap.zip file:

$ rm bootstrap.zip

Now it’s a matter of linking to the bootstrap stylesheets in your jade layout template files. Edit the views/layout.jade file to include references to the bootstrap files, remember Bootstrap needs the latest jQuery, so you may want to include reference to this too, here’s what my layout.jade looks like:

!!!
html
head
title= title
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
link(rel='stylesheet', href='/bootstrap/css/bootstrap-responsive.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
script(src='/bootstrap/js/bootstrap.min.js')
body
block content
view raw layout.jade hosted with ❤ by GitHub

To test that it works, edit the views/index.jade file to include a reference that Bootstrap will be able to use, something like:

extends layout
block content
div.top
form.form-horizontal(method="post", id="loginForm")
label Username
input.span3(id="username", type="text", name="User", placeholder="Enter your username")
label Password
input.span3(id="password", type="password", name="Password")
input.btn(type="submit", value="Log In")
div.container
div.content
table.table.table-striped
thead
tr
th Table
th Heading
tbody
tr
td Blah
td Test
tr
td Hello
td World
div.footer
p © 2012 All rights reserved.
view raw index.jade hosted with ❤ by GitHub

There you have it!

Being able to use a compiled Bootstrap file with your ExpressJS install.