Always up-to-date with Bower

Manage your dependencies to solidify your development process


What is Bower?

Bower is a dependency manager for front-end packages these packages represent projects like twitter bootstrap, font awesome, angular, backbone, animate.css and many more.

A dependency manager allows you to fetch the latest or specific versions of a package. The main reason to use Bower would probably be to automatically stay up to date or with the latest changes.


How to use Bower

Install Bower

You can install Bower through NPM also the Github repository offers a install and usage guide. If you want to install bower startup your CLI and use the following command.

npm install -g bower

Initialize Bower

After installation you can generate a bower.json manifest file to define your packages by using the following command.

bower init

If you open your bower.json file it should look like this.

{
"name": "example bower.json file",
"version": "0.0.1",
"authors": [
"Dennis Bruijn <0x1ad2>"
],
"description": "An example project",
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"animate.css": "~3.4.0",
"bootstrap": "~3.3.5",
"font-awesome": "fontawesome#~4.4.0"
}
}

Install a Bower package

As I mentioned earlier Bower packages are front-end projects You can find a list of Bower packages in the Bower packages registry

To install a package use the following command.

bower install your-package-name

When you install a package the bower_components directory will appear in the root of your project. Also you can use use — save to persist the packages in your projects

Stay up to date

You can update all bower packages using a single command:

bower update

the packages will be updated to their newest version according to the bower.json file.


Tips and tricks

These are some handy tips and tricks using Bower

cache clean

This command allows you to clean cached packages.

bower cache clean <name>#<version>

or just bower cache clean if you want to clean all packages.

home

This command allows you to open the website of a package in your favorite browser

bower home <package>#<version>

bower list

This command allows you to list all local packages and possible updates.

bower list

if you use the — paths option it will generate a simple JSON source mapping


Dependency management for other languages

Besides Bower for front-end packages you also have dependency managers for other languages:

Composer

Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Your main file using composer would be composer.json

NPM

NPM is a tool for dependency management in Node.js. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Your main file using NPM would be package.json


Conclusion

Adding Bower to my workflow was a good choice, I already used composer for my PHP projects and it’s always good to know you applications are up to date.

If you don’t use Bower yet try to apply it to one of your projects and see if you can spot a improvement in your workflow.

The Bower logo

If you enjoyed reading this article, it would mean a lot if you recommend it using the ❤ icon and share with your colleagues and friends. Also follow me on twitter @0x1ad2 and feel free to ask me anything.