What is Bower?

Bower is a package manager for the web.

Modern web development involves use of variety of technologies like CSS, Jquery, Angular, Backbone, Bootstrap, SASS, LESS,  Jasmin, gulp and the list keeps increasing. Package manager will be helpful to simplify and updating all these dependencies.

A package manager will be able to perform below tasks

Searching all the library dependencies…
Downloading and unpacking the archives…
Copying files into the projects…
All of this is replaced with a few commands in the CLI using Package Manager – Bower.

How Bower Works ?

Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading and saving the packages one is looking for.

Bower keeps track of these packages in a manifest file called bower.json.

Setup Bower Package

You could share the bower components by initializing the bower project as your own package. Run the following and see what happens.

bower init

You will be prompted to provide details about this bower project.
Proceed with defaults.

Now you would see a single file called bower.json getting created.
You might notice bower.json file has captured all the 3 dependencies i.e., jquery, angular, and backbone added.

Dependencies installation:

Try this out yourself by removing bower_components folder.

rm -rf bower_components
bower install

You should see the bower_components back in your project directory, installing all the needed dependencies as per the bower.json file. This is the beauty of bower.

New Dependencies into bower.json

Let us say, you plan to add a new dependency to your project. What do you do?

Simply run bower install bootstrap and add appropriate version if needed.

Now, how do you get this new addition propagated to rest of your team?

For this, use an option –save during installation.

Now try adding bootstrap to your project myFirstTutorial.

bower install bootstrap --save

Refresh your bower.json file and see that bootstrap is getting added automatically.

You could go ahead and commit this json file to your version repository so that others can find it.

Dependencies Path

Find the path of your dependencies, using:

bower list -path.

These paths can be referred while writing a HTML or CSS page.

To refer angularjs in your HTML

  < script src="bower_components/angular/angular.js" /> 

More on Dependency Versions

Let us understand the dependencies in bower.json file.

You would notice ~, ^, >= .

If you take any version, say, angular 1.5.59 , 1 is the major version, 5 is the minor version and 59 could be a bug fix.

^ in front of the version indicates, the major version should be 1 and minor version can be anything i.e, bower can bring any 1.x.x version as dependency

~ informs right most digit in the version can be anything. i.e., bower can bring any 1.5.x version as dependency

>=  indicates bower can bring any version greater than or equal to angular 1.5.59 as dependency

Update Package

Updating a package is bower is quite simple we just need to say “bower update” and this will discards old or outdated versions and update it to latest version with keeping in mind the restrictions on the versions to be fetched specified in the bower.json file will still be considered while performing the updates.

You could also choose to update a single dependency viz..,

bower update angular

Uninstall Package

Uninstalling a package is similar to installation. You could just run bower uninstall <package>.

Same as how installing multiple packages are possible, uninstall will also work the same way. Viz..,

bower uninstall angular backbone bootstrap.

Using Local Cache

Bower supports installing packages using local cache (without internet), if the package was installed earlier for other projects in the local.

bower cache list

– above command lists all the packages installed earlier and are cached

bower cache clean

– Flushes out the cache

Useful Bower Commands

Apart from whatever commands we have come across so far, there are few more useful commands are listed here.

bower help – Displays help information
bower info – Displays overall info of the package
bower login – Authenticates with GitHub and stores credentials
bower search – Finds all the specified packages
bower home – Opens a package homepage in the browser
bower link – Creates a global link which can be consumed in other packages for linking. This is useful during testing.



One comment

  1. I often visit your page and have noticed that you don’t
    update it often. More frequent updates will give your blog
    higher rank & authority in google. I know that writing articles takes a lot of time, but you
    can always help yourself with miftolo’s tools which will shorten the time of creating an article to
    a few seconds.

Join Discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.