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!
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
$ 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
~/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
js folders and a bootstrap.zip file:
Go back to the
~/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
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:
To test that it works, edit the
views/index.jade file to include a reference that Bootstrap will be able to use, something like:
There you have it!
Being able to use a compiled Bootstrap file with your ExpressJS install.
In Microsoft Word you can control whether or not you want to see the white space characters in your document. This helps to check you haven't incorrectly inserted a tab where a space should have gone...
Very similar to our previous article on how to make a header row in Google Sheets, in this article we'll show how you can lock a column in Google Sheets. To lock a column in Google Sheets easily...