Bower – Web Package Manager

Bower is a package manager for the web. It offers a generic solution to the problem of front-end package management. Using of Bower will eliminate the need of downloading the JavaScript libraries into your project, so all the developer have to do, is to initiate a Bower into their own project and installing the required libraries by using Bower instructions.

This tutorial explains how to install bower and use it in your machine. Before discussing about Bower, it’s important to list of all prerequisite software and install them before going into Bower installation and use. Also end of this tutorial, I have explained how to import jQuery libraries using the bower commands. If you have any questions, please write it in the comments section.

1. Install Git

Git, Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. To install Git into your machine you have to do the following:

• Download Git binary from its official site.
• Double click on the downloaded file which might be Git-1.9.2-preview20140411.exe.

• Click Next.

• Click Next.

• Specify the installation destination and click Next.

• Let default selected components & click Next.

• Let default start menu value and click Next.

• Select the second option “Use Git from the Windows Command Prompt” and click Next.

• Let the default line ending and click Next.
• Wait for a while being Git installed.

• Click Finish.
• To make sure that you’ve installed Git properly, just open a command line window and type git, as a result of it should be shown like this:

Now you have installed the git in your system.

2. Install Node.js

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. For installing the node.js you have to follow the below steps:

• Download the node.js software; the version we used is for 64bit.

• Click Next.

• Accept the agreement and click Next.

• Specify the destination required.

• Click Next & Install.

• Click Finish.
• Open the CMD and type node -v for node version.
• Open the CMD and type npm -version for npm version.

After finish the installation, you’re ready for getting started using Bower. Bower depends on Node and npm.

3. Install Bower

Once the above installations are completed, now it is time to install the Bower to your system. Lets follow the below steps for downloading and installing the bower:

• Open a Command Line for windows.
• Type into command line npm install -g bower .
• Wait for a while until the installing has been finished, as your console should look like

• The bower will be installed into your profile beneath the path C:\Users\YourAccount\AppData\Roaming\npm

• To ensure that you have a proper bower installed, just type into your command console bower -version and for sure you must get a version like below.

4. Bower Example

We have completed the installation of bower in the above section, now we will write a simple example using the bower. It’s good for you going through a example of how could you use the Bower for installing the required libraries. For that, I have created an empty folder called BowerExample located at the D:\BowerExample path and we’re going to use an HTML page referencing a jQuery library. Now, we will not install the jQuery library from the jQuery site and it will not referenced by using the CDN jQuery library path.

To get jQuery referenced and used from within a BowerExample folder you have to follow the below steps:

• As a first step, you have to initialize the BowerExample empty folder by using the command line, just initiate the Bower by typing the command “bower init” for preparing the Bower json files which will contain the required information for your project as you’ve seen in the below screenshot.
• Bower has prompted you set of configuration questions like:
  • the name of the project
  • version
  • descriptions
  • type of modules being used and others.
• In case you’re not pretty sure from your answering just pressing enter for taking the default value.

• Now, it’s the time for looking up jQuery library so just type bower lookup jQuery. That look up will help you determining if you can install it into your project or not.

 

• It would help you ensuring that the library is found and it can be installed as response like Package not found gives you an indication of package is not available and could not be detected by the Bower.
• Now, it’s time to install the jQuery library, so just typing bower install followed by the green name printed out in the previous step which lead us for bower install jQuery.

• The final structure of the example become as below:

The index.html is just a simple HTML page and it might be more complicated than what you’ve seen below

index.html

<html>
	<head>
		<script src="bower_components\jQuery\dist\jquery.min.js"></script>
		<Script>
			alert("JQuery Used For Referencing Div Component :: "+$("#div"));
		</script>
	</head>
	<body>
		<h2>JavaBeat Tutorials</h2>
		<h2>Installing JavaScript Libraries Using Bower</h2>
		<div id="div"></div>
	</body>
</html>

Double click on the index.html cause the above HTML to be executed via the browser.

• Also additional jQuery libraries are installed beside all of the core jQuery library as you’ve seen inside the project structure itself.