How to use Bower

Bower

Share

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.