We will now install the various components that make up our client, namely Handlebars.js, Backbone.js, and Twitter Bootstrap Version 2 using Bower.

Bower is a package manager for the web. A Bower package can contain assets of different types, such as CSS, JavaScript, and images. Let's install Bower globally with the following command:

npm install -g bower

In Bower, dependencies are listed in a bower.json file, similar to Node's package.json. Let's create a ./bower.json file and define our client-side dependencies:

{
  "name": "vision",
  "version": "0.0.1",
  "dependencies": {
    "json2": "*",
    "jquery": "*",
    "underscore": "*",
    "backbone": "*",
    "handlebars": "*",
    "bootstrap": "2.3.2"
  }
}

Now create the following Bower configuration file ./.bowerrc, which allows us to define our target directory and the name of our bower.json file:

{
    "directory": "public/components",
    "json": "bower.json"
}

Run the following command to install all of the dependencies listed in our bower.json file:

bower install

Twitter Bootstrap's assets are stored in the folder specified in the path in the following snippet, so let's add a static middleware to override our Express server. This will keep our paths consistent on the client:

app.use('/bootstrap', express.
  static('public/components/bootstrap/docs/assets/css'));