As developers, most of us rely on third-party libraries as part of our web applications. PHP developers manage their dependencies with Composer, but how can you manage your client-side dependencies? Most projects start with one core JavaScript library (e.g. jQuery) and one or two plugins, but over time the application grows, and the list of JavaScript libraries grows as well. In this situation, Bower can help you, and in this article you will see how to integrate it into your own project

What is Bower?

"Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat."

Already you can see that Bower and Composer have some common goals in mind, where Bower could be thought of as a kind of Composer for JavaScript.

Install Bower

Bower requires two dependencies; Node.js and npm. These should be installed on your system before you begin. With these dependencies in place, you can install Bower via npm:

sh $ npm install -g bower

Configure Bower

The main configuration file for Bower is .bowerrc, which should always contain valid JSON. This file has several options for us to configure how Bower works on our system, such as:

  • cwd: the directory from which bower should run
  • shorthand-resolver: define a custom template for shorthand package names
  • directory: the path in which installed components should be saved
  • Many more! See this document for a full list

For now we will begin with a very simple configuration file. Place the following into a file called .bowerrc in your project directory:

This tells Bower where to place the dependencies that it fetches for us.

Specify Dependencies

Next, we’ll describe our library requirements to bower. This is just as simple as configuring the tool was. We will create a file called bower.json and add the newest version of Bootstrap as a dependency:

You can find a whole list of the various libraries supported by Bower on the Bower components page.

Install Dependencies

Now we’re only one step away from having our JavaScript dependencies installed and ready to use. Most people will have git installed already, but if not then do note that this is required in order to be able to install packages. Now we can install our dependencies:

The output of this command should look something like this:

As you can see Bower automatically installed jQuery as well as Boostrap, since Bootstrap 3 depends on jQuery.

Bower + composer

To automate installation of libraries with Bower, we can connect it with Composer. With this approach, each time we run composer install or composer update, Bower will also update our JavaScript libraries. We can achieve this by changing composer.json a bit and adding a scripts section, like this:

Adding this script section means that each time we update or install with Composer, these hooks will run our bower commands as well. This is very useful for making a simple way to get all your dependencies installed or updated.

Hopefully this tutorial was useful to you; many PHP developers are already using Composer, but our projects often have other web-related dependencies and linking Bower to Composer makes it easy to manage the two together. What tricks do you use to keep your project dependencies clear? Leave a comment and let me know!