Menu icon Foundation
How to add Firebase to Gulp file

I am trying to add Firebase to a FFA with which I working. I am trying to follow along with the Firebase documents but they don't seem to be made to use Gulp set up that FFA has.

I have my nodes installed and I am trying to call them load them with Gulp. I keep getting an error message in my console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.18/$injector/nomod?p0=firebase

This where I am loading my node paths:

var paths = {
  assets: [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ],
  // Sass will check these folders for files when you use @import.
  sass: [
    'client/assets/scss',
    'bower_components/foundation-apps/scss',
    'node_modules/font-awesome/scss/font-awesome.scss'
  ],
  // These files include Foundation for Apps and its dependencies
  foundationJS: [
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/tether/tether.js',
    'bower_components/hammerjs/hammer.js',
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/vendor/**/*.js',
    'bower_components/foundation-apps/js/angular/**/*.js',
    '!bower_components/foundation-apps/js/angular/app.js',
    'node_modules/ngstorage/ngStorage.js',
    'node_modules/angular-clipboard/angular-clipboard.js',
    'node_modules/firebase/lib/firebase-node.js',
    'node_modules/angularfire/dist/angularfire.min.js',
  ],
  // These files are for your app's JavaScript
  appJS: [
    'client/assets/js/rgbcolor.js',
    'client/assets/js/color-0.4.1.js',
    'client/assets/js/getColorFunction.js',
    'client/assets/js/myTest.js',
    'client/assets/js/app.js'
  ]
}
            

         

Does this look right. I have a feeling I am loading the incorrect file or something silly. The docs on the FB site are loading from a CDN a file called `https://cdn.firebase.com/js/client/2.3.2/firebase.js` I only see the .js file that came with the node modules. I have tried both the `web` and the `node` versions.

Are there any good examples out there from those who've added Firebase to Foundation for Apps. This is not a super serious project. I am just trying to learn how all this fits together.

appsgulpangularfirebase

I am trying to add Firebase to a FFA with which I working. I am trying to follow along with the Firebase documents but they don't seem to be made to use Gulp set up that FFA has.

I have my nodes installed and I am trying to call them load them with Gulp. I keep getting an error message in my console:

Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.18/$injector/nomod?p0=firebase

This where I am loading my node paths:

var paths = {
  assets: [
    './client/**/*.*',
    '!./client/templates/**/*.*',
    '!./client/assets/{scss,js}/**/*.*'
  ],
  // Sass will check these folders for files when you use @import.
  sass: [
    'client/assets/scss',
    'bower_components/foundation-apps/scss',
    'node_modules/font-awesome/scss/font-awesome.scss'
  ],
  // These files include Foundation for Apps and its dependencies
  foundationJS: [
    'bower_components/fastclick/lib/fastclick.js',
    'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js',
    'bower_components/tether/tether.js',
    'bower_components/hammerjs/hammer.js',
    'bower_components/angular/angular.js',
    'bower_components/angular-animate/angular-animate.js',
    'bower_components/angular-ui-router/release/angular-ui-router.js',
    'bower_components/foundation-apps/js/vendor/**/*.js',
    'bower_components/foundation-apps/js/angular/**/*.js',
    '!bower_components/foundation-apps/js/angular/app.js',
    'node_modules/ngstorage/ngStorage.js',
    'node_modules/angular-clipboard/angular-clipboard.js',
    'node_modules/firebase/lib/firebase-node.js',
    'node_modules/angularfire/dist/angularfire.min.js',
  ],
  // These files are for your app's JavaScript
  appJS: [
    'client/assets/js/rgbcolor.js',
    'client/assets/js/color-0.4.1.js',
    'client/assets/js/getColorFunction.js',
    'client/assets/js/myTest.js',
    'client/assets/js/app.js'
  ]
}
            

         

Does this look right. I have a feeling I am loading the incorrect file or something silly. The docs on the FB site are loading from a CDN a file called `https://cdn.firebase.com/js/client/2.3.2/firebase.js` I only see the .js file that came with the node modules. I have tried both the `web` and the `node` versions.

Are there any good examples out there from those who've added Firebase to Foundation for Apps. This is not a super serious project. I am just trying to learn how all this fits together.

Chris Oyler over 2 years ago

if you're bundling your js into one file, load order matters. Esp. if you're loading firebase from a cdn, it'll have to be loaded before your app.js

James Stone over 2 years ago

When f4a was released I was experimenting a bit and posted a public repo with a branch using angular fire. You might also want to check out the fire branch. Hope that helps in trying to get a firebase + f4a app up and running fast.

https://github.com/jamesstoneco/foundation-for-apps-live-reload/tree/firechat

Be sure to take a look at my bower, gulp, javascript and template files for the specifics.

Joshua Smith over 2 years ago

@Chris Oyler , Yep you're right. I had them in the right order, but that wasn't my problem.

@James Stone I opened up your app and took a look around. I noticed that you used the Bower version of Firebase where I used the NPM version. I noticed the file I was calling was not at all like the one in the instructions on the Firebase Quickstart page.

Once I used the Bower version of Firebase everything worked correctly. I can add data to my Firebase and it looks really awesome. I am so stoked to get my little app out to the wild.

Both, thanks so much for you help!