Friday, March 27, 2015

Setting up a private Bower repository in an offline network

Previously I blogged about setting up an offline NPM repository (in a disconnected-from-the-internet network). This gave web devs in my organization a solution for working comfortably with nodejs packages. But what about front-end packages?

If you are not living on mars, you've probably heard of Bower, which is a nodejs package that helps you manage your front-end dependencies. This is the most popular front-end package manager existing today. So I decided to introduce it to my organization and let developers use it.

Like I said, Bower is a regular nodejs package installed on your machine. When you want to install angular in your project, you just go to your project folder and run bower install angular
How does this magic work? Where does Bower find the angular source code? There must be some service that Bower goes to to resolve the name "angular". Maybe it resolves to a git repository or something.
Well, this is exactly what happens. Bower is pre-configured with the address of a mapping service, which receives a name of a package and responds with a repository url. The most common repository types are github repositories. Then your bower client goes to that url, fetches the code and stores it in a folder called bower_components in your current path. Cool.

To make this work in a closed offline network I needed 3 things:
1. Have a package repository.
2. Create a similar mapping service that maps package names to our repository.
3. Have Bower reconfigured to communicate to our mapping service (registry in bower terms).

A package repository we already had. We were using Atlassian Stash as a git projects repository (like github). So I created a project named "bower libraries" and pushed some common libraries.
The mapping service I wrote with a colleague in a couple of hours. We found a large mapping file on bower.io with the original mappings to github, and we simply changed it to point to Stash. The service used this file and responded to requests looking at that file.
To reconfigure bower you simply create a .bowerrc file in your profile folder or project folder, containing this:
{
"registry": {
    "search": [
      "ADDRESS_OF_REGISTRY_HERE"
    ]
  }
}

Currently I'm helping teams to migrate from chaos to Bower :)

If you have any questions or need help - I'm here :)


4 comments:

  1. Great job! Chaos is bad for an organization :)

    ReplyDelete
  2. I want to use stash as bower repo for our client projects and also cache the github bower packageslocally. Is this possible, can you post the steps to do this. Thanks !

    ReplyDelete
    Replies
    1. Like I wrote in the post, we also use Stash as a Bower repo. No problems there.
      About the caching, it doesn't have anything to do with being offline / online. This is done by default. Or maybe I didn't fully understand you :)

      Delete
  3. OK. let me explain the problem. Every time we run a bower command, it hits the github to download the pkg. In my company, we had issues some time back which resulted in blocking our IP since someone assumed our github request as robot. My understanding was we can use stash to cache the pkg's from github. I think you are referring to the cache which is stored in the user home dir.

    Can we do this ? . Thanks a lot for replying to my question. I appreciate it.

    ReplyDelete