Bower: How to create and register your own packages

Continuing on our previous blog post on bower, in this blog post, I will talk about how to create your own front-end packages in bower. One thing I forgot to mention in the previous post is git is required when using bower. If you are using windows you can install git for windows or Mac/Unix/Linux.

The very first thing one needs to do is create a bower.json file in your project root folder. By using the command below

bower init

The above command will prompt you to fill in the form and afterwards it will generate us a bower.json file.

Lets take a look at our bower.json file

{
  "name": "JqueryLocaleListSort",
  "version": "0.0.1",
  "main": "./localeListSort.js"
  "description": "JavaScript list using locale sorting",
  "keywords": [
    "jquery",
    "plugin"
  ],
  "authors": [
    "Taswar Bhatti"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Adding Jquery

For our package, we will require jquery and in order to add our dependency to the bower.json file we can use the install command line. Note: the –save which will update our bower.json file, if we did not use the –save option it will not update out bower.json file.

bower install jquery --save

Our bower.json file will now look like

{
  "name": "JqueryLocaleListSort",
  "version": "0.0.1",
  "main": "./localeListSort.js"
  "description": "Javascript sort of list using locale",
  "keywords": [
    "jquery",
    "plugin"
  ],
  "authors": [
    "Taswar Bhatti"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.1.1"
  }
}

I will now use my previous jquery plugin that I created for sorting a list and add it to my project. The code is not really the focus here, it could be anything that you wish to publish, even a simple function of hello world.

(function ($) {
	$.fn.localeSort = function (options) {
		var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;
 
		return this.each(function () {
			function sorty(list, compare, elem) {
		        elem = typeof elem !== 'undefined' ? elem : 'li';
 
				var listElements = list.find(elem);
 
				listElements.sort(compare);
 
				list.empty();
 
				listElements.each(function (index, li) {
					list.append(li);
				});
			}
 
			if (settings.ul === true) {
				sorty($this, settings.compare);
			}
		});
	};
 
	$.fn.localeSort.defaults = {
		ul: true,
		compare: function localeCompareSort(a, b) {
			var t1 = $(a),
				t2 = $(b);
			return t1.text().localeCompare(t2.text());
		}
	};
}(jQuery));

Next we will add a gitignore file so that we don’t push up the bower_components folder if we have any, also I will create a repo on github. Note: bower requires a version number by using the git tag in order for it to register your package.

git init
git add *.json *.js .gitignore README.md
git commit -m "First version of my app"
git tag -a 0.0.1
git remote add origin https://github.com/username/RepoName.git
git push origin master 

bower register myPackageName git://github/username/RepoName.git

If you wish to modify your bower package, remember to update your tag version and bower.json file version or else it will not be published

//modified js file and bower.json file update the version number
git commit -m "Second version of my app"
git tag -a 0.0.2
git remote add origin https://github.com/username/RepoName.git
git push origin master