Bower, the browser package manager

Bower is deprecated. Do not start a new project on it.

For front-end packages today, use npm, yarn, or pnpm. They handle the same job Bower used to cover, and more.

The last release, 1.8.14, came out in March 2022, and the bower.io homepage itself tells you to use Yarn and Vite for new front-end projects. The package is still on npm for old projects that depend on it. The rest of this post is how Bower worked back in 2013, when it was the usual way to manage browser assets.

How Bower worked

Bower defined itself as a browser package manager, a tool to manage your project assets: JavaScript, CSS and images. Here I’ll only talk about JavaScript, as it was my main use case.

Let’s start, install it:

npm install -g bower

Now create a .bowerrc file in your project root (where you’ll invoke bower) or in your home folder, and add some customization. For example here we tell Bower to install packages in the javascript/components subfolder, and to use a file named bower.json to store its data:

{
  "directory": "javascript/components",
  "json": "bower.json"
}

The bower.json file is the same thing as the package.json file for npm packages in Node.js, except it’s for assets.

Let’s add something popular to the project: jQuery.

bower install --save jquery

Then reference the newly installed package in your HTML:

<script src="javascript/components/jquery/jquery.js"></script>

The --save option tells Bower to add the entry to bower.json, so it’s easy to recreate the same packages structure later, just like with npm.

Once a package is installed, jumping to a newer jQuery release is one command:

bower update jquery

Bower kept a registry of popular packages on its servers, but you could also install any git-hosted project with the git:// protocol, any URL, or a specific tag or commit if you needed an older version for compatibility:

bower install git://github.com/desandro/masonry
bower install http://example.com/jquery.awesome-plugin.js
bower install git://github.com/components/jquery.git#~1.8.1

(GitHub turned off the git:// protocol in 2022, so today those would need https:// URLs.)

Uninstalling a package is simple as well:

bower uninstall jquery

What I really liked about Bower was upgrading dependencies from time to time. Instead of wandering across multiple GitHub projects, a simple bower update took care of everything, except making sure everything still worked on your project. That was our job :-)

Want me to talk about your product? You can sponsor this site.