Bower 101

Bower is a package manager for the web. If you’re not sure what package managers are, you’re gonna learn what they are and how useful they can be.

Installing Bower

To install bower, you need to have node.js installed on your computer. To check whether you have it or not, open up your command line interface (CLI) and type

$ node -v

If node.js is installed on your computer you should see the version you have. If not, then you can download it from nodejs.org.

To install bower, just type

$ npm install -g bower

Using Bower

Create a new folder for your project and go to that folder in your CLI. Let’s say we want to add jQuery to our project. All you have to do is

$ bower install jquery

Now, if you open up the folder, you will see a new ‘src’ folder. Inside that folder should be a ‘bower_components’ folder. All the packages you install will be inside that folder. If you open it up, there will be a ‘jquery’ folder with all the jquery code. Now type

$ bower list --paths

It will show you all the packages you installed along with their paths. However, sometimes it will only show the partial path. In that case you would have to go the folder and find the path.

Copy that path and put it as a source in a script tag inside your html file. Now you have jQuery in your project!

Is that it?

You’re probably asking yourself “is that all it does? I can just go grab the link for jQuery from their website and put it in my project.” But that’s definitely not only what Bower can do.

Bower Dependencies

Now what if you’re working in a group or you want to put your project on GitHub. It’s not a good idea to add all the source code to your repository. This is when Bower becomes very useful; it allows you to make a package file. To create a bower package file, type

$ bower init

It will ask you for a bunch of things like the name of the project, the description, etc… If you keep pressing the return key, it’s going to choose the defaults (that’s what I tend to do). Now if you open your project folder, you will see a new ‘bower.json’ file. So now, you don’t need to add the ‘bower_components’ folder to your repository. To see how this works, delete the ‘bower_components’ folder. Now type

$ bower install

If you did that, you will see that bower created a ‘bower_components’ folder again with all the packages. If anyone wants to work on your project, that’s all they have to do.

After your ‘bower.json’ file has been created, you will need to add a ‘-S’ to the end of the package installation command so that it adds that package to the file. Let’s say we want to add bootstrap to our project

$ bower install bootstrap -S

This will add bootstrap to the ‘bower_components’ folder and as a dependency in the ‘bower.json’ file. So remember, always add a ‘-S’ when installing new packages after creating a ‘bower.json’ file.

What else can Bower do?

Say you wanted a specific version of jQuery. Let’s see how you can do that. First, type

$ bower uninstall jquery -S

Which will remove the jQuery package from the ‘bower_components’ folder as well as remove it as a dependancy from the ‘bower.json’ file. Let’s say we want jQuery version 1.9.1, all we have to do is

$ bower install jquery#1.9.1 -S

Done. See how simple that is? There’s no need to search for the specific version, download the zip file, and extract it into your folder.

Bower can also install git repositories

$ bower install git://github.com/user/package.git

and URLs

$ bower install http://example.com/script.js