In my previous post I have shown how to create an express app with node.js and in this post, I would like to introduce bower a package manager for front-end development.

Bower is a package manager just like Nuget, where it gets confusing is that node already has a package manager called npm. The difference is that bower is more of a front end package manger, think of it as managing your jquery, angular, ember, etc.

So lets get bower installed using our Npm manager in Visual Studio, we will install it globally to our package manager, so that every project can use it. One can also install it using command line, where the -g means globally.

Right click on npm in your solution and Manage npm Modules…

bower

Once launched select the Global Packages Tab, and type bower in the package Name field and click on Install Globally.

install bower

The process will go through and npm Operation Completed Successfully is show on the npm window.

bower install npm

Node Tools for Visual Studio does not yet provide a way to use bower with the menu context, so in order to use bower one has to use a command prompt. I hope in the future they can provide a way to right click and say bower install etc.

We would need to right click on the project and select “Launch Command Prompt here

In the command prompt we install jquery, so we will type

bower install jquery

By doing so you will find a new directory created in your solution called bower_components and it will pull the latest version of jquery into it.
bowervs

Jquery source installed
jquery bower

One can also install a specific version of package with bower by using the command

To use jquery that we just installed with bower in our express app, we will need to edit the app,js file and add

and you can then reference it in your html or layout file by