Bower is a package manager. As the name implies, it helps you manage all the client-side packages in your application. For example, if your application needs jQuery, you can ask Bower to install it and make it part of the application. Let’s see how that can be done.
Installing a package using Bower
I am starting with an empty application (empty folder) and using Visual Studio Code. You do not have to use VS Code, but I find it handy, lightweight, and works across multiple platforms (and it is free). So here is how things look like at the moment:
Figure 1. Visual Studio Code
My first order of business is to install lodash because it helps me work with arrays, objects, and strings. But if I need to do the installation using Bower, I need to make sure I have Bower installed. I can do so by issuing the command bower -v. This will tell me what version of Bower I am running. If I do not have Bower, I can install it using npm. But remember that npm is part of Node. So I need to install Node first in order to use npm. Now that I have npm available, I am ready to install Bower:
Why the –g option? That way I can have Bower installed globally (not only for this application). Now that Bower is available, I will attempt to install lodash using Bower:
Since Bower uses the bower.json file to keep track of its packages, this command will not work because I do not have this file yet. The easiest way to get this file is to use the following command:
Issuing this command and answering the questions presented to me, I see the following:
Figure 2. bower.json
By completing this step, I have bower.json in my current directory. Now back to lodash. Let’s go ahead and install it and place a reference in the devDependencies folder:
bower install lodash --save-dev
After executing this command, I see the following in bower.json:
Figure 3. bower.json
bower.json is a manifest file used for configuring packages. In our example, we can see the packages our application dependes on in the devDependencies section.
I recommend that you install some additional libraries (like jquery) and even uninstall them to get more familiar with the process. Use the --save and --save-dev to see the impact on bower.json. Keep in mind that you need to make sure you are in the correct folder (where bower.json is) when doing the installations.
In this article, we went through the steps of installing a library using Bower. In the next articles, we will discuss more Bower commands (such as clearing the cache and searching for packages).