Your browser doesn’t support some of the latest CSS features used to build this site.

Read more about my usage of new CSS features.

Another in the “Front end ain’t scary” series, this post introduces Bower and discusses its uses.

Bower, you say?

Bower is a “package manager for the web” - a tool used for managing dependencies on third-party front end libraries such as jQuery and frameworks such as Angular, amongst 11355* more.

* correct at the time of writing.
Bower Logo
Bower ain’t scary see - just look at him!

Use the snippets above to get going with Bower very quickly.

Integrate it into your team's projects to increase automation, reduce human error and keep third-party libraries and frameworks up to date very easily.

That doesn’t sound scary…

Give me some credit, Bower isn’t exactly something I found scary before but I’ll admit that until I dug deeper into what it really was, I pretty much dismissed the idea of using a package manager.

This was more than likely due to:

  • The (albeit fairly small) learning curve
  • Thinking that I’d prefer to manually download packages from their sources in order to have more control over what I install
  • The thought of having to convincing colleagues and collaborators to use another new hipster-front-end-thingy.

Bowering all the things.

So you need just a few commands to get using Bower.

  1. Install with NodeJS:

    npm install bower -g
  2. Create and enter a directory for your project:

    mkdir yourProject && cd yourProject
  3. Initialise Bower in your project then complete the steps that you are asked to do to create your bower.json file:

    bower init
  4. Finally, install and save** your first package:

    bower install sassface --save-dev
**Remember in the last step to pass the --save or --save-dev flag to save it in your bower.json and your project.

Now what?

Now you have a bower.json file in the root of your project that looks something a little like this:

{
  "name": "myProject",
  "version": "1.0.0",
  "authors": [
    "Daniel Furze <daniel@furzeface.com>"
  ],
  "description": "My awesome project.",
  "main": "index.html",
  "keywords": [
    "Bower"
  ],
  "license": "MIT",
  "homepage": "http://danielfurze.co.uk",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "sassface": "~1.0.8"
  }
}

You will also have your first component downloaded to bower_components - the default directory created by Bower.

To change where your components download to simply create a .bowerrc file in the same root directory as your bower.json and add the directory path in json format as shown below:

{
  "directory" : "site/components"
}

I tend to leave the rest of the attributes as default in my .bowerrc but you can check out the .bowerrc documentation for more info.

Quick tip:

I usually just hit something like this in command line*** on my Mac:

$ echo {\"directory\": \"site\/components\"} | python -m json.tool > .bowerrc ***See, command line is mega quick!

Way to go!

See, you’ve just initialised Bower and started using it straight away to manage your front end dependencies!

And it wasn’t scary.

As I said before, I was apprehensive at first when looking at using Bower mainly because I didn’t see the need to, but since starting work with Building Blocks I’ve integrated it into the front end team’s workflow to help organise our projects and increase the level of automation - thus reducing the change of human error when downloading and using third-party libraries or frameworks.


TL;DR

Bower is a useful tool for managing front end dependencies in a project.