Introduction to Bower

Let’s say you are building a website and you are using jQuery plugins, CSS frameworks or libraries. Managing all these resources one by one can be very complicated at times. Instead you can use Bower. Bower is a package manager that you can use in your web development projects, for example. It facilitates the task of downloading packages from libraries and frameworks such as jQuery, Bootstrap, FontAwesome, etc. You can download them one by one or list them all and download them directly in your project, then you just have to link them to the pages that will make use of these resources in your project.

Bower by definition is a package manager for the web, now that in ordinary Spanish means, well, it is a tool that allows us to define which libraries we need to use in our web application and the system detects the dependencies of the required packages.

When bower checks all the dependencies of the requested packages and finds any inconsistencies, it presents us with a minus so that we can choose which version we want to use.

Now you will wonder what kind of packages are available, well the packages range from jQuery to Bootstrap through Linux, it all depends on what our project needs, currently bower has almost fourteen thousand packages.

How to install Bower

Bower is an npm package therefore we need NodeJS and with the following command we can install it.

How to use Bower

Once Bower is installed we can use it immediately in our application to download the packages we want, let’s imagine that we need jQuery in our project for which we only need to use the following command.

As we have seen, it is quite easy to add new components, but it depends on someone’s memory to install the required packages, in order to define all the packages required by our project we use the bower.json file.

Fortunately, bower provides us with a command that allows us to create a basic bower.json file, followed by an example of the interactive command execution $ bower init .

Now what advantage we have with this bower.js file, the first thing would be portability since we only have to version this file in our version control system.

In this case, bower will detect the existence of a bower.json file and proceed to install the requested packages, allowing us to have our version control system cleaner and thus avoid having 50 versions of jQuery stored when in the end the one that interests us is probably the one last.

Specify packet destination

As we have already seen, the default destination for the packages is the bower_components folder , but it is very likely that this location is not to our liking.

Which will make the packages be saved in the web / vendor folder or whatever we want.

I hope it has meet your expectations.