Power of Bower
Power of Bower

Front end development has become so vast that a website nowadays needs other libraries, components and many more than just plain html and css. Finding, using and maintaining these are not always easy and very monotonous for sure. However, bower from twitter comes to rescue. Bower is a tool optimized for front-end development that fetches and installs 3rd party packages. It also keeps track of all the used packages inside a project that you are currently building or if you are creating your own package.

In this blogpost I will talk about installing bower and using bower in the context of consuming 3rd party packages in front-end development. Keep in mind that, bower can also be used to create and maintain a package using git and github. I have mentioned a few commands that might be needed while creating a package but those commands are also useful in terms of consuming and maintaining other libraries. 

How to install bower?

To install bower, check you have msysGit , Node.js and Ruby installed. 

While installing msysGit make sure that you have the settings set as shown in the picture below

Check you have the following paths set in the System variables.

C:\Ruby200-x64\bin;

C:\Program Files (x86)\Git\cmd;

C:\Program Files (x86)\nodejs\

To set system variable, right click on “My Computer” > Properties > Advanced System Settings > Environment Variables > System Variables > Select the “Path” > Edit and then copy paste the above mentioned paths (relative to you where you have installed them) at the end.

Once msysgit is installed right click on the Git Bash icon and click “run as administrator” then type 

npm install bower -g //this will install bower

Now, before we install a package, we have to select the our project directory. In my case I want to use the following directory. So, run git bash and type 

cd /c/wamp/www/php/ //not c: and notice the first and last forward slash

Installing a package

bower install lodash //lodash is replacement of underscore.js

This will install the lodash library to a bower specific folder called “bower_components” and now we can link this library in your project.

We can also install multiple packages at the same time like below 

bower install lodash bootstrap angular jquery

Uninstalling a package

bower uninstall lodash

This will just simply delete the lodash folder from the project. After uninstalling the package make sure that you don’t have a reference to that library anymore.

Installing a package of a specific version

bower install lodash#2.2.1

Getting all versions of a package

bower info lodash

Update all the installed packages in a project

bower update //this will update all the packages inside a project

But in many situations we might not want to update each and every packages in our project. So, in case when we want to update just a specific package, the command is the “install” command

Updating a specific package

bower install backbone //this will install package if not exists already

List all installed package

bower list

In this way we can also see the dependencies of packages. For example, if we have installed bootstrap we will see that bower will automatically install jquery because, bootstrap needs jquery to work or in other words, jquery is a dependency of bootstrap. In git bash, bower will show this in a indented fashion.

Search a package

bower search lodash

This will only find packages that has the mentioned name (in this case lodash) in the package name. If we want to find a package of some type that might not be in the package name then we have to go to the http://bower.io/search/ link.

Creating a package

bower init

This will take us through a bunch of questions and finally create a very basic bower.json file. One thing to keep in mind that, in this process bower will check if we already have installed any packages and try to put them as dependencies.

bower.json file is really important and powerful because it helps the package consuming project to install all the related packages along with their dependencies in one go. It also helps us while creating a package when we try to install any new dependent package. For example, if we want to install jasmine, we can type 

bower install jasmine --save //this will install jasmine and also update the bower.json file

If we want to use jasmine only for development purpose then we can do it like this

bower install jasmine --save-dev //this will install jasmine and put jasmine under the devDependencies section of the bower.json file

Custom location for packages

By default bower puts all packages inside this folder called “bower_components”. If we want a custom directory as the location for packages, then we have to create a .bowerrc file and place it the root of the project.

Inside the .bowerrc file we just need to provide the following information in a json format

{

    "directory" : "js/lib" //path is relative to project root

}

After this, if we install any new package, bower will put them in this new location.

August 13, 2015
Jahan Sarwar