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.

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

View My Contributions

Stay Connected With Us
hover these for magic

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

  • quagliero

    Package management for the front end! w00t. Is it possible to define different directories for libraries, rather than one global destination folder? e.g. /js/libs/ and /css/libs/

    • http://scotch.io/ Chris Sevilleja

      I’ve been looking around and trying to figure out how to do it. No success.

      If you find anything, definitely post it here. I’d sure like to know.

      • quagliero

        Will do. I suppose if you’re Grunting or Gulping you might concat/compress them to a different output file anyway?

        • http://scotch.io/ Chris Sevilleja

          Yes that could definitely be an option. I’ll have to do a writeup on both of those soon.

    • kukicadnan

      Yes there is a very easy way to do this actually. If you are using a recent version of Bower 1.x+, create a .bowerrc file in the same directory where your bower.json file is. The .bowerrc file will allow you to configure a lot of different settings, but for setting up a custom directory you’d do:

      {
      “directory” : “{directory you want}”
      }

      so for example:

      {
      “directory” : “public/assets/libs”
      }

      • quagliero

        Isn’t that just one directory though? I was thinking of different directories for different types of assets. Think I’d just do this with Gulp or Grunt though.

  • opensas

    very great an useful article, but I just can’t seem to override the bower_components folder. This is a question I asked at SO: http://stackoverflow.com/questions/21334532/cannot-change-bower-components-folder
    Anybody else having the same problem?

  • Nomad

    Hi Chris,
    Thanks for the amazing Intro on Bower. As a front end web developer, I was looking for a quick get start guide for Bower and your post proved perfect :)

    One request, can you please write a tutorial on Using of Yeoman? (Yo and Grunt) As it ll be great to understand the scaffolding of workflows for modern web apps.

    Thanks in advance :)

    • http://scotch.io/ Chris Sevilleja

      Yes that’s definitely in the pipeline. We’ll get that out soon! Thanks for reading.

  • Pingback: Setting Up a MEAN Stack Single Page Application ♥ Scotch