Client Side dependency management with Bower

|
| By Webner

Build tools like maven, ant etc are used to download project’s dependent jar libraries required in web application development environment. But what about client-side dependencies like jquery, bootstrap, fonts, css, angular js etc. They are front-end dependencies which we have to download manually before using in projects. “Bower” is the tool which automates our client-side dependencies. It is a package manager like composer. Below I will explain how to install it, use it and its benefits. Note that in our case project was a Spring MVC project but you can use it in any web project. Also, I am using Ubuntu 14.4 as OS:

1. Install Bower: Click on the link below and follow the instructions given on the page to install bower on your Ubuntu machine:

https://tecadmin.net/install-bower-on-ubuntu/

2. Check Bower version:

Syntax: bower –version:

3. Create bower.json in your project root directory: To create bower.json in your root directory:

Syntax: bower init :

4. Install package via Bower:

Syntax: bower install <package>

Example: if you want to install jquery then run below command bower install jquery:

By default, all packages will be stored inside bower_components folder inside root directory of your project.

5. Save your dependency version inside bower.json:

Syntax: bower install <package>  –save

Example: bower install jquery –save

It will update the latest downloaded version of the jquery inside your bower.json file:


6. Download packages to some other location:

If you want to download packages to some other location then create a  hidden file named “.bowerrc” and add below json key to it:

{

"directory":"src/main/webapp/static/lib/"

}

The default download location for Bower packages is “bower_components” folder at the root directory of your project. But if you need it somewhere else, specify that value in the bowerrc file.

7. Uninstall already downloaded a package from your project:

Command:  bower uninstall package_name

Bower uninstall jquery:

It will remove the jquery subfolder from your bower_components.

8. Check version updates for the installed packages:

Command: bower  list

It will provide the last available version of the packages that have been installed via bower:

9. Update  package with Bower:

Command: bower update package_name

 Example: bower update jquery:

It will update the package if any latest version available.

10. Download different version of the same package:

Command: bower install packageName#version

Example: bower install jquery#1.3.2

Specifying version with the package name will help in downloading the required dependency version. If you have more than one version for the same dependency then it will allow you to opt version you want to use in your project:

Advantages of using Bower:

  1. No need to commit bower dependencies to put them under version control.
  2. We can distribute bower.json file to each developer in a distributed development environment and they can get them on their systems via bower install.
  3. We can use a different set of dependencies for the development environment and production environment.

Leave a Reply

Your email address will not be published. Required fields are marked *