2

I'm trying to set up a project using Firebase's Backfire (for Backbone) with Browserify/Gulp but running into issues. I did npm install firebase and npm install backfire, then in my Models.js module I'm trying..

// ...
var Firebase = require('firebase'),
    Backfire = require('backfire');

module.exports = {
    // ...
    ItemsCollection: Backbone.Firebase.Collection.extend({
      model: ItemModel,
      firebase: new Firebase(FIREBASE_URL + 'items')
    })
  };

Unfortunately, the Firebase property in 'Backbone.Firebase' errors out as undefined..

I located some posts about a npm "shim" called "client-backfire", however, it seems it's been unpublished/deprecated. Any ideas how to get it to work?

pete
  • 2,739
  • 4
  • 32
  • 46
  • Recent Firebase bindings for Backbone have adopted the name `BackboneFire`. So I expect that is also the `require` you'd need `require('backbonefire')`. https://www.firebase.com/docs/web/libraries/backbone/quickstart.html – Frank van Puffelen Jan 23 '15 at 20:19
  • Thanks. Yes, just found that out, however, `backbonefire` is not available in npm yet. It turns out that CommonJS\Browserify support is not yet implemented (but is in the pipeline, within "few weeks", so fingers crossed). In the meantime, maybe if I include it separately in a script tag, then make it available on window? Any better ideas? – pete Jan 23 '15 at 20:29

1 Answers1

1

Received official confirmation from David @ Google that CommonJS support is coming in the near future. In the meantime, my workaround is as follows:

index.html

<script src="js/libs/underscore.js"></script>
<script src="js/libs/backbone.js"></script>
<script src="js/libs/firebase.js"></script>
<script src="js/libs/backbonefire.js"></script>

<script src="js/bundle.js"></script>  <!-- browserify bundle -->

app.js (entry-point for app)

  var $           = require('jquery');
  // var _        = require('underscore');
  // var Backbone = require('backbone');
  // var Firebase = require('firebase');
  // var Backfire = require('backfire');
  Backbone.$ = $;

  $(document).ready(function() {
    var Router = require('./router.js'),
        router = new Router();
    Backbone.history.start();
  });

Once CommonJS support is added, I think I should be able to simply remove all the script tags (except bundle.js), uncomment the require statements as needed per module (Firebase and Backbonefire not really needed here), and remove the $(document).ready() wait function..

pete
  • 2,739
  • 4
  • 32
  • 46