How To Configure Projects & Reinforce Them Using Bower

By . in Web Design. Updated on .

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.

Recommended Reading: How To Install, Update & Remove Web Libraries Easily With Bower

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 name (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="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail