I am excited to announce that I have taken a personal challenge that I will learn a new technology every day for a month and will blog each new technology. I will also try to do a small screencast. After my normal office working hours I will spend couple of hours learning a new technology and one hour writing about what I learned.
As my first topic I have decided to learn about Bower.
What is Bower?
Why should I care?
- Saves time : The first reason why should learn about bower is that it will save the time you spend finding client side dependencies. Each time I have to install jQuery I go to the jQuery website and either download the package or use the CDN version. With bower, you can just type a command and you will get jquery installed on your local machine. You don't have to remember version numbers etc. You can look up any library information using bower info command.
- Helps you work offline : Bower creates a .bower folder in the users home directory where it downloads all the assets and keeps them available for offline usage when you install a package. If you are familiar with Java, Bower is similar to the *.m2* repository for the popular Maven build system. Each time you download any repository it will install that library in two folders -- one in your application folder and another in the .bower directory under the user's home directory. Given this, the next time you need this repository it will pick up that version from the user's home .bower directory.
- Makes it easy to express client side dependencies : You can create a file called bower.json where you can specify all your client side dependencies. Anytime you need to figure out what all libraries you are using you can refer to this file.
- Makes update easy : Suppose a new version of a library is released with an important security fix, in order to install the new version you just have to run a command and bower will update all of your dependencies with the new version.
In order to install bower you need to have the following installed on your machine.
- Node : Download the latest version of node.js from http://nodejs.org/
- NPM : NPM is node package manager. It comes bundled with Nodejs installation. So, once you have installed Node you will have NPM installed as well.
- Git : You need to have git installed on your machine as some packages fetch code from git repositories. So, install git for your operating system.
Once you have installed all the prerequisites you are ready to install bower. To install bower type the following command:
$ npm install -g bower
The command shown above will install bower globally. The -g option is used to signify a global install.
Let's Use Bower
After you have installed bower, you will have ability to use the bower command line. To see all the things you can do with bower, type help command as shown below:
$ bower help
bower <command> [<args>] [<options>]
cache Manage bower cache
help Display help information about Bower
home Opens a package homepage into your favorite browser
info Info of a particular package
init Interactively create a bower.json file
install Install a package locally
link Symlink a package folder
list List local packages
lookup Look up a package URL by name
prune Removes local extraneous packages
register Register a package
search Search for a package by name
update Update a local package
uninstall Remove a local package
-f, --force Makes various commands more forceful
-j, --json Output consumable JSON
-l, --log-level What level of logs to report
-o, --offline Do not hit the network
-q, --quiet Only output important information
-s, --silent Do not output anything, besides errors
-V, --verbose Makes output more verbose
--allow-root Allows running commands as root
Bower is a package manager so we can use it to install new packages that we want to use in our applications. For example, let's look at how to install JQuery using the Bower system. Create a new folder somewhere on your machine where you would like to install packages and type the following:
$ bower install jquery
After running this command you will have a bower_components folder inside the directory you were working. The content of bower_components is shown below:
$ tree bower_components/
1 directory, 10 files
Now we can use the jquery package in our application. Let's create a simple html5 file which will where we will jQuery.
As you can see you just reference the location of jquery.min.js file and you are done.
List All Packages
If you want to find out all the packages installed in your applications you use list command to get all the information:
$ bower list
bower check-new Checking for new versions of the project dependencies..
??? jquery#2.0.3 extraneous
Suppose you want to use Twitter Bootstrap in your application but you are not sure its package name. To find the package name you can use search command:
$ bower search bootstrap
If you want to get information about a particular package then you can info command to get information about that package:
$ bower info bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.0.0.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.0.0
jquery: '>= 1.9.0'
If you just want information about single package, you can use the info command:
$ bower info bootstrap#3.0.0
bower bootstrap#3.0.0 cached git://github.com/twbs/bootstrap.git#3.0.0
bower bootstrap#3.0.0 validate 3.0.0 against git://github.com/twbs/bootstrap.git#3.0.0
jquery: '>= 1.9.0'
Uninstalling a Package
To uninstall a package you can use uninstall command:
$ bower uninstall jquery
Using bower.json file
We can use bower.json file to make installing packages easier. You can create a file title bower.json in your application root folder and define its dependencies. You can use bower init command to create bower.json file as shown below.
$ bower init
[?] name: blog
[?] version: 0.0.1
[?] main file:
[?] authors: Shekhar Gulati <email@example.com>
[?] license: MIT
[?] set currently installed components as dependencies? Yes
[?] add commonly ignored files to ignore list? Yes
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? No
'Shekhar Gulati <firstname.lastname@example.org>'
[?] Looks good? Yes
You can view bower.json file
"Shekhar Gulati <email@example.com>"
You will notice that it added our jQuery dependency.
Now lets suppose we want to use twitter bootstrap as well. We can install twitter bootstrap and update the bower.json file using following command:
$ bower install bootstrap --save
It will install the latest version of Twitter Bootstrap and update the bower.json file as well:
"Shekhar Gulati <firstname.lastname@example.org>"
That's it for day 1! Hopefully this will give you enough information about bower and allow you try it out for yourself.
- Sign up for OpenShift Online and try this out yourself
- Promote and show off your awesome app in the OpenShift Application Gallery today.
Stay informed and learn more about OpenShift by receiving email updates.