A Quick Introduction To Bower

BowerIf you’re a follower of this blog, you’ll know that I’m a fan of static site generators like Jekyll. Creating a basic Jekyll site is very simple: Jekyll will do the heavy lifting for you. But there’s more to a modern website than a basic scaffold of folders and files. Most depend on a number of external libraries, frameworks, and other tools.

The process of beginning a new project often involves heading to the sites of tools like Bootstrap, Foundation, and JQuery to grab the most recent version, unzipping them and dropping them where you want them in your project folder. That doesn’t seem especially onerous, and it isn’t, but it can be a drag when you do it for every new project.

Bower is a package manager for web developers that streamlines the job. If you’re a Linux user, the concept of a package manager will be familiar to you. A package is a bundle of software components, and package managers allow you to install, update, and otherwise manage them. But package managers don’t just deal with single packages: they also manage the dependencies of those packages.

Let’s take the Foundation framework as an example: Foundation depends on various JavaScript libraries, including JQuery. Bower is capable of installing these dependencies along with Foundation. When you install Foundation, JQuery and all the other dependencies come along for the ride.

Using Bower

The easiest way to install Bower is with the Node package manager “npm”. If you haven’t got Node installed, use your OS package manager to grab it (it’s package managers all the way down). To install Bower globally run the following command.

npm install -g Bower

To continue with the Foundation example, installing the framework is as simple as running “bower install foundation” from within your project directory. Bower will create a folder called “bower_components” and pull in Foundation and its dependencies.

You shouldn’t edit the files in this folder: Bower is capable of updating them to new versions, and files you have edited will be overridden.

If you aren’t sure of the right name of the package you need, you can search the available packages with:

bower search < package-name >

To use the files in your bower_components folder, you can simply integrate them into your web pages as you would any other JavaScript or CSS file. Personally, I don’t do that. Instead I use Gulp to grab the JS files from the Bower folder, concatenate them, minify them, and pop the resulting files into an assets folder which is uploaded to the web server. For Foundation’s SASS files, I import them into my project’s SASS and use Gulp to process them into CSS and put them in the project’s CSS folder.

Bower has some other tricks up its sleeve too. Its complement of packages is fairly extensive, but nowhere near as extensive as the number of projects on GitHub, which is why it’s rather nice that Bower can import GitHub projects. For example, the excellent Sassline framework, which is worth a look at if you’re interested in web typography, isn’t available as a Bower package.

To install it you simply need to run:

Bower install git://github.com/designbyjake/sassline.git

Bower isn’t an essential tool, but modern front-end development involves an increasingly complex set of libraries and frameworks, and Bower makes managing them as painless as possible.

Bower Resources

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.