On Making A Node/Bower Module

It was always a short-term goal of mine to create and publish (open-source) a JS module that hopefully others may find useful. It became more urgent when I realized I needed the same UI I built for one prototype app across my other projects. With help from this superb article, Creating and publishing a node.js module, by Brent Ertz, I did it. My post here isn't a tutorial, but more a blog of my experience, listing any gotchas I encountered and other tools I used.

The module I created is hex2rgb, a module that converts hex to rgb. It also calculates the appropriate contrast color which it provides as a string of either "black" or "white". My module is up on npm and in my portfolio.

Updating an npm/bower module version

While following the article, one gotcha I ran into quickly after the initial publish was in updating my module version as I made updates to it. Npm makes it super simple to update your module's version number. Simply make your updates to whatever files you need to and git commit your changes. Then run the following:

npm version major|minor|patch

e.g.

npm version minor

Npm will update the package.json, bumping up the version number based on the argument you specified (either major, minor or patch). If your version was 1.0.0, the example command above will bump it up to v1.1.0, upping the minor version by one. Npm will also git tag this commit as v1.1.0 and commit it. Then you can npm publish this new version release as well as git push it upstream.

For Bower the version-update command is very similar:

bower version minor

Bower will do about the same thing as npm does - update bower.json with the new version bump and tag & commit with the new version.

npm/bower version bump workflow

A slight gotcha with working with two packages (bower and npm) with two separate versions is that when I do npm version minor it will tag and commit the new version but only update package.json, not bower's bower.json.

Currently I like to keep both package versions the same, as I like for both packages to have the same features. So, this is my current workflow/work-around for maintaining versions.

• make my updates
• manually update the version in bower.json
• commit all my changes
• run npm version
• now bower and npm should have the same version number
• npm publish and also push to github (for bower)

Testing

For testing, I ended up doing the following in test/index.js:

var expect = require('chai').expect,
    hex2rgb = require('../index');

Then I could test for arrays using deep equals, like so:

describe('#rgb', function () {
  it('returns rgb array [0, 51, 255] from hex input 0033ff', function() {
    expect(hex2rgb('0033ff').rgb).to.eql([0, 51, 255]);
  });

Bower, Travis, Code Climate

I'm going to save How-To's on making a Bower package and implementing Travis & Code Climate for future posts hopefully. But the process for making/publishing a Bower module is similar to making one for npm. Check out this article:

https://bower.io/docs/creating-packages/

As for Travis and Code Climate, frankly, I wanted to implement them for the badges. For shame, I know. Implementing them is just as straight-forward and easy. After signing up for free Travis and Code Climate accounts, they present you with quick start guides.

For Code Climate code coverage, you can use gulp, gulp-mocha and gulp-istanbul to create the report that Code Climate requires. Here's a gulpfile.js I found online that makes this happen:

var gulp = require('gulp');
var istanbul = require('gulp-istanbul');
// We'll use mocha here, but any test framework will work
var mocha = require('gulp-mocha');

gulp.task('test', function (cb) {
  gulp.src(['index.js'])
    .pipe(istanbul()) // Covering files
    .pipe(istanbul.hookRequire()) // Force `require` to return covered files
    .on('finish', function () {
      gulp.src(['test/*.js'])
        .pipe(mocha())
        .pipe(istanbul.writeReports()) // Creating the reports after tests run
        .on('end', cb);
    });
});

Just run

gulp test

which will create the reports Code Climate needs.

Badges

Here are the live stats for hex2rgb:

Tools

Here are some tools I used in making the hex2rgb module:

• Macdown - Visual Markdown editor for Mac

For Code Climate code coverage:

• gulp
• istanbul
• gulp-mocha
• gulp-istanbul

Conclusion

I hope the experiences I documented here help, as they'll likely help me in future module publishing. If you have any input or corrections, maybe a better workflow or best-practice, please feel free to let me know in the comments.