Publishing an AngularJS Module to Bower

by Ian Grail

Getting started with publishing your new AngularJS module to GitHub and Bower can be tough. But it's okay, we'll figure it out together. Below I have outlined the key steps taken to publish my own first bower component found here: https://github.com/codehangar/ng-copy-text.

Step 1

Make your AngularJS module

If you made your way to this post, you have probably already created an angular directive or service for an existing project, and like me, are looking for the most painless path to turn your directive in a bower component.

Initializing

Let's start with creating a new directory.



mkdir my-module-name && cd $_

Avoid re-inventing the wheel, and find an example or seed project.



I originally used https://github.com/refactorthis/angular-component-seed. Although you could start with my modified one as well

git clone git@github.com:codehangar/ng-copy-text.git
# install dependencies
npm install
bower install

Customizing

  • Update the source files with your angular module, which, depending on which repo you forked will be located in:
    • /src (ng-copy-text) or
    • /component (angular-component-seed)
  • Be sure to update the following to match your module name
    • package.json and
    • bower.json .
  • And also update build.conf.js here:
{
  ...
  buildJsFilename: 'your-file-name.js',
  ...
}

Step 2

Publish on GitHub

Create a new repo on GitHub



https://help.github.com/articles/create-a-repo/

Step 3

Push to Bower registry

Actually, you can begin using your module in other projects now.

bower install your-github-name/your-ng-module

I did this at first to test installing and using the directive in a separate project.



Once you are ready to publish it to the official bower registry:

bower register your-ng-module git@github.com:your-github-name/your-repo-name.git
  • Include private: false as a field in your bower.json in order for bower register to work.

Pushing Releases

  • Be sure to run gulp build (this will produce the minified versions of your module to the dist folder.
  • Update your version number inside of bower.json. Bower expects Semantic Versioning guidelines to be followed.
  • Tagging your git commit with the version number (i.e. v0.0.1) will produce a GitHub Release.
  • Bower references your GitHub Releases as installable versions of your module
# Credits http://briantford.com/blog/angular-bower