I’m certainly no expert when it comes with 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 instance and assuming that you have the following installed: node npm make zip unzip git
Process:
- Install via NPM the following: ExpressJS, Less & UglifyJS:
~$ npm install -g express less uglify-js(you may need tosudo 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 acannot remove `docs/assets/bootstrap.zip`file – just ignore) – it would also be great if you couldmaketo 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, jsfolders and abootstrap.zipfile:~/testme/vendors/bootstrap/docs/assets$ ls - Go back to the
testmefolder:~/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.jadefile 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 mylayout.jadelooks like:
- To test that it works, edit the
views/index.jadefile to include a reference that Bootstrap will be able to use, something like:
And there you have it! Being able to use a compiled Bootstrap file with your ExpressJS install.
great tutorial! very detailed. thanks!
Hi Ryan! Thanks for your nice tutorial. I’ve used it to learn how to integrate Bootstrap with Node.js and I also wrote a similar tutorial basing on this one, improving the Bootstrap installation part and of course pointing to the original tutorial you wrote
You can find my version here http://www.andreagrandi.it/2013/02/24/using-twitter-bootstrap-with-node-js-express-and-jade/ I hope that both can be uselful for people. Thanks again!