What is Bower?  Is it really worth considering?

Bower is a front-end package manager.  We’re all using 3rd party JavaScript and CSS libraries and frameworks, and it’s helpful to be able to manage installations, update to new versions, and remove packages in an automated way.

Bower works like npm in the node world or NuGet in the .NET world, but Bower has a special emphasis on front-end web development packages.  That means there is some overlap between packages managed by Bower and by NuGet, and that’s where things can get a little confusing. 

You can install the NuGet versions of jQuery, Bootstrap, and Knockout packages for your front end development, or you can install the Bower versions.  NuGet works fine and is well established in the ASP.NET world, so why bother with something else?

Well, the ASP.NET world is a server-side world; front-end web development is client side.  So there is a mismatch between the type of coding you do on the front end and the NuGet ecosystem.  The contributors at jQuery and Bootstrap are not thinking about NuGet.  They are thinking of all front-end web developers who may or may not be using ASP.NET, so their tools are rolled into Bower packages sometimes long before the NuGet package gets updated.  For popular front-end tools, the NuGet packages are updated pretty quickly.  But for less well-known tools, the lag between the version you can download online and the version in NuGet can be several months. 

And of course, many open source front-end tool authors don’t live in the ASP.NET world and never create a NuGet package for their project. Since Bower works independently of its package store, you can use registered Bower packages or you can install code that doesn’t have a Bower package yet by pointing to a public git repository or even just a URL to the code you want to install.  Either way, with Bower, you use the same tools for managing your packages.

Prerequisites

If you don’t already have it, install node from the Windows MSI package (which includes npm) at http://nodejs.org/download/.  We will use node and npm to install Bower.

If you don’t already have it, install git.  On Windows, you can install the git client for the command line, GitHub for Windows, or any number of other git clients.  They should all include git command line access that Bower will need.

Make sure “node”, “npm”, and “git” resolve on your environment PATHS.  On Windows, go to search, type “environment”, and select “Edit environment variables for your account”.  There, edit the PATHS variable to make sure it can find these three tools.

Let’s make sure you’ve got everything installed.  Open a Command Prompt and test with:

node -v

npm -v

git --version

You should see results like this:

image

Installing Bower

Once you’ve got the prerequisites working, install Bower with:

npm install bower -g

Case doesn’t matter.   The “-g” means Bower will be installed globally, instead of just in the local folders.  This will go off to the npm servers and download and install Bower.

Using Bower on a project

Create a test folder, change your command prompt working directory to it, and type:

bower init

You’ll be prompted for the name, version, and other stuff.  This is building up a bower.json file to put in this folder. 

image

Don’t stress too much about your answers.  You can change the JSON later.  Here’s the bower.json file I get after this:

{
  "name": "bower-test",
  "version": "1.0.0",
  "authors": [
    "Joe Wilson <joe@volaresystems.com>"
  ],
  "description": "just testing out Bower",
  "moduleType": [
    "globals"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Finding and installing packages with Bower

Searching for packages

Now we’re ready to install some Bower packages, but we have to find them first.  You can go to the web site to search Bower packages, or you can do it from the command line:

bower search file-upload

I get back a list of results like this:

image

Notice these are all git repositories?  When you install a package with Bower, you can also install with just the git repo itself.  Let’s try both.

Installing a Bower package with the command line

bower install jquery-file-upload --save

And I get

image

Now if I look at the folder, there is a new “bower_components” folder inside it.  That’s where the downloaded code is installed. 

If I open bower.json, there is a new entry:

"dependencies": {
    "jquery-file-upload": "~9.8.1"
 }

So bower.json is the Bower config, but it’s also listing the Bower packages installed (this is from the “--save” switch on the command line). 

You can also specify the version number of the package you want Bower to install from the command line.  I’ll talk about versions more below.

Installing a git repo with the command line

Let’s try a git repo that doesn’t have a Bower package.  For this single page nav component, the readme for the git repo says the author wants to create a Bower package, but hasn’t had time yet.

bower install git://github.com/ChrisWojcik/single-page-nav.git --save

And I get:

image

Here we see the error messages that the Bower meta data isn’t there in the git repo.  There is no bower.json file, so Bower fills in the blanks and installs it.

Installing a Bower package with Visual Studio

We can also install Bower packages from within Visual Studio.  There are some tools you need to set up, and then you can open up the bower.json file in Visual Studio and just start typing.  Intellisense can help with the rest:

image

Once the package name and version are added to bower.json, it still has to be installed.  You can do this from Visual Studio, by right clicking the bower.json file and choosing “Bower install packages” from the context menu:

image

Or from the command line, with:

bower install

which will download and install anything in the bower.json file that isn’t already installed.

Managing packages with Bower

Listing packages

We can see what packages we’ve got installed and the dependency tree with

bower list

I get:

image

This means there are three root packages, “bootstrap”, “jquery-file-upload”, and “single-page-nav” installed.  The bootstrap and jquery-file-upload packages have their own dependencies listed underneath.

Updating packages

To update all your Bower packages, use

bower update

You can also get more specific and name the package to update

bower update jquery-file-upload

Version numbers

If we open up the bower.json file, the dependencies look like this:

  "dependencies": {
    "jquery-file-upload": "~9.8.1",
    "single-page-nav": "git://github.com/ChrisWojcik/single-page-nav.git",
    "bootstrap": "~3.3.1"
  }

The “~9.8.1” for jquery-file-upload is the version number of the package to use.  Bower uses semantic versioning, so this notation with the tilde means get version 9.8.1 and any patches (the third number) after that.  If there is a version 9.8.2, Bower can update to it automatically next time you run “bower update”.  If there is a version 9.9 or 10.0 in the future, Bower won’t update to it.

You can get pretty fancy with version numbers here and even specify ranges of versions. There is a lot of subtle power here.  For instance, if you use Bootstrap and your project is built with Bootstrap version 2, you may not want to automatically upgrade to version 3 right away (there were major changes), but if there are any version 2 bug fixes or patches, you’ll take them.  Give some thought to how you use your front-end packages, the amount of effort taking on those major upgrades will entail for your project, and restrict the version numbers you want Bower to update to.

Uninstalling packages

When you want to remove a package from your project

bower uninstall jquery-file-upload

Using Bower in an ASP.NET MVC app

You can mix and match local project JavaScript and CSS with code from the project’s bower_components folder.

In an ASP.NET MVC application, the natural place to do this is the BundleConfig file by changing the sources for the bundles.  You’ll need to include the bower_components folder in your project if it’s hidden, and it will need to be copied for deployments (or at least the main files you are referencing will need to be there).

Here I’ve modified the stock MVC template to use the three Bower packages we installed and their dependencies:

    public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/bower_components/jquery/dist/jquery.js",
                        "~/bower_components/jquery-file-upload/js/vendor/jquery.ui.widget.js",
                        "~/bower_components/jquery-file-upload/js/jquery.fileupload.js",
                        "~/bower_components/jquery-file-upload/js/jquery.iframe-transport.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/bower_components/bootstrap/dist/js/bootstrap.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/bower_components/bootstrap/dist/css/bootstrap.css",
                      "~/Content/site.css"));
        }
    }

This is still not as smooth a process as it could be, especially around listing package dependencies.  There are other, perhaps better ways to integrate your newly install Bower packages into your app, including using Grunt, Gulp, RequireJS, and other tools.