Managing packages with Bower

Installing Bower

Just do it globally so you can access it from anywhere. You need to have previously installed Node.js in order to install it, and Git in order to use it.

npm install bower -g

Have in mind you will also need to install it in your TeamCity server as you’ll probably want to get the packages from there too.

Installing packages

Installing a package with bower is as easy as moving to the root folder of your project using the console and executing something like this:

bower install angularjs

You can also install a concrete version using #

bower install angularjs#1.4.9

Or install more than one package with one command:

bower install angularjs jquery bootstrap angular-ui

Saving installed packages

The main idea of bower is to keep track of what packages your solution needs. To do that, you have to create a bower.json file manually and initialize it with this:

{
  "name": "myPackage",
}

The name is required, you can set whatever you want. Once the json has been initialized now you can add a flag to your install command to include the dependencies into bower:

bower install angularjs --save-dev

And automatically, the file is updated:

{
  "name": "myPackage",
  "devDependencies": {
    "angular": "angularjs#~1.4.9"
  }
}

Note that if the file bower.json doesn’t exist bower won’t create it and won’t add the component to any file. You can run “bower init” to launch a wizard that allows you to generate the file with some basic data including the components that you already installed. After running it, you end up with something like this:

{
  "name": "myRepo",
  "authors": [
    "Ruben <[email protected]>"
  ],
  "description": "its description",
  "main": "",
  "moduleType": [
    "node"
  ],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "angularjs#~1.4.9",
    "jquery": "~2.2.0"
  }
}

Installing packages inside bower.json

Of course, the idea of saving which packages we need is to be able to get them back when needed, re-installing all required packages is as easy as running this command on the root folder (once bower.json is there):

bower install

Searching for packages

When you aren’t sure of a package name or you need to look for some you can use the search command to get a list of available packages:

bower search bootstrap

That will list a list of packages related to bootstrap, which also allows to find new tools that may be of help.

Updating packages

Another feature we want bower to do for us is updating packages to their latest version, which can be done just executing this command:

bower update

But, if you have many packages and prefer to update one by one to check that everything continues working, you can also update one at a time:

bower update bootstrap

Or a few in one go:

bower update bootstrap angular jquery

Uninstalling packages

To remove a package you won’t need anymore just execute uninstall with the package name:

bower uninstall jquery

You can uninstall more than one package in one go:

bower uninstall jquery bootstrap angular