Maintain Bower packages per environment basis

In this blog post I'm sharing my experience on how I setup and get running with multiple bower configurations per environment i.e. Local, Dev, Test and Production. To automate most of my tasks I am using Gulp. I’ll assume you have installed the Bower command-line utility and know about the various commands that are available for managing packages.

Let's get started!

Background

I am authoring multiple bower packages and relying on some external 3rd party vendor packages for couple of in-house web applications. Our custom developed packages go through the routine deployment process and staged through multiple environments before they land in Production world for others to consume. We have Local, Dev, Test and Production environment.

Problem Statement

While developing in my local environment my bower configuration file i.e. bower.json would have different dependency endpoints as compared to my Dev, Test or Production endpoints. For example:

In Local:

"dependencies": {

        "myorg.assets": "C:/Users/user1/AppData/Local/MyOrg/Bower/Components/myorg.assets"

}

• In Development:

"dependencies": {

        "myorg.assets": "\\\\internalshare\\dev$\\BowerPackages\\myorg.assets"

}

• In Test:

"dependencies": {

        "myorg.assets": "\\\\internalshare\\tst$\\BowerPackages\\myorg.assets"

}

• In Production:

"dependencies": {

        "myorg.assets": "\\\\internalshare\\prd$\\BowerPackages\\myorg.assets"

}

As you can see, I need to change dependency endpoints based off environment in bower configuration file so that

bower install

or

bower update

command picks the packages from their right endpoints.

Solution

With this problem situation in hand I tried to resolve this with following solution. Obviously this was not the first attempt but I'm not going to explain my other unsuccessful attempts. This may not be best however worked for me within the 3 constraints of the project.

Instead of having single bower.json config file at the project root, I created multiple folders per environment and added bower.json file into each of those. Besides adding bower.json file I also added .bowerrc file per environment into each of those folders.

|bower-dev
    |.bowerrc
    |bower.json
|bower-local
    |.bowerrc
    |bower.json
|bower-tst
    |.bowerrc
    |bower.json
|bower-prd
    |.bowerrc
    |bower.json

Needless to say, each bower.json config file now has dependency endpoints pointing to right location as per environment.
Secondly, my .bowerrc file nested under each of these environment folders tells the bower engine to install the bower components at web root level instead local to the folder.
Contents of .bowerrc file looks like:

{
    "directory": "../bower_components"
}

Final piece of the puzzle is my gulp task. As I mentioned above in the article that I am using gulp to execute bower tasks hence I need to distinguish the environment over there as well. I am using gulp-bower plugin for executing bower from gulp task. In the same task, I'm setting the cwd based on Environment type you pass as task argument.

Final Thoughts

As more and more libraries takes place in our web applications, the complexity of our projects will inevitably increase. Tools, techniques, wisdom and so called "patience strategy" helps us in managing this complexity.