How to manage 3rd party libraries using Bower

Nearly every project requires third party libraries and frameworks (e.g. jQuery, Bootstrap), and it can get complicated keeping them updated and maintained. Fortunately, there’s Bower, a package manager that will take registered components and organize them as depencies.

Setup

Install Bower using npm

$ npm install -g bower

Make sure that your project is using npm

$ cd myproject/
$ npm install

All bower components will be installed by default at ./bower_components/. you can change this by creating a .bowerrc file at root level. For example, I like to put my dependencies in ./src/components

Custom components directory (./.bowerrc)

{
  "directory": "src/components"
}

Add a component, such as jQuery

$ bower install jquery

If you don’t know the name of your component you can search for it instead

$ bower search [NAME]

Initialize Bower

$ bower init

It will ask you for a bunch of options, enter in information as needed, or just keep hitting <ENTER> to get the default answers.

[?] name: <myproject>
[?] version: <0.0.0>
[?] description: 
[?] main file: 
[?] what types of modules does this package expose? 
[?] keywords: 
[?] authors: <John Smith>
[?] license: <MIT>
[?] homepage: 
[?] set currently installed components as dependencies? <Yes>
[?] add commonly ignored files to ignore list? <Yes>
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? <Yes>

It will generate a bower.json file for your approval

{
  name: 'my_project',
  version: '0.0.0',
  authors: [
    'John Smith <john.smith@example.com>'
  ],
  license: 'MIT',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ],
  "dependencies": {
    "jquery": "~2.1.1"
  }
}

Notice that it will show jQuery, because you have installed it as a component before initializing Bower.

"dependencies": {
    "jquery": "~2.1.1"
}

This means that the current version of jQuery for your project is 2.1.1. This version number comes from the jQuery Github release tag. If you ever want to change the version of jQuery in the future, go to your bower.json file and change the version number.

# Install all dependencies based on bower.json
$ bower install
# Install a new dependency after bower.json has been created
$ bower install [name] --save

By running the above command, the component will be added, and your bower.json file will be updated accordingly.

Update dependencies to latest version

$ bower update

bower.json Specifications

“resolutions” - dealing with package conflicts

Sometimes you will have packages that depend on other packages at different versions, and it will ask you to choose. For example,

Unable to find a suitable version for jquery, please choose one:
    1) jquery#~1.7 which resolved to 1.7.2 and is requird by typeahead.js#0.10.4
    2) jquery#~1.9.1 which resolved to 1.9.1 and is required by bootstrap#3.0.3
    3) jquery#>=1.7 wich resolved to 2.1.1 and is required by mocha.events#0.0.3

Prefix the choice with ! to persist it to bower.json

[?] Answer:

This gets annoying and you can type something like !3 to make it always go with 2.1.1. Your bower.json file will be updated with a resolution:

"resolutions": {
    "jquery": "2.1.1"
},

You can always be proactive and add resolutions before they are needed as well.


Registering a Bower Package

Before you begin (assuming your project is hosted on Github),

Register in terminal

$ bower register [app name] [git endpoint]

Example

$ bower register MYPROJECT git://github.com/MYNAME/MYPROJECT.git
[?] Registering a package will make it installable via the registry (https://bower.herokuapp.com), continue? Yes
bower register      git://github.com/MYNAME/MYPROJECT.git
Package MYPROJECT registered successfully!