Managing dependencies with Bower

The development of a web project usually involves the use of third-party components to speed up the process. A project that employs one or two third-party components can be easily managed manually, as we used to do until a few years ago. As things get more complicated, developers needed a reliable way to install and manage those project dependencies.

In the past few years a lot of tools have been released to address this problem. One of these tools is Bower. In this section, we’ll look at it and its main features, focusing our attention on how jQuery can be integrated into a project using Bower.

Getting started with Bower

Bower was created at Twitter and released in 2012. Since then, a lot of developers have contributed to this project, and now it’s one of the most well-known front-end tools. Bower is defined as “a package manager for the web,” which means that it’s a dependency manager for JavaScript, CSS, and much more, such as web fonts. A package can be a JavaScript library (such as jQuery, jQuery UI, or QUnit), a CSS file (such as Reset.css or Normalize.css), an iconic web font (such as FontAwesome), a framework (such as Bootstrap), a jQuery plugin (such as jQuery Easing or jQuery File Upload), or anything else a developer wants to expose as a third-party component for a web project.

Funny enough, Bower has some dependencies itself, so you need to satisfy those dependencies before you can use it. These dependencies are Node.js, the platform that enables you to run JavaScript as a server-side language and that we’ve mentioned a few times in this app; npm, which is installed with Node.js; and a Git client. Once you’ve installed them, you’re ready to enter the Bower world.

Bower defines a manifest file called bower.json, written in JSON format, which provides information about the project such as its name, the author(s), the current version, and the packages used. This manifest file comes in handy if you’re working in a team because it lets you share the information with the other members. This is useful because they can install all the dependencies of the project by typing a single command (we’ll discuss it in a few moments).

Once you’ve installed all the Bower dependencies, you can install Bower by running on the command-line interface (CLI) the command

npm install -g bower

This process can take up to a few minutes, but once it’s completed you’re ready to employ this tool in your projects.

Let’s now say that you’re developing a new project and you want to use Bower to manage the dependencies. To start, you need to move to the project’s folder and create the bower.json file inside it. This file can be created either manually or with the help of Bower. In this example we’ll discuss the second option. Open up the CLI, move to the project’s folder, and run the command

bower init

The tool will ask you some information about the project, as shown in figure 15.2.

Figure 15.2. Using Bower to create the manifest file of a project

After you’ve filled in all the fields and confirmed the information, the manifest file (bower.json) will be created inside the folder. An example of a bower.json file is shown in the following listing.

Listing 15.1. An example of a bower.json file

{
  "name": "jqia-context-menu",
  "version": "1.0.0",
  "authors": [
    "jqia-team <[email protected]>"
  ],
  "description": "A jQuery plugin to show a custom context menu on one or more specified elements of a page.",
  "main": "src/jqia-context-menu.js",
  "keywords": [
    "jQuery",
    "plugin",
    "context-menu"
  ],
  "license": "MIT"
}

Your project is now set up to use Bower, but so far you haven’t done anything really exciting or very useful. In the next two sections we’ll revamp your interest.

Searching a package

A package in Bower is nothing but a component that you want to use in a project. Not all the libraries and frameworks available on the web can be managed with Bower, but because Bower comprises more than 34,000 packages, you can be pretty sure that everything you may need is already available.

If you want to know if a package is available, you can search it using Bower. To do that, open the CLI and run the command

bower search <package_name>

where <package_name> stands for the name of the package.

And what better example could we propose than searching for jQuery? To search for jQuery using Bower you have to run the command

bower search jquery

The execution of this command will give you as a result not only the jQuery library itself but also all the other packages that have the string "jquery" in their name, description, or keywords.

Once you’ve identified the exact name of the package to be used, you’re ready to install it.