Introduction to Bower With Example [Latest]

NodeJS and NPM

You have to download and install NodeJS and NPM before proceeding to the next sections. You don’t need to master NodeJS features to complete this tutorials but it’s always good to have a basic understanding on this technology. If you want to learn more about the environment set up and installation of NodeJS, you can go through the following posts otherwise you can jump to next section.

Creating package.json File

package.json is a plain JSON text file which contains all metadata information about an application. You should create a package.json file to install an external tool as a development dependency. Check this link to get more information about package.json.

Package Manager – Bower

You can use Bower as the package manager for the web applications. Bower will help you to find, fetch download the required packages for your application. Bower uses a manifest file called bower.json to keep track of these installed packages.

Bower requires NodeJS, npm and Git. So make sure to install these components before installing bower.

Installing Bower Globally

We can globally install bower using the following command in the command line terminal.
npm install -g bower
Here -g makes the package manager run in the global mode.

Installing Bower for a Project

If you want to restrict the installation to a project then remove the -g from the above command.
npm install bower
You can use the terminal available in JetBrains WebStorm.

• • Launch terminal.
  • Switch to the project root folder.( My project folder : d:LearnAngular)
  • Type the above command to install bower for a specific project.
  • You will see the something like the following image in your terminal.

Searching and Installing Packages Using Bower

You can find Bower packages using the online component directory, or using the command line utility. You can use the following bower search command to find packages for your project.
bower search <query>
For example you can search angular packages using the following command and this will return a number of results.
bower search angular
We can install packages using bower install command. Bower installs packages to bower_components. The following command is used to install packages.
bower install <package>
A package can be a GitHub shorthand, a Git endpoint or a URL. You can check out the official bower site to get more details.

Let’s install angularJS for our project. You need the following command to install angularJS.
bower install angular

You will see the installed angularJS under bower_components folder.

Using bower.json Configuration File

The bower.json file is a manifest file used to define packages that is similar to Node’s package.json file. If you are using multiple packages within your project, it’s a good practice to list these packages in a bower.json file. This will allow you to install and update packages with a single command – bower install.

You can create a bower.json file interactively using bower init command. The following image shows how to create a bower.json file.

bower.json Specification

Managing Dependencies

Now we can look at maintaining dependencies in bower.json file. We will show you how to update the bower.json files.
Let’s create a bower.json file using bower init command. You can see angular package in the dependencies array.

bower.json

{
  "name": "My Project",
  "version": "1.0.0",
  "authors": [
    "Jobin"
  ],
  "description": "My first bower project.",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3"
  }
}

We can add package to our project’s bower.json dependencies array – using  bower install --save command.
The following command will add jquery package and update the above bower.json file.
bower install jquery --save

You can see the jquery package as a dependencyin the updated json file.

bower.json

{
  "name": "My Project",
  "version": "1.0.0",
  "authors": [
    "Jobin"
  ],
  "description": "My first bower project.",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3",
    "jquery": "~2.1.4"
  }
}

You can also add any package to the devDependencies array using bower install --save-dev command.
The following command will add the testing framework jasmine as a devDependency

bower install jasmine --save-dev

You can see the following updated json file with added devDependency.

bower.json

{
  "name": "My Project",
  "version": "1.0.0",
  "authors": [
    "Jobin"
  ],
  "description": "My first bower project.",
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "~1.4.3",
    "jquery": "~2.1.4"
  },
  "devDependencies": {
    "jasmine": "~2.3.4"
  }
}

Listing, Updating and Uninstalling Packages

• You can use the list command to find the installed packages in your project.

bower list

• You can use update command for updating the packages specified in your bower.json file.
  Use bower update for updating all the packages.

bower update

• You can use the following command if you want to update the selected packages.

bower update <package>

• Uninstalling is also a straightforward action using the uninstall command.

bower uninstall <package>

• You can also uninstall multiple packages in the following way.

bower uninstall <package1>  <package2>
Bower is a wonderful tool that can be used to solve the fundamental issues like finding, fetching and downloading the required packages for your application.

That’s all about bower and you will see more angularJS tutorials in the coming posts.