I've decided to write this post as a note to myself. I'm still learning Node.js and digging into Express/Jade, but I've read many people using the nice Twitter Bootstrap and I was wondering if there was a way to integrate all these technologies. The short answer is: yes, we can!
Note: once again, I'm not a Node.js expert and surely there are other ways to achieve this task (for example there is a Node.js module called twitter-bootstrap, but I haven't tried it). This tutorial is based on another tutorial I found, but it was not very updated and it had a more complicated way to install Bootstrap, so I decided to write a new one basing it on the original http://www.rs.au.com/31/how-to-install-bootstrap-v2-0-2-in-expressjs-v3-0-0
I will assume that you're running any Linux distribution (in my case I'm using Ubuntu 12.10, but feel free to use your own distribution). Be sure to have installed a recent version of nodejs and npm packages (I'm using Node.js 0.8.20 and npm 1.2.11).
mkdir node-bootstrap cd node-bootstrap npm install express npm install jade
You should already have installed all the needed dependencies, even without executing npm install, anyway executing it won't hurt.
Download Twitter Boostrap from the official website http://twitter.github.com/bootstrap/assets/bootstrap.zip and unzip it under the nodebootstrap/public folder.
At this point you need to edit the views/layout.jade file and include the references to Bootsrap
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='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js') script(src='/bootstrap/js/bootstrap.min.js') body block content
At this point we will modify views/index.jade that is the default template used to render the index
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
Now go back to the terminal and execute the app:
[email protected]:~/Documents/sviluppo/nodejs/node-bootstrap/nodebootstrap$ node app.js Express server listening on port 3000
Open your favourite browse and visit http://localhost:3000 to see your first Bootstrap + Node.js application app and running.
If you develop with Node.js and you want to be sure to have the latest stable version, luckly there is a PPA for it. All you need is to follow these instructions:
sudo apt-get install python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install nodejs npm