manage-front-end-resources-with-bower
Bar Talk

Manage Front End Resources with Bower

Bower is a package manager for the web that is built by Twitter. Now what does this mean? It seems like there are package managers everywhere now. Composer for PHP, npm for Node, and RubyGems for Ruby. It can get confusing when trying to understand them all and what they actually do if you haven’t had any experience with them.

Why Use Bower?

There are plenty of reasons to use a package manager like Bower.

  • If you are tired of going to find every package you want, download, and drag them to your project every time.
  • If you want a specific version of a resource across all your projects.
  • If you just want a simpler way to get all the packages you need.

Quick Example

Sure that all sounds good. But how does it work? Let’s say you want to include jQuery in your current project.

The Normal Way: You would go to jQuery.com, find a download link, press download, unzip the folder, and then drag the file you want into your project. Sure you could use a CDN delivered resource by using something like Google CDN, but you still have to go find that URL (not a big deal sure, but let’s play along).

The Bower Way: bower install jquery. Just type that in your console and the resources for jQuery are pulled into a bower_components folder in your project.

bower-install-jquery

You can then link directly to that file and you’re done!

Install Bower

To use bower you will need Node.js and npm (Node’s package manager that is included in the install). Go ahead and download Node and install it.

You can check your versions by typing node -v and npm -v to make sure they were installed correctly.

node-npm-install

Once you have node and npm installed, we will need to install bower. Since it is an npm package, we can just type:

npm install -g bower

Now we have bower installed! The -g modifier is so that we install bower globally and can use it anywhere in our system.

bower-version

Windows Users To use Bower correctly, you will need to make sure you installed msysgit correctly. During installation Run Git from the Windows Command Prompt needs to be checked. For more details, check out the bower docs.

With Bower installed, let’s get to using it.

Installing Packages

Now you can simply use bower install <package> to install the package you need. You can use this for packages like:

  • jQuery
  • Angular
  • Font Awesome
  • Animate.css
  • So many more…

You can install by the name of a package (jquery), a git repository (git://github.com/someone/some-package.git), or even a shorthand repository on Github (username/package-name).

Installing a Specific Version

If you need a specific version of a package you can install using the version number.

bower install jquery#1.8.3

This will pull in a specific version of the package you want.

Searching for Packages

If you aren’t sure if a package exists, just type bower search <package name>. If you wanted to list all packages, just type bower list.

Now that we’ve gone through the basic features of Bower, let’s see how we can really use it for a project we are working on.

You can also visit the bower components site and see the packages there.

bower-components-site

Setting Up Bower for a Project

To use Bower in a project, you will need two files:

  • .bowerrc The file to tell Bower where to install files.
  • bower.json The file that tells Bower which packages we need.

Define Bower Directory

The default directory that Bower installs packages into (bower_components) isn’t always wanted. To change the default directory that Bower installs into, we will create a .bowerrc file.

// .bowerrc
{
	"directory": "libs"
}

Now, our packages will be installed into our libs folder. Now let’s talk about installing multiple packages at the same time.

Install Multiple Packages

Usually for a project you will have more than one resource that you’ll want to pull in. It isn’t that convenient to type bower install for every package that we want.

It’s more desirable to define a file that will name all the packages we need. This is how many of the package managers are handled. We will define a specific file that will name all the packages we need.

Let’s create our bower.json file and that will name all the packages we need.

// bower.json
{
    "name": "sample-app",
    "version": "1.0.0",
    "dependencies": {
        "bootstrap": "latest",
        "font-awesome": "latest",
        "animate.css": "latest",
        "angular": "latest"    
    }
}

Now to install these files, we will go into our console and type:

bower install

Just like that, Bower will look at our bower.json file and install all the files we need into our libs folder.

bower-installed-libs

Using Our Bower Packages

Now that we have our packages that we need in our project. All we need to do is link to them. It may seem weird to have all the files that jQuery provides but that is how Bower works and it can help to have some of the files pulled in.

To use the files, just link to them in your document:

<!-- index.html -->
<!doctype>
<head>
	<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" href="libs/animate.css/animate.min.css">

	<script src="libs/jquery/jquery.min.js"></script>
	<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="libs/angular/angular.min.js"></script>
</head>

...

Done!

Just like that you can pull in all the files that you need for your project. No more going searching for the specific package you need. Define a bower.json file and you are good to go.

This article only touches on the many things you can do with Bower. I would definitely suggest to go and look at the official docs to see the configuration options and different ways you can use bower.

Chris Sevilleja

Design, development, and anything in between that I find interesting.

View My Articles

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

You Must Construct More Pylons (more articles)