Since it was developed, Bower has remained a core tool for web engineers all over the world. Along with GruntJS, Bower is another marquee name in the web dev industry that often confuses people who may be just starting their quest.
In its simplest terms, Bower manages different packages that you’d want your project to use. It’s important to note that “package” is basically another term for a framework or a library.
BootStrap is a package. Good ol’ jQuery is another package.
To quote Bower’s website:
Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
Why You Should Use A Package Manager
As a developer you should be working to automate your process as much as possible. Simply put, it’s inefficient to manually download files and place them into your project’s directory one at a time.
With bower installed you eliminate the need for having to manually do this by installing the library through Bower.
For example, think of a situation in which you you want to include Angular into your project. Instead of having to search the web for Angular’s CDN or raw file, you can run bower install angular inside your project’s directory and bower will install the framework for you! Quick, clean, and so darn simple.
This becomes increasingly more useful to development when projects grow larger.
Using bower.json and .bowerrc
These two files are vitally important to fully utilize Bower on your own.
Bower.json
Bower allows you to re-use the same packages throughout different projects by allowing you to configure a bower.json file. This file is very similar to that of node’s package.json. It consists of different package dependencies for an individual project.
These packages are defined in the form of JSON objects.
In order to reuse a system of packages, all you need to do is include bower.json inside your project, then run bower install on it.
Additionally you can uses Bower’s command-line tool to add packages to your bower.json file by appending the --save flag when running bower install <package-name>.
.bowerrc
Next let’s take a look at how we can use .bowerrc. If you’re not exactly sure why some files end in rc, don’t worry because you not alone.
RC files are config files for different programs and software – specifically on Unix-based operating systems. When configuring Bower in your project .bowerrc is used to specify paths for our specific assets in our project.
Think of a scenario where you wanted all of your packages to be installed inside your public/libs folder. In order to do this you’d define the directory in your .bowerrc file below.
.bowerrc example
{"directory":"public/libs"}
If you do not specify a directory then Bower will install your packages into a default folder called “bower_components” at the root of your project. This is Bower’s default configuration; and although this is fine I personally find it easier for developers to specify a directory relative to your project’s main folder.
Conclusion
Hopefully by now you have a solid understanding of how Bower works and why so many developers rely on it each day. The importance of workflow automation is something that cannot be stressed enough. I highly encourage you to try out Bower and get a first hand look at what all the hype is about.