Create and maintain your own bower package




  1. a public git(github/gitlab/bitbucket) repo (for private repos, you need to run a private registry, which won’t be discussed in this article)
  2. have bower installed


A step by step example

1.Have a public git repo ready

I have this really simple sample gitlab repo:

This pic shows its file structure:

I want to create a bower package with everything inside “css” and “js” folders. So my bower.json is like this:

  "name": "christy-bower-package",
  "description": "Christy's bower package example",
  "keywords": [
  "license": "MIT",
  "ignore": [
  "dependencies": {
    "jquery": "1.9.1 - 3",
    "bootstrap": "3.3.7"

If you have questions on what each field means, please read bower specs:


2. register the package

2.1 Run command to register package

The command to register is:

bower register <my-package-name> <git-endpoint>

So I run:

bower register christy-bower-package

The following is what happens:

2.2 Check successful registration

Bower decides package version based on tags. Since I haven’t pushed any tag to my repo yet. As you can see in the following picture, when I run “bower info christy-bower-package”, it shows at the end, “No versions available”:


3. Add  version to the package

3.1 create a git tag and push to remote

git tag 'v0.0.1'
git push origin master --tag

3.2 Check version successfully added

bower info christy-bower-package


4. Install the package

Now If I run:

bundle install christy-bower-package

As you can see in the above picture. It downloads my christy-bower-package, also the two denpendency I listed out in bower.json: bootstrap and jquery. The downloaded file structure is like this:


5. Maintain the package

Any time I want to release a new version of my package, I can just add a tag with increasing version number. But it’s a bit of manual work, luckily, there’s a grunt plugin(grunt-bump) that helps automate this process:

5.1 Create a package.json file with content: {}


5.2 Install grunt and then install grunt-bump

npm install grunt --save-dev
npm install grunt-bump --save-dev

After successful installation, a node_modules folder will be added, and Package.json looks like this:


5.3 Add a .gitignore file and ignore node_modules folder

Since I don’t want node_modules folder appear in git repo. Add the following .gitignore file:


5.4 Set custom grunt bump configuration and load the plugin:

The default config for grunt bump is:

Since I only want to change some of the config properties, the following is my Grutfile.js:

module.exports = function(grunt) {
    bump: {
      options: {
        files: ['bower.json'],
        commitFiles: ['-a'],
        pushTo: 'origin'


5.4 Add version field to bower.json

Add version field to bower.json so that grunt bump plugin knows which version to start with:


5.5 Use grunt bump to commit changes and bump the version

grunt bump provides a set of commands to control version. The following is a screenshot of some of the commands available. Please visit its git repo to learn more.

The “grunt bump” command will do the following:
1.Look into “bower.json” file for “version” field. And the value will be the starting version.
2.It will check all files in the repo, commit current file changes. And add a commit message ‘Release v%VERSION%’.
3.It will create a tag with specified tag name and tag message.
4.It will push to remote ‘origin’.


grunt bump


5.7 Install the package again and confirm that version has been bumped


bower install christy-bower-package

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s