How to Install, Update & Remove Web Libraries with Bower
To build a website, we commonly rely on a number of libraries, be it in the form of CSS or JavaScript. If I would build a small website that will display an image slideshow, for example, the website probably would need jQuery and a jQuery plugin, Flexslider. These libraries are the dependencies for the website to function.
While adding these libraries should be an easy task, when it comes to a large-scale website which requires more libraries, everything could be cumbersome and messed up from the beginning. You may have to trawl from one repository to another repository, downloading each of the libraries, extracting the packages, and finally putting them in your project directory.
When the new version becomes available you will have to be doing all of that again (sounds like a lot of work, right?).
Recommended Reading: Animate.CSS – CSS3 Library To Create Animation Easily
If that sounds like what you have been doing for ages, this article may be worth a read. Here we will show you a handy tool called Bower that makes managing website libraries a breeze. Let’s check it out.
Getting Started
To use Bower, you have to install Node.js. Since Bower is based on Node.js, you should be able to run Bower on every platform: Windows, Mac, and Linux.
Once you have installed Node.js, open Terminal (or Command Prompt) and run this command line to install Bower.
npm install -g bower
Installing Libraries
Now we are ready to use Bower. Let’s start by searching a library that we want to put in our project directory. Assuming that you are currently inside the directory, you can type bower search {name of the library}. Here, for example, I searched for Normalize.css, a library to make an element’s style consistent in all browsers.
bower search normalize
The command will list a bunch of results; not only that it gives us the original Normalize, it also shows us Normalize versions that have been converted to LESS, Sass, Stylus, and the other platforms.
Once we have picked which one to install, we can type bower install {{name of the repository}}. In this example, I will install Normalize LESS as well as jQuery.
bower install normalize-less jquery
This command will download the latest version of normalize-less and jQuery, and save it in a new folder named bower_components; you should now find the folder created in your project directory.
Alternately, if you want to install the older version of the library, you can run the command followed with the version number, this way.
bower install jquery#1.10.0
Now that we have the libraries, Normalize and jQuery, in our project directory, we can use them by referencing the jQuery from the bower_components folder in the HTML document and import Normalize LESS in the other LESS stylesheet.
in HTML
<script src="bower_components/jquery/jquery.min.js"></script>
in LESS
@import "bower_components/normalize-less/normalize.less";
If one of the libraries is no longer used in the website, you can uninstall it easily with bower uninstall command, like so.
bower uninstall normalize-less
Updating The Bower Components
Let’s say you have been working on your project for several months, and some libraries that you are using (like jQuery) have released a new version. In this circumstance, we can use Bower to update jQuery to the latest version. But first let’s check out whether the new version has been registered in bower with bower list command.
The latest version of jQuery, as you can see below, is 2.1.1.
To update jQuery, we can type bower update jquery. Once the update has completed, you can run bower list command again to verify the current installed version. Below, as you can see, we now have the latest version of jQuery.
Wrap Up
Bower is a really handy tool that I think you should leverage in your project. It’s like having an AppStore, but for your website stuff – we can install, update, and remove libraries conveniently.
In the next article we will dive into Bower and explore some more advanced features. So stay tuned.