Use Bower to Get Client Dependencies

Bower is a JavaScript tool to get client dependencies in your project using npm packages.

The requirement for bower is that you need to install Node.js first.  You can follow along in the this blog to install node.js, After node.js is installed open the command line and type the following command

npm install -g bower






The command above will install bower in your system globally.  Now we can use bower install packages individually, but the convenience of bower is in the bower.json file.  With the bower.json file we can specify all the dependencies that our project will need in one configuration file.

Here are the steps:

1.  Create a folder call "AngularShoppingApp"

2.  Create a file call bower.json in your favorite text editor

3.  The content of the bower.json file should look like this

{
  "name": "ShoppingApp",
  "private": true,
  "dependencies": {
    "angularjs": "~1.5.7",
    "bootstrap": "~3.3.6"
  }
}

The important thing to look at is the dependencies section.  As you can see we listed out our dependencies in the json file and let bower take care of it for ourselves.
The ~ symbol tells bower to get any version that starts with the numbers after it.  The other notable values are the "name" which is the name of the application.

4.  Now we want to specify the location of where we want the bower components are installed in our application.  For that we want to create the .bowerrc file .  the only variable we want to set in the file "directory" file, which specifies where we want the bower components to be install.  Let's install the bower components in the "js/lib" folder. So in the .bowerrc file type in the following

{
  "directory": "js/lib"
}

4.  Now open up the cmd file and navigate to the folder where the bower.json file is located, and type in the following command

bower install

after you type bower install the JavaScript libraries will be installed in the "js/lib" library


The folder structure of your app should look like the following: