Skip to content

Developing with Bower

By GRAYBOX Alumni
Technology

Introduction to Bower

Bower is the self proclaimed Package Manager for the Web. You know it's cool because it's built by Twitter and it uses an IO domain, but let me try to convince you further.

Let's say you're building your web application and you need jQuery and Bootstrap. What do you do to get those packages? If you're like me, you fire up your browser and hunt down the latest version of both libraries, download them, extract them, and rifle through your filesystem to copy/paste/move what you need to where you need it.

Not anymore.

With Bower, you type a simple command: bower install, and Bower does all the work of finding the latest (or specific) version of the requested packages and retrieves them for your application. Once you have a Bower configuration file established, upgrading, downgrading, or moving your assets is simple.

Another thing I like about Bower is that it's not invasive. You can drop it in your existing application today and just use it for the packages you want to without fear of it affecting your existing libraries.

5 Minute Trial

Install the Prerequisites

Bower is a Node.js package, so you need Node.js installed first if you don't already have it. To install Node.js, visit http://nodejs.org/ and follow the installation instructions.

Once Node.js is installed, you install Bower (globally to your system or server) by typing:

npm install -g bower

That's all it takes to install Bower and now the bower command is available in your terminal. Note that the bower command manages packages contextually, so you need to navigate into your target directory in your terminal first, like you would if you were using saygit from a command line. Ok, so now let's create a directory on your system's desktop called /test/ to perform some real Bower testing, then navigate into it so we can start:

If you're Using Windows:

mkdir %userprofile%/desktop/test cd %userprofile%/desktop/test

If you're not using Windows:

mkdir ~/Desktop/test cd ~/Desktop/test

Retrieve your first Package

Once you have created and navigated into your target directory, you can simply install any available package using the defaults. Retrieve the current release of jQuery with this command:

bower install jquery

Now take a look at the contents of your test folder. In it you see a directory named something similar to bower_components with the entire jQuery library in test/jquery/dist. That was simple, right?

Create a Configuration File

Ok, let's be more specific and tell bower we want to add a specific version Bootstrap and FontAwesome by setting up a configuration file. A configuration file will be read and executed every time you run the bower command which makes it easy to manipulate your application's assets in one place:

bower init

Bower init is interactive and will ask you a few questions to set up the skeleton of your config. For now, just hit to choose the default answer to all the questions, and you'll end up with a file named bower.json that looks similar to this:

{ "name": "test", "version": "0.0.0", "authors": [ "Your Name " ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.1.1" } }

Notice it found your existing jQuery install from earlier? Now lets add Bootstrap and FontAwesome by editing the bower.json file by adding the package and version to the dependencies section like so:

{ "name": "test", "version": "0.0.0", "authors": [ "Your Name " ], "license": "MIT", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": { "jquery": "~2.1.1", "bootstrap": "~3.2.0", "fontawesome": "~4.2.0" } }

Note: the bower.json file is standard JSON and will return errors if you are not careful with your quotes and commas. Now run bower install to gather your libraries:

bower install

Now you have Bootstrap and FontAwesome ready to go!

Alter the Installation Path

To recap, we installed jQuery with one simple command. Then we made a configuration file that can fetch specific versions of our favorite frameworks from the Internet quickly and easily. But if you notice, they are all installing into a very specific directory /bower_components/ which is fine, unless your application is currently looking for libraries in the /assets/ folder for example. Let's wrap up by showing you the steps to tell Bower to install your packages into this directory.

The bower.json file you created earlier is a configuration that holds directives for Bower that are specific to the packages you wish to install as well as some meta information. Bower requires another configuration file named .bowerrc if you wish to change higher level settings, like forcing SSL, or pointing to something other than the default Bower repository. Another directive we can set in the .bowerrc file is the target directory, so let's set that up.

First we need to manually create the .bowerrc file.

If you're Using Windows:

echo "" > .bowerrc

If you're not using Windows:

touch .bowerrc

Now, edit the .bowerrc file and add the directory key with the value of assets/vendors like this:

{ "directory" : "assets/vendors"}

This tells Bower to install any packages into the assets/vendors folder (relative to the .bowerrc file). Now you just need to run bower install to collect your packages into this new directory.

bower install

That just touches upon the power of Bower, but there's so much more in the docs and api. If you need just a little more convincing, just visit the large and growing repository of packages found here: http://bower.io/search/ and see if your favorite library is available.

Happy coding!

Blog & Events

Featured Work