How to use Bower
Bower
In this tutorial we will learn to use Bower in our web projects.
Click here to learn how to install Bower on Mac.
Lets say we have a project folder bower-project and we want to use bower in that project. Then open terminal and go to that project folder.
$ cd bower-project
Output
YUSUF-MacBook-Pro:yusuf-dev yusufshakeel$ mkdir bower-project
YUSUF-MacBook-Pro:yusuf-dev yusufshakeel$ cd bower-project
YUSUF-MacBook-Pro:bower-project yusufshakeel$ ls -la
total 0
drwxr-xr-x 2 yusufshakeel staff 68 Mar 11 13:11 .
drwxr-xr-x 6 yusufshakeel staff 204 Mar 11 13:11 ..
YUSUF-MacBook-Pro:bower-project yusufshakeel$
Once we are inside our project folder we can install packages using the bower install command. This will install packages inside bower_components folder.
Install some packages
Let's say we want to use jQuery and Bootstrap in our project.
So, to install jQuery using bower we will use the following command.
$ bower install jquery
If we want to install a specific version (lets say v1.12) then we will use # followed by the version.
$ bower install jquery#1.12
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower install jquery#1.12
bower jquery#1.12 not-cached https://github.com/jquery/jquery-dist.git#1.12
bower jquery#1.12 resolve https://github.com/jquery/jquery-dist.git#1.12
bower jquery#1.12 download https://github.com/jquery/jquery-dist/archive/1.12.4.tar.gz
bower jquery#1.12 extract archive.tar.gz
bower jquery#1.12 resolved https://github.com/jquery/jquery-dist.git#1.12.4
bower jquery#1.12 install jquery#1.12.4
jquery#1.12.4 bower_components/jquery
YUSUF-MacBook-Pro:bower-project yusufshakeel$
The above command installed jQuery version 1.12.4 inside the bower_components/jquery folder.
And to install Bootstrap we will use the following command.
$ bower install bootstrap
If we want to install a specific version of Bootstrap say, v3.3.7 then we will use # followed by the version.
$ bower install bootstrap#3.3.7
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower install bootstrap#3.3.7
bower bootstrap#3.3.7 not-cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7 resolve https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7 download https://github.com/twbs/bootstrap/archive/v3.3.7.tar.gz
bower bootstrap#3.3.7 extract archive.tar.gz
bower bootstrap#3.3.7 resolved https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7 install bootstrap#3.3.7
bootstrap#3.3.7 bower_components/bootstrap
└── jquery#1.12.4
YUSUF-MacBook-Pro:bower-project yusufshakeel$
List all the packages installed
To list all the packages that were installed in our project folder using bower we will use the following command.
$ bower list
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower list
bower check-new Checking for new versions of the project dependencies...
bower-project /Users/yusufshakeel/Documents/yusuf-dev/bower-project
├─┬ bootstrap#3.3.7 extraneous (latest is 4.0.0-alpha.6)
│ └── jquery#1.12.4 (3.1.1 available)
└── jquery#1.12.4 extraneous (latest is 3.1.1)
YUSUF-MacBook-Pro:bower-project yusufshakeel$
List paths of all the packages installed
To list the paths of all the packages that we have installed using bower we use the following command.
$ bower list --path
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower list --path
jquery: 'bower_components/jquery/dist/jquery.js',
bootstrap: [
'bower_components/bootstrap/less/bootstrap.less',
'bower_components/bootstrap/dist/js/bootstrap.js'
]
YUSUF-MacBook-Pro:bower-project yusufshakeel$
Creating bower.json
Using the bower init command in the project folder creates a bower.json file which holds the dependencies of the project.
Now, inside the project folder run the following command.
$ bower init
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower init
? name bower-project
? description This is a sample bower project.
? main file
? keywords
? authors Yusuf Shakeel
? 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? Yes
{
name: 'bower-project',
authors: [
'Yusuf Shakeel'
],
description: 'This is a sample bower project.',
main: '',
license: 'MIT',
homepage: '',
private: true,
ignore: [
'**/.*',
'node_modules',
'bower_components',
'test',
'tests'
],
dependencies: {
bootstrap: '3.3.7',
jquery: '1.12'
}
}
? Looks good? Yes
YUSUF-MacBook-Pro:bower-project yusufshakeel$
Looking at the above output we can say that the project bower-project has two dependencies - bootstrap v3.3.7 and jquery v1.12.
So, when we give our project to someone else then they can use the bower install command in the project and bower will then install all the dependencies for them.
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower install
bower bootstrap#3.3.7 cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#3.3.7 validate 3.3.7 against https://github.com/twbs/bootstrap.git#3.3.7
bower jquery#1.12 cached https://github.com/jquery/jquery-dist.git#1.12.4
bower jquery#1.12 validate 1.12.4 against https://github.com/jquery/jquery-dist.git#1.12
bower jquery#1.12 install jquery#1.12.4
bower bootstrap#3.3.7 install bootstrap#3.3.7
jquery#1.12.4 bower_components/jquery
bootstrap#3.3.7 bower_components/bootstrap
└── jquery#1.12.4
YUSUF-MacBook-Pro:bower-project yusufshakeel$
Uninstall packages
To uninstall any package we use bower uninstall followed by the package name.
In the following example we are uninstalling bootstrap.
$ bower uninstall bootstrap
Output
YUSUF-MacBook-Pro:bower-project yusufshakeel$ bower uninstall bootstrap
bower uninstall bootstrap
YUSUF-MacBook-Pro:bower-project yusufshakeel$
And that's all for this tutorial. Have fun coding.
ADVERTISEMENT