All posts tagged “Bower”

How To Configure Projects & Reinforce Them Using Bower

In Part 1 of our Bower series, we have shown you Bower’s essential features, which include installing, updating and removing website libraries. Apart from these, Bower also provides some flexibilities. Here we will show you how to configure Bower and reinforce your projects with it.

Change the Bower Directory

By default Bower will create a new directory name: bower_components. If the name does not appeal you, you can change it.

First, we need to create a new file named .bowerrc. Then add the following line in it.

{ "directory": "components" } 

It tells Bower to create and save the libraries installed in the folder named components.

Bower JSON

Bower JSON is a file that defines your project as a Bower package. The file specifies the project name, version, the project dependencies as well as information that is very helpful to keep tracking and documenting your project.

To create this file, navigate to your project directory and type bower init. You will be prompted with several options and questions, including the
(of your project). While the rest options are optional, I would suggest that you fill the following: description, version, main that defines the project primary files, author, license, homepage and dependencies which are the libraries that your project relies on.

If you have the libraries installed in bower_components already, you may select Y when it prompts “set currently installed components as dependencies?“; Bower will register them as the dependencies in the file automatically.

Bower will show you the content before it creates the file. If it looks fine, you can type Y

…and a new file named bower.json will be created in your project directory.

Exporting old projects to Bower

Now that you know Bower is a great tool to help you manage your projects, you may want to use it in your previous projects. Typically, in your old projects, you may have linked the libraries this way within the <head>.

 <link rel="stylesheet" href=""> <link rel="stylesheet" href="css/style.css"> <script src=""></script> <script src="js/accounting.js"></script> 

Taking that as our example, here we can see that the project depends on jQuery, Normalize, and Accounting.js (see our previous tutorial, Formatting Numbers With Accounting.Js).

So, let’s run bower init in this project. Then open the bower.json, and define them as the dependencies.

 "dependencies": { "jquery": "1.10.2", "normalize-css": "3.0.1", "accounting": "0.3.2" } 

Next, run thebower install command. This will scan bower.json and install the libraries that are listed under dependencies.

You can safely delete the old libraries and link them to the Bower component directory instead. And anyone that will be carrying on the project later could easily install and update the libraries with Bower commands.

Wrap Up

Bower gives us many configurations, most of which we can’t cover in full here. To explore more of its command lines, you can type bower help that will return the other Bower utilities. Lastly, you can use Bower at any project scale (small or large). It should be helpful to make the project more manageable.

How to Install, Update & Remove Web Libraries Easily With Bower

To build a website, we commonly rely on a number of libraries, be it in the form of CSS or JavaScript. If I would build a small website that will display an image slideshow, for example, the website probably would need jQuery and a jQuery plugin, Flexslider. These libraries are the dependencies for the website to function.

While adding these libraries should be an easy task, when it comes to a large-scale website which requires more libraries, everything could be cumbersome and messed up from the beginning. You may have to trawl from one repository to another repository, downloading each of the libraries, extracting the packages, and finally putting them in your project directory.

When the new version becomes available you will have to be doing all of that again (sounds like a lot of work, right?).

If that sounds like what you have been doing for ages, this article may be worth a read. Here we will show you a handy tool called Bower that makes managing website libraries a breeze. Let’s check it out.

Getting Started

To use Bower, you have to install Node.js. Since Bower is based on Node.js, you should be able to run Bower on every platform: Windows, Mac, and Linux.

Once you have installed Node.js, open Terminal (or Command Prompt) and run this command line to install Bower.

 npm install -g bower 

Installing Libraries

Now we are ready to use Bower. Let’s start by searching a library that we want to put in our project directory. Assuming that you are currently inside the directory, you can type bower search {name of the library}. Here, for example, I searched for Normalize.css, a library to make an element’s style consistent in all browsers.

 bower search normalize 

The command will list a bunch of results; not only that it gives us the original Normalize, it also shows us Normalize versions that have been converted to LESS, Sass, Stylus, and the other platforms.

Once we have picked which one to install, we can type bower install {{name of the repository}}. In this example, I will install Normalize LESS as well as jQuery.

 bower install normalize-less jquery 

This command will download the latest version of normalize-less and jQuery, and save it in a new folder named bower_components; you should now find the folder created in your project directory.

Alternately, if you want to install the older version of the library, you can run the command followed with the version number, this way.

 bower install jquery#1.10.0 

Now that we have the libraries, Normalize and jQuery, in our project directory, we can use them by referencing the jQuery from the bower_components folder in the HTML document and import Normalize LESS in the other LESS stylesheet.


 <script src="bower_components/jquery/jquery.min.js"></script> 


 @import "bower_components/normalize-less/normalize.less"; 

If one of the libraries is no longer used in the website, you can uninstall it easily with bower uninstall command, like so.

 bower uninstall normalize-less 

Updating The Bower Components

Let’s say you have been working on your project for several months, and some libraries that you are using (like jQuery) have released a new version. In this circumstance, we can use Bower to update jQuery to the latest version. But first let’s check out whether the new version has been registered in bower with bower list command.

The latest version of jQuery, as you can see below, is 2.1.1.

To update jQuery, we can type bower update jquery. Once the update has completed, you can run bower list command again to verify the current installed version. Below, as you can see, we now have the latest version of jQuery.

Wrap Up

Bower is a really handy tool that I think you should leverage in your project. It’s like having an AppStore, but for your website stuff – we can install, update, and remove libraries conveniently.

In the next article we will dive into Bower and explore some more advanced features. So stay tuned.