Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova

Browserify is a tool that lets you bundle node.js modules and consume them in the browser. In other words, it allows you to write browser-based applications using node.js-style requires.

Quick Tour

  1. Install browserify
    npm install -g browserify


    sudo npm install -g browserify
  2. Write a module
    // greetings.js
    module.exports = function(name) {
        return 'Hello ' + name + '!';
  3. Use the module
    // app.js
    var greetings = require('./greetings');
  4. Create the bundle
    browserify app.js -o bundle.js

    browserify recursively analyzes all the require() calls in your app and builds bundle.js with all the dependencies.
  5. Add bundle.js to your index.html file and run the application.
    <script src="bundle.js"></script>

More details:

  • You can “require” core node modules (crypto, querystring, url, etc.), community modules published on npm, and your own application modules.
  • Browserify requires you to build your application (using the “browserify” command line tool) before you can run/test it. But watchify or beefy can make that build process transparent during development by watching for source file changes, and building your application behind the scenes.
  • Browserify supports source maps to let you debug your application using individual JavaScript files.
  • Browserify provides an extensibility mechanism through “transforms”. A browserify transform lets you transform the source code of modules at build time before it’s injected in the bundle. For example, in the Employee Directory app, I use the hbsfy transform to transform Handlebars HTML templates into precompiled template functions.

Employee Directory Sample Application

As an example, I took my existing Employee Directory sample application and replaced the Require.js module implementation with Browserify. The application also uses jQuery Backbone, and Handlebars templates.

You can run a hosted version of the application here

The code is available here. Here are some quick highlights:

Employee Directory uses jQuery, Backbone, underscore, and Handlebars templates. These modules are installed as follows:

npm install jquery
npm install backbone
npm install underscore
npm install handlebars 
As usual, you can specify your application’s dependencies in package.json, and install them with a single “npm install”.

In your app, you can then require modules as usual. For example:

var underscore = require('underscore');

There are a couple of things that are different when requiring jQuery and Backbone in this manner:

  1. jQuery needs the window object
  2. Backbone’s jQuery reference needs to be set

Here is an example:

var $ = require('jquery')(window);
var Backbone = require('backbone');
Backbone.$ = $;

Handlebars templates

I use the hbsfy transform to transform Handlebars templates into precompiled template functions.

  1. Install the hbsfy transform
    npm install hbsfy
  2. Use the templates as follows:
    template = require("templates/Employee.hbs");
  3. Specify the hbsfy transform when building the app:
    browserify -t hbsfy app.js -o bundle.js

Source Code

The complete source code for the application is available here. You can run it in the browser or on a mobile device as a Cordova/PhoneGap app.

To run the application in a browser:

  1. Make sure browserify is installed:
    npm install -g browserify
  2. Download and unzip the source code, then “cd” to the application root folder.
  3. Install the dependencies (based on package.json):
    npm install
  4. Build the application:
    browserify -t hbsfy app.js -o bundle.js
  5. Open index.html

You can run a hosted version of the application here

  • tom

    yo dawg, i heard you like javascript so we wrote some javascript that lets you write javascript on the server, and then we wrote some javascript to let you use that javascript on the browser like regular javascript

    • david

      This is the funniest and simplest description of browserify I have seen.

    • Leonard


  • Greg

    Hey repo code is broken as is, logged an issue.

  • Dan

    FYI, Backbone lists the Underscore module as a dependency and pulls it in under its own node_modules folder. By npm installing and requiring Underscore again, you’ll end up with two copies of underscore in your complied file.

    To avoid the duplication, you could not explicitly install underscore, and just use the one that comes with backbone.


    That’s ugly, but you could alias it back to just ‘underscore’ using:

    bundler.require(‘backbone/node_modules/underscore’, { expose: ‘underscore’ });


    • where exactly do you put the bundler.require(…) – in e.g. main.js ?
      wouldn’t there be an option to shim the underscore dependency through package.json?

    • This is incorrect. Browserify is intelligent enough (just like npm) to know when there are identical modules in the dependency graph and will only pull in one copy. The duplication occurs when you are requiring different VERSIONS of the same library which can easily be avoided with proper versioning in your package.json file.

  • ChristianoK

    It’s hard to find your website in google, you should build some quality backlinks, i know how to help your website to rank, just search in google for – k2 seo services

  • TommyE

    Guys you should try dzaine money making system – brings me some good cash, just search it in google

  • Hi there just wanted to give you a quick heads up.

    The words in your article seem to be running off
    the screen in Opera. I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d post to let you know.
    The design look great though! Hope you get the issue solved soon.


  • Interesting, I was just working on a yeoman generator for this setup.

    Current status is here:

    The directories for app/views, app/models, … must be manually linked into an app/node_modules folder for the best experience

  • 46GregoryD

    Hi, it’s hard to find in google, i found it on 38 spot, you should build some high quality backlinks, i know what can help you, just search in google for – edaya traffic increase

  • hey there and thank you for your info – I have definitely picked up anything new from right here.
    I did however expertise a few technical issues using
    this site, since I experienced to reload the
    site many times previous to I could get it to load
    correctly. I had been wondering if your hosting is
    OK? Not that I am complaining, but slow loading
    instances times will sometimes affect your placement in
    google and can damage your quality score if advertising and
    marketing with Adwords. Anyway I am adding this RSS to my e-mail
    and can look out for much more of your respective fascinating content.
    Make sure you update this again soon.

  • 33MaximusJ

    Hi, it’s hard to find in google, i found it on 36 spot, you should build some high quality backlinks, i know what can help you, just search in google for – edaya traffic increase

  • 80JustinW

    I noticed that is hard to find in google, do you know that you can increase clicks dramatically by adding 5 stars review below your website in google search results? For more info just search in google – Juuri13 wp SEO advice

  • lness as well as fashion, practically a thing of which is a modern day ladies or maybe gentleman. Lena johnson contributes articles testimonials in addition to content articles regarding different matters one example is style along with culture. Regularly vacationing coming from Nyc to help.

    • Matt

      Babelfish just ain’t what it used beings :)

  • The example runs fine, except that the jQuery functions aren’t working. It seems that jQuery is loaded, since the $ object is populated with something, but I can’t call jQuery functions on $.

  • Pingback: Best of JavaScript, HTML & CSS – Week of January 6, 2014 - Modern Web()

  • Christophe, as usually great blog post on the web development and Backbone.js! For people interested in discovering projects built in Backbone.js – just visit Backbone.js websites gallery

  • Good stuff. Will most likely switch from require.js because of this article.

  • kalite,fiyat uygunlugu ve imalattan.profesyonel ekip eşliğinden güvenilir işler yapılmaktadır

  • duka adamdir.

  • Thanks a lot :D

  • Thanks a lot for this, i haver been making use of this for a very long time and excellent and cool. All love from download mp3

  • Thanks for this article Download Mp3 i have been using it a lot on my 6lack foat

    I am an Amapiano songs lover

  • Such detail info, this has been helpful, i stream Nasty C and play it on the Cassper Nyovest

  • yuvaraj singh

    Thanks for sharing this content , Great work
    To crack Agile coach interview : Agile coach Interview Questions