How to Install, Update & Remove Web Libraries with Bower

To build a website, we often use various libraries, including CSS or JavaScript. For instance, creating a small website featuring an image slideshow would typically require jQuery and a plugin like Flexslider. These libraries are essential for the website’s functionality.

While integrating these libraries is straightforward for a small project, the process can become complex and disorganized for larger websites. You might find yourself navigating from one repository to another, downloading each library, unpacking the files, and arranging them in your project directory.

And when an update is released, you’re faced with repeating this time-consuming process.

If this scenario sounds familiar, you’ll find this article invaluable. Here, we introduce Bower, a powerful tool that simplifies the management of web libraries. Let’s explore how it can streamline your workflow.

Starting with Bower

To begin using Bower, you first need to install Node.js. As Bower operates on the Node.js framework, it can be used across all major platforms including Windows, Mac, and Linux.

After Node.js is installed, open your Terminal or Command Prompt and execute the following command to install Bower:

npm install -g bower

Installing Libraries

Now that we have Bower set up, let’s begin by finding a library to include in our project. If you are already in the project directory, simply type bower search {name of the library} into your terminal. For instance, I searched for Normalize.css, a library that ensures consistent styling of elements across different browsers.

bower search normalize

This command displays several results, including the original Normalize as well as versions adapted for LESS, Sass, Stylus, and other platforms.

After selecting the desired version, you can install it by typing bower install {{name of the repository}}. In this example, I will install Normalize LESS and jQuery:

bower install normalize-less jquery

This command downloads the latest versions of normalize-less and jQuery, saving them in a new folder called bower_components. You will find this folder in your project directory.

If you need an older version of a library, you can specify the version number like this:

bower install jquery#1.10.0

With the libraries now in your project directory, you can incorporate them by linking jQuery in your HTML document from the bower_components folder and importing Normalize LESS in your LESS stylesheet.

HTML:

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

LESS:

@import "bower_components/normalize-less/normalize.less";

If you ever need to remove a library that is no longer necessary, simply use the bower uninstall command:

bower uninstall normalize-less

Updating Bower Components

Imagine you’ve been working on your project for several months and discover that a key library like jQuery has released a new version. Bower makes it simple to update to the latest version. Start by checking if the new version is registered in Bower with the bower list command.

The latest version of jQuery, as shown below, is 2.1.1.

To update jQuery, simply type bower update jquery. After the update completes, you can confirm the installation of the new version by running the bower list command again. Below, you can see that we now have the latest version of jQuery.

Conclusion

Bower is an incredibly useful tool that can simplify the management of web libraries in your projects. It functions much like an app store for your website, allowing you to install, update, and remove libraries with ease.

In our next article, we’ll delve deeper into Bower and explore some of its more advanced features. Stay tuned for more insights.