Visual Studio Node.js express with Twitter Bootstrap

Here is a quick little tutorial of using Twitter Bootstrap with Node.js express in Visual Studio.

First we will create a ExpressBootstrap solution, select New Project and select JavaScript -> Blank Express Application.

I will name my solution ExpressBootstrap, in my app.js I have also add the app.locals.appname = ‘Express Bootstrap’ so that I can reference it in my application.

Next we will download and install bootstrap, this is the manual way of installing bootstrap, there is also an alternative by using bower, which I will cover in my next blog post.

One can download the latest bootstrap from http://getbootstrap.com/getting-started/#download

Once downloaded lets grab the css, font and js directory and copy them into our public folder in our express application.

Next we will change our layout.jade file to use bootstrap

I will now add some style to the style.css found in stylesheet folder.

Now we will modify the index.jade file to present us with a bootstrap looking login page site.

One of the downside you may find with jade is the space vs tab issue, one cannot mix spaces and tabs with jade, sometimes it becomes annoying when you have trailing space with some text, that you may not realize.

The end result we will get something like