Installing, updating, and deleting packages

Before installing a package, there’s an important decision to make. You have to decide if the dependency you’re going to install is needed in production or is only necessary for you as a developer.

To give you a concrete idea, jQuery is a package you need in production because your whole JavaScript code, or part of it, needs jQuery to work. The same reason is valid for other components like jQuery UI or Backbone.js. Other packages, such as a testing framework (like QUnit or Mocha), are only needed while developing the project to ensure the code quality and robustness. No other parts of the software—at least not those that will be deployed—need it. This is an important difference that will slightly change the way you install a dependency.

To install a package with Bower you have to run the command

bower install <package_name> <--production-or-development>

where <package_name> is the name of the package and <--production-or-development> is a flag to specify if the package is intended for development purposes only (--save-dev) or not (--save).

To install jQuery as a production dependency, open the CLI and move the project’s folder to the same level as the bower.json file. Once that’s done, execute the command

bower install jquery --save

Let’s now say that you also want to install QUnit because you want to unit test your project. To install it as a development dependency, the command to use is

bower install qunit --save-dev

The first time the install command is executed, a folder called bower_components is created. Inside this folder the tool downloads the packages required. It also updates the bower.json file by adding the package in the dependency or the devDependency section, depending on the option specified.

Once a dependency—for example, jQuery—is downloaded, you need to include it in your project. Assuming you have an index.html file created at the same level of the bower_components folder, you have to write

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

The actual path varies from package to package, but the structure is usually similar.

Once you install all the dependencies needed, you can start developing the features of the project.

The development process usually requires a lot of time, and while writing the code it can happen that a new version of one or more of the packages you’re using is released. New releases often fix important bugs, so it’s important to keep your dependencies up to date.

Updating a package

Updating a package is easy. All you need to do is to move to the root of the project and execute on the CLI the command

bower update <package_name>

If you want to update jQuery, you have to write

bower update jquery

Sometimes you might want to update all of your packages at once. Bower enables you to do that with the command

bower update

There may be situations where a dependency isn’t needed anymore and you want to delete it. Let’s see how.

Removing a package

To delete a dependency using Bower you can run the command

bower uninstall <package_name> <--production-or-development>

where the meaning of the two parameters is the same as explained previously.

Imagine that you gave QUnit a try in your project but you didn’t like it very much and decided to write your tests using Mocha. You need to delete QUnit, which was installed as a development dependency. To do that, you need to run on the CLI the command

bower uninstall qunit --save-dev

With this last example we’ve completed our overview of Bower. This tool has more commands than those we’ve discussed, but they’re enough to get you up and running and to speed up your workflow.

Thanks to jQuery, Bower, RequireJS, and the other software we’ve introduced in this app, you’re ready to develop websites and web applications in a solid and professional way. But this lesson would be incomplete without mentioning single-page applications and how to create them using an MVC framework.