Have you ever cloned or downloaded a GitHub repo, only to find a number of strange and extraneous files which you don't recognise?
Let's say, for example, you are working on a website and need a library, JavaScript or CSS, to add some features to your project. You find the perfect library in a GitHub repository, so you download it right away. When you extract the package, you discover several strange files, one of which being bower.json.
Furthermore, you may also have found instructions in the repository typically saying something along the lines of:
Install with Bower:
bower install bootstrap.
You might well wonder what this file is used for, let alone why you should install it with Bower. I was recently asked these very questions by a web designer friend of mine and I suspect there are many people feeling similarly confused. If you're one of these people, this quick tip should help you out!
A Bower File
Bower is a package manager for the web. It helps you manage dependencies; files (perhaps third-party, often publicly available via GitHub) which you need for your project.
bower.json, the file we're talking about here, plays a central role in a Bower environment. Previously, it was named component.json, but the name then changed to bower.json to avoid conflict that may occur with the other tools using the same file name.
bower.json helps Bower to understand the project; it records meta data such as the project's name, the version, the author, the license, the dependencies, and so forth. The information is structured in JSON which typically looks as follows:
1 |
{
|
2 |
"name": "awesome", |
3 |
"version": "1.0.0", |
4 |
"authors": [ |
5 |
"John Doe" |
6 |
],
|
7 |
"description": "The Most Awesome thing in the Galaxy", |
8 |
"license": "MIT", |
9 |
"dependencies": { |
10 |
"cool-library": "1.1.2", |
11 |
"good-library": "2.1.3" |
12 |
}
|
13 |
}
|
From this human-readable JSON file we can deduce that this project is named "awesome", is currently at version "1.0.0", was authored by "John Doe", a couple of other details, and requires a couple of dependencies to be present in order to work.
If you find bower.json in a library, it implies two things:
- First, the project author defined the library as a Bower package. The project may have been published to the Bower registry, a central collection of packages, so that it can be added into your project through Bower command line.
- The project author may have used Bower to organize the project libraries, making it easier for other developers who may use or extend the project later on.
Bower uses this file in several ways. It uses the meta details to display the package information when we search the Bower registry.
Bower will also parse the file when we execute several commands such as bower version and bower install.
Bower Install
bower install is the command to install a package which is registered in the Bower registry. This command will also install the packages listed in the bower.json under "dependencies". By default, these packages will be added in a folder named bower_components.
As an example, let's install Animate.css and Bootstrap with Bower.
To begin with, you'll need actually need to install Bower. Take a look at Meet Bower: A Package Manager For The Web for details on this. With that done you can type the following command in the Terminal or the Command Prompt (if you are using Windows) which installs these packages simultaneously:
1 |
bower install animate.css bootstrap
|
Now you should find them added in the bower_components.
As you can see above, we have an extra folder, jquery. This is because Bootstrap set it as a dependency; the Bootstrap JavaScript components require jQuery to function. If you take a look at the bower.json file included in the package, you will find it listed at the end of the file, as follows.
What's Next?
Assuming you have just downloaded a library with an accompanying bower.json file, the first thing I would suggest is that you inspect the file for dependencies.
As an example, I've downloaded a JavaScript library called Revealer.js. Revealer.js apparently requires Reveal.js to function. We can find it listed as a dependency within the bower.json file, as shown below:
1 |
{
|
2 |
// ...
|
3 |
"dependencies": { |
4 |
"reveal.js": "~2.5.0" |
5 |
},
|
6 |
// ...
|
7 |
}
|
Just to confirm this, if we open the index.html from the views folder, we will find reveal.js file is linked within a script tag, like so.
1 |
<script src="components/reveal.js/js/reveal.min.js"></script> |
Now we need to open the library's folder in the Terminal or Command Prompt, then type:
1 |
bower install
|
As mentioned earlier, this command will download all the registered packages in bower.json at once.
Note: In this particular case, the package is added in the public/components folder, as specified in the .bowerrc file. A .bowerrc file sometimes accompanies the bower.json file and is used to specify custom install directories.
Updating the Package
The package that we have installed may be updated over time, either for fixing the bugs or adding new features. With Bower, updating these libraries is a breeze. First of all, let's type:
1 |
bower list |
This will list the currently installed packages in our project, and show us the latest version available. In our case, it seems Reveal.js has a newer version. So, let's update it.
Type this command to update Reveal.js.
1 |
bower install --save reveal.js#2.6.2 |
This will also change the version recorded in our project's bower.json.
1 |
{
|
2 |
// ...
|
3 |
"dependencies": { |
4 |
"reveal.js": "2.6.2" |
5 |
},
|
6 |
// ...
|
7 |
}
|
Conclusion
Bower is a really handy tool for managing project libraries. It's a bit like having our own AppStore or Google Play; we can install, update, and remove libraries easily. I hope this tip has helped avoid any confusion you may experience when downloading third party libraries, and shown you the benefits of using Bower in your workflow.
Further Reference
