× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Getting started with Bower

In this article, we will explore using Bower in web applications.

Motivation

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:

npm install –g 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:

bower install lodash

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:

bower init

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).



Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login