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 :)