There are now more libraries and frameworks available for front-end development than ever before. It’s not uncommon to have five or more of these libraries involved in a single project. But keeping track of all these libraries and making sure they’re up-to-date can be tricky. Enter Bower, a package manager that makes it easy to manage all your application’s front-end dependencies.

Installing Bower

Bower can be installed using npm, the Node package manager. If you don’t already have npm installed, head over to the Node.js website and download the relevant copy of Node.js for your system. The npm program is included with the install of Node.js.

npm install -g bower

This will install Bower globally on your system.

Finding Packages

There are two different ways that you can find Bower packages. To search for packages on the command line you use the search command. This should be followed by your search query.

bower search <query>

For example to search for packages that contain the word ‘jquery’ you could do the following:

bower search jquery

Installing Packages

To add a new Bower package to your project you use the install command. This should be passed the name of the package you wish to install.

bower install <package>

As well as using the package name, you can also install a package by specifying one of the following:

• A Git endpoint such as git://github.com/components/jquery.git
• A path to a local Git repository.
• A shorthand endpoint like components/jquery. Bower will assume that GitHub is being used, in which case, the endpoint is the part after github.com in the repository URL.
• A URL to a zip or tar file. The files contents will be extracted automatically.

Although Bower packages most commonly contain JavaScript files, they can also contain CSS or even images.

<script src="path/to/bower_components/jquery/jquery.min.js"></script>

Installing Packages Using a bower.json File

If you are using multiple packages within your project it’s often a good idea to list these packages in a bower.json file. This will allow you to install and update multiple packages with a single command.

 {
          "name": "app-name",
          "version": "0.0.1",
          "dependencies": {
          "sass-bootstrap": "~3.0.0",
          "modernizr": "~2.6.2",
          "jquery": "~1.10.2"
                },
          "private": true
          }

Listing Installed Packages

You can easily find out which packages are installed using the list command.

bower list

Updating Packages

Updating a package is pretty straightforward. If you’ve used a bower.json file you can execute a simple update command to update all of the packages at once. However, the update tool will abide by the version restrictions you’ve specified in the bower.json file.

bower update

To update an individual package you again use the update command, this time specifying the name of the package you wish to update.

bower update <package>

Uninstalling Packages

To remove a package you can use the uninstall command followed by the name of the package you wish to remove.

bower uninstall <package>

It’s possible to remove multiple packages at once by listing the package names.

bower uninstall jquery modernizr sass-bootstrap