As a frontend developer, there is one thing you cannot escape from. That is integrating third party libraries into your project. Need to use jQuery, Underscore, Bootstrap? You have to download their libraries. Our applications are a full of these imported libraries. They help us to get our day to day tasks done quickly and effectively. In this post we will be talking about Bower.

What Bower does is help us quickly get those libraries into our projects, which drastically reduces time needed to go to third party sites to download them (involves many manual steps). Using the command line, we can delegate that tasks to bower and it will get all the files we need into our project, ready to be used. 

To start using Bower, please make sure that you have Node installed. There are many resources on the web on how to do that so i will not be covering that here.

To install bower, use the node package manager (NPM)

npm install bower -g

Thats it! Bower is now ready to be used.

Installing Packages

Next we want to use Bower to install a clientside library into our project. These libraries are called packages. The general format to install packages are

bower install <package_name>

<package_name> here is the library you want to install (such as jQuery).

Using the command line, change directory into your project folder. In our example we want to add jQuery into your project run the command

bower install jQuery

This will add a new folder into your project called “bower_components”. Drilling down into that folder you will find a “dist” folder. This is where you find the jQuery source file you can add to your project. All that needs to be done now, is add the library using the <script> tag. 

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

Now what if you decide you dont want to use jQuery again? Well, we can use Bower to uninstall and remove it from our project. Note: This will not remove your script tag from your HTML file. You have to do that yourself. But you can use Bower to remove the jQuery files from your project.

bower uninstall jquery

This removes the jQuery folder within the “bower_components” folder. Simple!

Package Versions

In writing this tutorial, i noticed that the version of jQuery i downloaded was 2.1.4. What if you dont want this version? What if you wanted, for example version 1.11.3? We use the hash and version number to do that.

bower install jquery#1.11.3

If you are not sure about version numbers, bower can provide that information to you.

bower info jquery

Will provide all version numbers available on the bower registry. Which is very nice. 

Updating Packages

With time, most projects will grow. Having more than a few libraries is very typical, and adding the fact that libraries also evolve with time. So if you were using jquery 1.11.3 and heard that there was a newer version? A version you wanted your project to use? How can Bower help you do this without any pain? Bower has an update command that can help you do this

bower update

This will check EVERY package and if they are not the latest, Bower will update it. You can also update just one library instead of all your packages(be careful about always updating all your packages as this can break your code). To update just one library we use something we have already seen

bower install jquery

This install command will check the package and update it if it is not the most current. 

Installed Packages

What if you want to find out what packages you have already installed in your project? Use the list command with bower

bower list

Will list all the packages with version numbers as well as package dependencies in your project.

Searching the bower registry

You can also search the bower registry for packages.

bower search <package_name>

For example you want to download the jquery cookie library but dont know the name. Simply running a command like

bower search jquery

This will list all jquery related libraries in the registry. In this case one can see “jquery.cookie” is the library i am looking for if you run that command.  

 Isnt that great?! This should get you started with using bower in your projects. However this is only scratching the surface of what you can do with the tool. I hope to write more advanced tutorials in the future that will help you take your bower skills to another level. If you have any questions, please feel free to ask and i will answer them at my earliest convenience.

Bower Configuration

You may have noticed that when you install client libraries using bower, it installs everything in a folder called bower_components. You may or may not like this. What if you wanted to name that parent folder something else? Or perhaps tell bower exactly where to install these client libraries. This is where the bower configuration file comes in. Create a file in your project called .bowerrc, and in that file add the following JSON object to it

{
  "directory" : "public/lib"
}

What we are doing here is this, we are telling bower to put all the downloaded client libraries into the public/lib folder. Its that simple. If the lib folder is not available bower will create it and add the files there. Give this a go by downloading something with bower and watch it get added to any folder you want.

Feel free to reach out on twitter as well ( @scriptonian ) if you have any questions.