Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Managing website assets with Bower

Posted: February 21, 2015
Written by: Saints At Play
Category: Bower

There's no denying that front-end development as a discipline has grown rapidly in the last 5 to 6 years with an ever increasing number of competing technologies, particularly in the JavaScript world with an explosion of different libraries and MVC oriented frameworks.

Managing these front-end assets, in addition to development oriented tasks, can be a real hassle, particularly where new software releases are concerned.

This is where Bower steps in to help.

Package management

Bower is a command line utility that provides a simple interface for you to search for, retrieve and install software packages relevant to your front-end development needs. Instead of the time-honoured tradition of going to each vendor's website and manually locating and then downloading the desired package Bower simplifies and streamlines the process for you directly from the command line.

To install Bower requires that you have Node installed. To test if you have type out the following at the console:

node -v

If it is, you should see the version number being displayed. If it isn't download the Node installer here, follow the software installation and then come back to this tutorial.

Once you've verified node is installed type out the following command in your console:

npm install -g bower

What we are doing here is telling the Node Package Manager to install Bower globally so as to make it available to run anywhere on our system.

As Bower is installing to your system you'll see the console logging output of the installation process akin to the following:

bower@1.3.12 /usr/local/lib/node_modules/bower
├── stringify-object@1.0.0
├── junk@1.0.0
├── is-root@1.0.0
├── which@1.0.8
├── abbrev@1.0.5
├── chmodr@0.1.0
├── osenv@0.1.0
├── archy@0.0.2
├── opn@1.0.1
├── rimraf@2.2.8
├── bower-logger@0.2.2
├── lru-cache@2.5.0
├── bower-endpoint-parser@0.2.2
├── graceful-fs@3.0.5
├── lockfile@1.0.0
├── nopt@3.0.1
├── retry@0.6.0
├── tmp@0.0.23
├── q@1.0.1
├── request-progress@0.3.0 (throttleit@0.0.2)
├── semver@2.3.2
├── shell-quote@1.4.2 (array-filter@0.0.1, array-map@0.0.0, array-reduce@0.0.0, jsonify@0.0.0)
├── fstream@1.0.4 (inherits@2.0.1)
├── bower-json@0.4.0 (intersect@0.0.3, deep-extend@0.2.11, graceful-fs@2.0.3)
├── chalk@0.5.0 (escape-string-regexp@1.0.2, ansi-styles@1.1.0, supports-color@0.2.0, has-ansi@0.1.0, strip-ansi@0.3.0)
├── mkdirp@0.5.0 (minimist@0.0.8)
├── p-throttler@0.1.0 (q@0.9.7)
├── promptly@0.2.0 (read@1.0.5)
├── bower-config@0.5.2 (osenv@0.0.3, graceful-fs@2.0.3, optimist@0.6.1)
├── tar-fs@0.5.2 (pump@0.3.5, tar-stream@0.4.7)
├── fstream-ignore@1.0.2 (inherits@2.0.1, minimatch@2.0.1)
├── decompress-zip@0.0.8 (nopt@2.2.1, mkpath@0.1.0, touch@0.0.2, readable-stream@1.1.13, binary@0.3.0)
├── request@2.42.0 (caseless@0.6.0, json-stringify-safe@5.0.0, aws-sign2@0.5.0, forever-agent@0.5.2, stringstream@0.0.4, oauth-sign@0.4.0, tunnel-agent@0.4.0, qs@1.2.2, node-uuid@1.4.2, mime-types@1.0.2, bl@0.9.4, form-data@0.1.4, tough-cookie@0.12.1, http-signature@0.10.1, hawk@1.1.1)
├── glob@4.0.6 (inherits@2.0.1, once@1.3.1, minimatch@1.0.0)
├── bower-registry-client@0.2.3 (graceful-fs@2.0.3, request-replay@0.2.0, lru-cache@2.3.1, async@0.2.10, mkdirp@0.3.5, request@2.51.0)
├── cardinal@0.4.0 (redeyed@0.4.4)
├── mout@0.9.1
├── update-notifier@0.2.0 (semver-diff@0.1.0, string-length@0.1.2, latest-version@0.2.0, configstore@0.3.2)
├── insight@0.4.3 (object-assign@1.0.0, chalk@0.5.1, async@0.9.0, lodash.debounce@2.4.1, os-name@1.0.3, tough-cookie@0.12.1, configstore@0.3.2, inquirer@0.6.0)
├── inquirer@0.7.1 (figures@1.3.5, mute-stream@0.0.4, through@2.3.6, readline2@0.1.1, lodash@2.4.1, cli-color@0.3.2, rx@2.4.0)
└── handlebars@2.0.0 (optimist@0.3.7, uglify-js@2.3.6)

Once the installation is complete you can move on to exploring what Bower is capable of.

Configuring Bower for your project

In your console navigate to your project directory (we are assuming, for the purpose of illustration, that this is a brand new project):

cd /Users/yourNameHere/Sites/newProject

Inside the root of the newProject directory (or whatever your own directory is named) create the following files:

  • .bowerrc (do NOT miss out the dot at the beginning of the file name!)
  • bower.json

These will provide configuration options to instruct Bower where to download packages to (in the case of .bowerrc) ​and instruct Bower which packages and what versions of those packages your project uses (in the case of bower.json).

By default when Bower installs packages it does so in a bower_components directory that's created at the root of your project. This might be okay for some developers but we can override this behaviour in our .bowerrc file like so:

{
  "directory":"public/libraries"
}

As you can see the configuration set-up implements a basic JSON syntax and we use the directory option to instruct Bower to install software packages to the public/libraries directory in our project (you can of course use whichever location inside your project you desire).

We might also want to add some additional configuration options to our .bowerrc file:

{
  "analytics":false,
  "directory":"public/libraries",
  "timeout":50000,
  "strict-ssl":false
}

The above configuration options, of which a full list and explanation is available here, allow us to:

  • Prevent anonymous data usage being collected by Bower concerning packages we search for/install
  • Instruct Bower which directory we want packages to be installed to
  • The timeout value, in milliseconds, for making requests
  • Disallowing SSL key validation when making requests via https

Now we can configure our bower.json file to instruct Bower on what dependencies we require for our project:

{
  "name": "Name-of-Your-Project-Here",
  "version":"1.0.0",
  "private":true,
  "dependencies": {
	"font-awesome":"latest",
	"animate.css":"latest",
	"angular":"latest",
	"angular-route":"latest",
	"angular-filter":"latest",
	"restangular":"latest",
	"modernizr":"latest"
  }
}

If you're familiar with task runners such as Grunt or Gulp then the above configuration shouldn't present any mystery or confusion.

Essentially what we have done is provide a name for our package, a version number and, as we do not want to make this publicly available on Github (or similar), we set the package to be private and then we list all of the dependencies that our project will use in the dependencies section.

We could enter version numbers for each dependency but as we want to use only the most up-to date versions of those dependencies we use the latest keyword to let Bower know this.

Installing Bower dependencies

Now that we have set the groundwork for using Bower we can start to play!

As we have already defined the packages that we wish to install for our project, in the bower.json file we can simply run the following command line instruction to install them to our public/libraries directory (ensure you have navigated to the root of your project directory in the console when executing this command):

bower install

You should see the console logging output akin to the following:

bower angular-route#*       not-cached git://github.com/angular/bower-angular-route.git#*
bower angular-route#*          resolve git://github.com/angular/bower-angular-route.git#*
bower animate.css#*         not-cached git://github.com/daneden/animate.css.git#*
bower animate.css#*            resolve git://github.com/daneden/animate.css.git#*
bower font-awesome#*        not-cached git://github.com/FortAwesome/Font-Awesome.git#*
bower font-awesome#*           resolve git://github.com/FortAwesome/Font-Awesome.git#*
bower angular#*                 cached git://github.com/angular/bower-angular.git#1.3.0
bower angular#*               validate 1.3.0 against git://github.com/angular/bower-angular.git#*
bower animate.css#*           download https://github.com/daneden/animate.css/archive/3.2.1.tar.gz
bower font-awesome#*          download https://github.com/FortAwesome/Font-Awesome/archive/v4.3.0.tar.gz
bower angular#*                    new version for git://github.com/angular/bower-angular.git#*
bower angular#*                resolve git://github.com/angular/bower-angular.git#*
bower angular#*               download https://github.com/angular/bower-angular/archive/v1.3.13.tar.gz
bower angular-route#*         download https://github.com/angular/bower-angular-route/archive/v1.3.13.tar.gz
bower animate.css#*            extract archive.tar.gz
bower angular-route#*          extract archive.tar.gz
bower angular-route#*         resolved git://github.com/angular/bower-angular-route.git#1.3.13
bower animate.css#*       invalid-meta animate.css is missing "ignore" entry in bower.json
bower animate.css#*           resolved git://github.com/daneden/animate.css.git#3.2.1
bower angular#*                extract archive.tar.gz
bower angular#*               resolved git://github.com/angular/bower-angular.git#1.3.13
bower font-awesome#*           extract archive.tar.gz
bower font-awesome#*          resolved git://github.com/FortAwesome/Font-Awesome.git#4.3.0
bower angular-route#*          install angular-route#1.3.13
bower animate.css#*            install animate.css#3.2.1
bower angular#1.3.13           install angular#1.3.13
bower font-awesome#*           install font-awesome#4.3.0

angular-route#1.3.13 public/libraries/angular-route
└── angular#1.3.13

animate.css#3.2.1 public/libraries/animate.css

angular#1.3.13 public/libraries/angular

font-awesome#4.3.0 public/libraries/font-awesome

And, if you look in your public/libraries directory you should those files installed!

Nice and easy, huh?

Okay, so that works if our bower.json file already has dependencies listed but what if it hasn't?

Searching for Bower packages

Firstly, remove ALL of the dependencies listed in your bower.json file so that you are left with something resembling the following:

{
  "name": "Name-of-Your-Project-Here",
  "version":"1.0.0",
  "private":true,
  "dependencies": {
  }
}

Then, in your console, and within the root of your project, type out the following:

bower search jquery

You might have to wait a little while, depending on the speed of your network connection, for all the results to be displayed.

The following is a small selection of what Bower returns for available jQuery packages:

jquery git://github.com/jquery/jquery.git
jquery-ui git://github.com/components/jqueryui
jquery.cookie git://github.com/carhartl/jquery-cookie.git
jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
qunit git://github.com/jquery/qunit.git
jquery.inputmask git://github.com/RobinHerbots/jquery.inputmask.git
yii2-pjax git://github.com/yiisoft/jquery-pjax.git
jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
sizzle git://github.com/jquery/sizzle.git
jasmine-jquery git://github.com/velesin/jasmine-jquery
jquery-mousewheel git://github.com/jquery/jquery-mousewheel.git
jquery-cookie git://github.com/carhartl/jquery-cookie.git
jquery-autosize git://github.com/jackmoore/autosize.git
jquery.ui git://github.com/jquery/jquery-ui.git
jquery-bridget git://github.com/desandro/jquery-bridget.git
jquery.scrollTo git://github.com/flesler/jquery.scrollTo.git
jquery-migrate git://github.com/appleboy/jquery-migrate.git
blueimp-file-upload git://github.com/blueimp/jQuery-File-Upload

You'll notice that the results are returned as: name-of-file file-location.

To download the jQuery library to our public/libraries directory we simply type out the following:

bower install jquery --save

Notice the use of the --save flag - this instructs Bower to write the name and version of the package being installed into the dependencies section of the bower.json file.

When we run this command Bower will log output to the console akin to the following:

bower jquery#*                  cached git://github.com/jquery/jquery.git#2.1.1
bower jquery#*                validate 2.1.1 against git://github.com/jquery/jquery.git#*
bower jquery#*                     new version for git://github.com/jquery/jquery.git#*
bower jquery#*                 resolve git://github.com/jquery/jquery.git#*
bower jquery#*                download https://github.com/jquery/jquery/archive/2.1.3.tar.gz
bower jquery#*                 extract archive.tar.gz
bower jquery#*                resolved git://github.com/jquery/jquery.git#2.1.3
bower jquery#~2.1.3            install jquery#2.1.3

jquery#2.1.3 public/libraries/jquery

And if we take a look at our bower.json file we'll notice the following addition to the dependencies section:

{
  "name": "Name-of-Your-Project-Here",
  "version":"1.0.0",
  "private":true,
  "dependencies": {
	"jquery": "~2.1.3"
  }
}

The tilde character ~ preceding the version number tells Bower that only those packages closest to the version number shown should be installed.

And that's how easy it is to manage front-end assets for your website using Bower. There is of course a lot more we could do using this tool but as a basic guide to using Bower for package management this should be plenty to get you started.

Okay, but what's the different between using npm and Bower?

In a nutshell, use Bower to manage front-end dependencies such as JavaScript libraries and CSS frameworks and use npm to install developer tools such as Gulp, Grunt, Yeoman, Sass etc.

There are no hard and fast rules with which package manager you wish to use but generally the following rules apply:

  • Bower is designed solely for managing front-end assets
  • npm allows dependencies to be nested inside dependencies, Bower doesn't
  • Bower is browser-oriented
  • npm is environment-oriented
« Return to Posts

Comments

Gravatar
Pandora Free Music Online

May 11, 2015

Wonderful blog! I found it while surfing around on Yahoo News.
Do you have any suggestions on how to get listed in Yahoo
News? I've been trying for a while but I never seem to get there!
Many thanks

Gravatar
Http://

May 11, 2015

This blog was... how do I say it? Relevant!! Finally I've
found something which helped me. Thanks!

Gravatar
Twitter.com

May 10, 2015

Good write-up. I absolutely love this website. Keep writing!

Gravatar
Quest Bars

May 9, 2015

I have been browsing online more than 3 hours as of late,
yet I never found any attention-grabbing article like yours.
It is pretty worth sufficient for me. Personally, if all web owners and bloggers made good content material
as you did, the web might be much more helpful than ever before.

Gravatar
Mn Web Design

March 3, 2015

We stumbled over here different page and thought I should check things out.
I like what I see so i am just following you.
Look forward to looking into your web page again.

Posting comments after three months has been disabled.