In PHP we have
composer, in Ruby we have
bundler, and Node.js has
npm for managing our application dependencies. Be they packages, or gems, these tools are improving our development workflows immensely.
These package managers allow us to create de-facto standards-based workflows that assist in the development and deployment of our applications.
That's all well and good for our PHP, Ruby, and Node.js... but what about our frontend?
Increasingly we're turning to libraries like jQuery, Angular.js, Bootstrap, Foundation, and all the multitudes of plugins that go with them. We typically end up manually managing both the libraries — via submodules, or usually just downloading zip files and unpacking them — and dependencies by hand (usually by trial and error).
There is a solution, Bower. Bower — like Bootstrap before it — comes from the folks at Twitter, and is "a package manager for the web".
Installing Bower is easy. Assuming you already have node.js and npm installed (see here for information), first init our project by creating an npm
All of the necessary prompts should be self-explanatory, you can skip the rest.
Next you can install Bower:
This will make the
bower command available globally.
To make it install locally, and automatically, with
npm install, additionally run:
This installs it to
./node_modules/bower, with the
bower command available at
./node_modules/.bin/bower. To add this directory to your path automatically,
npm includes a
bin sub-command that will return the path to this directory no matter where you are in the project, so simply add
$(npm bin) to your path, or you can use an alias like so:
Now you can run either
bower and it will pick up the correct one (local if it exists, or global otherwise) or if you used the alias, you can use
Similar to other package managers, Bower uses the
bower.json file to setup dependencies.
Like both Composer and NPM, Bower will treat every project as an installable library in its own right. This means whether you just want to use Bower to manage your dependencies, or are writing your own libraries, the setup is very much the same.
This will walk you through numerous questions to generate a new
bower.json file. Some of the questions are pretty obvious, while others may be a little confusing:
main file— this would be the entry point for the application, in the case of PHP that's likely something like
what types of modules does this package expose?— as we're not building our own libraries, we can skip this
set currently installed components as dependencies?— if you install packages by hand using
bower install, this will add them as dependencies to your new
add commonly ignored files to ignore list?— this will ignore files and folders that are commonly ignored, such as
node_modules, bowers own
bower_components, or a
would you like to mark this package as private
which prevents it from being accidentally
published to the registry?— answering
yeswill stop you from being able to accidentally publish your "package" to the bower registry.
At this point, you can easily now install packages, updating the
bower.json along the way:
This will install the latest jquery and bootstrap into the
bower_components directory. If you check your
bower.json, it will have been updated with:
Now, if we wanted to install these dependencies in a fresh checkout, we can simply run:
If webroot isn't the root of your project (which it likely isn't), you can easily change the install directory by creating a new file
.bowerrc with the following:
Once you've done this, delete the original install, and install again:
You can then reference the files as
/bower_components/<package>/dist/<files> for example to include Bootstrap you would add the following two lines in their appropriate places:
To keep your libraries up-to-date simply use
Bower gives us complete control over the installation and management of our libraries and their dependencies — in a way that is easily tracked in revision control, and easily distributable within a team using
Now that we have our dependencies under control, versioned and kept up-to-date, what about deployment?
In the next part in this series we will look at how we can work with these bower components both in development and deployment.
Are you already using Bower? We'd love to hear from you about how it fits into your workflow, and if you're not using it, why not?