Introduction to Bower(front-end package manager)

If you are creating a website you might be needing different framework to perform specific task for e.g. Bootstrap to make your site responsive, jQuery to make your site interactive & so on.

To manage all this stuff you can use bower. Bower let you download this frameworks, update this frameworks without going to the particular sites of the framework.

Bower is built by Twitter.

Bower is a node module & to install bower you need to have npm & node.

I have created a video on the same follow the link below to watchBower Tutorial for Beginners

To install bower run this command in your terminal

npm install -g bower

This will install bower globally on you system & you can use bower commands anywhere in your system.

How to install packages using bower

Installing packages with bower is super simple. Run this command everytime you want to install new package.

bower install package-name

Suppose I want to install bootstrap in my project. I have to just run this command

bower install bootstrap

& Bower will do all the hard work for me. Isn’t it cool :)

Not only that you can also install specific version using this command

bower install bootstrap#4.0

Create bower.json file

Before doing anything I will suggest creating bower json file which will keep track of dependencies you install.

To create bower.json file run this command

bower init

You can answer whatever it is asking or simply press enter.

Now if you go to your project directory you will see a bower.json file.

Whenever you are installing some dependencies you can use this command

bower install bootstrap --save

If you use — save bower will keep track of dependencies.

Updating packages

If you want to update all our packages it’s very easy just run this command

bower update

How to uninstall dependencies?

Run this command

bower uninstall bootstrap --save

Benefit

If you working in a team you don’t have to give complete component folder generated by bower just provide bower.json file & tell your colleague to run bower install. It will automatically install all the dependencies listed in bower json file.

If you want to know more you can run this command

bower -h

If you want to see the list of dependencies you have installed use this command

bower list

To know the path that you have to give in your script or link tag use this command

bower list --path

Note : You need to include bower_components folder generated by bower in to .gitignore(When you generate bower json it will ask to include bower_components into .gitignore simply say yes). This will tell git to ignore bower_component files. Other devlopers only need bower json file. They just have to run bower install to install all dependencies into their system.