Bower package manager in 3 steps

17 בDecember 2014

tags: , ,
no comments

Why do I need it

Lets say I have a web app that depends on Angular. I need to download angular.js, angular.min.js, and maybe a gzip version. Also I might need to download a few dependencies such as angular-route and angular-ui, store them in my source control and make sure the versions match. Also, I use google-map for angular, which depends on a specific angular version, among jquery version and other. I need to download and store them all and to make sure the versions doesn’t collide.

Bower solves dependencies and downloads them for you. Just like nuget does. Why not use nugget than? Bower has already a big community with loads of packages.

1. Installation

Install Node JS and npm here , and Git here.

On your app folder, click mouse right button and chose Git Bash.

clip_image002

This will open a command line window. Now let’s install bower package for npm:

clip_image004

Were done installing. Let start by adding our first package.

2. Adding a Package

We want to use angular in our application. We’ll use the same bash window and use the following command:

clip_image006

This command will install a bower_components folder that from now on contains our app dependencies. Angular is a new dependency we installed hence it will appear there within a new folder. Angular folder contains the related files (.js ,.min.js, .min.js.zip, etc) that we’ll consume from our app <script src=”bower_components/angular/angular.js” ></script>

3. Controlling the app dependencies

Now let’s say we need a specific angular version. The install command gives us the latest version but we need an older version. This is a chance to get to know bower.json files that contains all our app dependencies. The best thing about it is that it’s a declarative way to understand our app dependencies. It gives us a clear view about what our app consumes and will allow us to make fast modifications.

clip_image008

Create the file using the following command:

clip_image010

You’ll have to supply some information about your app name, version etc. that can be changed later easily by editing the file. The file bower.json now contains the dependency we installed earlier (it scans the bower_components folder) and now gives us the ability to manually add or modify existing packages.

Let’s try to modify our current Angular dependency to a specific version. That’s easy, just change the version number from 1.3.7 to 1.3.5, save the file and run the following command:

clip_image012

This will install the packages in the bower.json file, changing our angular version to 1.3.5.

Notice we didn’t had to touch our app.html file since the angular path and name didn’t change.

Bower has many more capabilities and features and this post should give you enough to start working with it.  How did it work for you?

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*