How to get started with Bower

One of the things we struggle everyday as programmers is productivity; we want to do things better and at the same time faster, everyday.

This is something we can’t control, we now have more to do: more scripts to download, to install, and even more frameworks to work with. In every project we end up downloading at least one jQuery plugin and even jQuery itself; every time this happens we need to go the plugin’s website, download it, or link to it.

Even though we’re used to this, and it doesn’t even seem like a lot of time at first, these little chunks of time accumulate. So to solve the problem, we use Bower.

What is Bower ?

In simple terms, Bower is a package manager for the Web, it was made by Twitter and it helps you by running simple command lines to download all the assets you need for your project saving you time and effort.

How to use it ?

In order to start using this tool you first need to install it, and as long as you have NPM and Node installed on your machine that is as simple as running this command:

npm install -g bower

If you plan on getting some packages using git you should also have that installed on your machine but assuming you have all of that you now have bower installed and ready to be used.

Getting packages

Bower uses the bower.json file to see what packages you need for the project. If you have that file prepared, all you need to do is run:

bower install

If you don’t have this file yet, which is most likely the case if you’re just getting started with Bower, and you want to download a package for your application you need to run:

bower install <package-name>

For example:

bower install jquery

You can also search for something if you are not sure by running:

bower search <package-name>

This will give you a list of all the packages that match the terms of your search so that you can install the one that you need.

You can install these packages right from the Bower Registry or in a number of different ways:

• A public Git endpoint ( You need git installed ) git://github.com/someone/package.git
• A private Github repository : https://github.com/someone/package.git
• A local folder
• A public or private remote Subversion endpoint: svn+http://package.googlecode.com/svn/
• A URL to a file, including zip and tar files that will be extracted.

As you can see, you don’t need to rely on the registry you can use this tool with any package you know has good code on the web.

In some cases you may also need a specific version of a tool and using Bower you can also download this by appending a pound sign and the version number after the name of the package:

bower install <package>#<version>

For example:

bower install jquery#1.9

If you just want to see all the packages you have installed locally you can run:

bower list

If you run this command and see something you are not really using anymore you can also uninstall packages by typing:

bower uninstall <package-name>

Getting these packages

Let’s say you have installed all the packages you need and now you want to know their location to have them inserted into your document and start working.

By default all packages are in a folder called bower_components and then divided by package name, for example jQuery would be in:

/bower_components/jquery/jquery.js

This is the default location but you can also create a separate configuration file that bower will read and set your preferred location there.

Firstly create a .bowerrc file and add the desired location for your packages:

    {
      "directory": "app/components"
    }

Of course this is not all you can configure in this file and if you really want to see more advanced configuration you can visit the bower spec and read about all you can do in this file.

Conclusion

Lately we have been seeing a growth in this kind of command line tool.

Bower stands out because it fills a gap in our workflow and automates it simply. If you develop a lot of sites, you should check it out.