From today onwards I have taken a challenge that I will learn a new technology every day for a month and will blog about it. 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 that. The goal of this activity is to get familiar with lot of new things happening in community. My main focus would be on JavaScript and related technologies but it can be Java or other technology as well. There will be some technologies on which I might spend multiple days but I will pick new topic each time within that technology. Wherever it makes sense I will try to show how it can work with OpenShift. So, I am expecting it to be fun and a good learning experience.
As my first topic I have decided to learn about Bower.
What is Bower?
Bower is a package manager for client side technologies. It can be used to search , install , uninstall web assets like JavaScript , HTML , and CSS. It is not an opinionated tool and leaves lot of choice to the developers. There are various tools built on top of bower like YeoMan and Grunt. We will talk about them in future posts.
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 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 just look up for any library information using bower info command.
- Helps you work offline : Bower creates a .bower folder in user home directory where it downloads all the assets and keep them available for offline usage when you install any package. Its like .m2 repository in Maven Java. Each time you download any repository it will install that library in two folders one in your application folder and another in .bower under user home directory. So , next time you need this repository it will pick up that version from user home .bower folder.
- 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. So , 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 bower update and all your dependencies will be updates.
Prerequisite
In order to install bower you need to have following installed on your machine.
- Node : Download the latest version of Nodejs 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.
Install Bower
Once you have installed all the prerequisites you are ready to install bower. To install bower type the command shown below.
npm install -g bower
The command shown above will install bower globally. The -g option is used to signify global install.
Let’s Use Bower
After you have installed bower , you will have bower command line working. To see all the things you can do with bower type help command as shown below.
Usage:
bower <command> [<args>] [<options>]
Commands:
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
Options:
-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
Installing package
As bower is a package manager so we can use it to install packages. Let’s install jQuery using bower. Create a new folder somewhere on your machine where you would like to install packages.
bower install jquery
After running this command you will have bower_components folder inside the directory you were working. The content of bower_components is shown below.
$ tree bower_components/
bower_components/
└── jquery
├── README.md
├── bower.json
├── component.json
├── composer.json
├── jquery-migrate.js
├── jquery-migrate.min.js
├── jquery.js
├── jquery.min.js
├── jquery.min.map
└── package.json
1 directory, 10 files
Using Package
Now we can use the jquery package in our application. Let’s create a simple html5 file which will where we will jQuery.
<!doctype html>
<html>
<head>
<title>Learning Bower</title>
</head>
<body>
<button>Animate Me!!</button>
<div style="background:red;height:100px;width:100px;position:absolute;">
</div>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</body>
</html>
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.. blog /Users/shekhargulati/day1/blog └── jquery#2.0.3 extraneous
Searching Package
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
Search results:
bootstrap git://github.com/twbs/bootstrap.git
angular-bootstrap git://github.com/angular-ui/bootstrap-bower.git
sass-bootstrap git://github.com/jlong/sass-twitter-bootstrap.git
Package Information
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
{
name: 'bootstrap',
version: '3.0.0',
main: [
'./dist/js/bootstrap.js',
'./dist/css/bootstrap.css'
],
ignore: [
'**/.*'
],
dependencies: {
jquery: '>= 1.9.0'
},
homepage: 'https://github.com/twbs/bootstrap'
}
Available versions:
- 3.0.0
- 3.0.0-rc1
- 3.0.0-rc.2
- 2.3.2
.....
If you just want information about single package then you can run
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
{
name: 'bootstrap',
version: '3.0.0',
main: [
'./dist/js/bootstrap.js',
'./dist/css/bootstrap.css'
],
ignore: [
'**/.*'
],
dependencies: {
jquery: '>= 1.9.0'
},
homepage: 'https://github.com/twbs/bootstrap'
}
Uninstall 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
[?] description:
[?] main file:
[?] keywords:
[?] authors: Shekhar Gulati <shekhargulati84@gmail.com>
[?] license: MIT
[?] homepage:
[?] 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
{
name: 'blog',
version: '0.0.1',
authors: [
'Shekhar Gulati <shekhargulati84@gmail.com>'
],
license: 'MIT',
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
],
dependencies: {
jquery: '~2.0.3'
}
}
[?] Looks good? Yes
You can view bower.json file
{
"name": "blog",
"version": "0.0.1",
"authors": [
"Shekhar Gulati <shekhargulati84@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.0.3"
}
}
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.
{
"name": "blog",
"version": "0.0.1",
"authors": [
"Shekhar Gulati <shekhargulati84@gmail.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.0.3",
"bootstrap": "~3.0.0"
}
}
That’s it for day1.Hopefully this will give you enough information about bower to get started quickly.
Shameless Plug
If you are a Java, Python, Node.js, Ruby, or PHP developer then you should take a look at OpenShift. OpenShift is a public Platform as a Service, and you can use it to deploy your applications for free.
Shekhar Gulati 
Bonjour Shekhar,
Nice to see you starting on that road. I hope it’ll bring you a lot. As for me, it already gave me something: I didn’t know about bower and I think I’ll start using it. Thanks to you. So good luck !
Stephane
Sorry I didn’t understood your comment. Can you please explain?