How To Use Firebase in Aurelia

Best Practices
1

Using third party libraries in Aurelia is incredibly easy and for Firebase it couldn’t be easier. You have two options when it comes to adding in Firebase to your Aurelia application.

Node module (prefered method)

There is an official Node module for Firebase which allows you to install and use it. All you have to do is run npm install firebase and then to use it within your Aurelia application add the following import.

import *as firebase from 'firebase';

If you are using TypeScript, the Firebase package ships with typings for using Firebase so you get intellisense for method calls and configuration options.

Script tag

The Firebase console when it provides you with the details of your application will actually provide a CDN script tag of the Firebase SDK. All you have to do is add it into your index.html file before anything else and a global firebase object will be made available to your app.

If you are using the CLI, you’ll want to add this into your index.html file above the bundle script so it gets included first.

    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "fgtg45345345",
        authDomain: "blah.firebaseapp.com",
        databaseURL: "blah.firebaseio.com",
        projectId: "blah",
        storageBucket: "blah.appspot.com",
        messagingSenderId: "322222"
      };
      firebase.initializeApp(config);
    </script>

This approach works, but it does make updating Firebase more involved because we have to replace the script tag in our HTML. The benefit of a Node module is you can update it (and downgrade) quite easily, as well as having the module within your app and not reliant on a network request.

Another downside of this approach is, if you’re using TypeScript you don’t get the intellisense out-of-the-box like you would with a Node module and import.

2

When using typescript and the cli, all the firebase sub dependencies do not get loaded and the cli gives errors.

In aurelia.json under vendor-bundle dependencies:

 {
  "name": "firebase",
  "main": "index",
  "path": "../node_modules/firebase"
},

The CLI gives this error when trying to run app:

 ------- File not found or not accessible ------
| Location:C:/app/node_modules/firebase/app.js
| Requested by: C:/app/src/app.js
| Is this a package? Make sure that it is configured in aurelia.json and that it is not a Node.js package

It gives this error twice for each of these firebase files…
firebase/auth.js
firebase/database.js
firebase/messaging.js
firebase/storage

@dwaynecharrington Do you know how to have firebase work with the CLI?

EDIT: I have tried getting firebase npm package to work with the CLI (webpack option) and also the CLI (“RequireJS”/gulp option) and cannot get either one working.

import * as firebase from 'firebase' is leaving the firebase variable as undefined every time…

3

Disregard, see below.

I hit the same problem… here’s how I solved it, although it’s probably too late since you got no reply in 26 days.

Anyways, I added a module definition for each of those files and the main module to aurelia.json:

          {
            "name": "firebase/app",
            "main": "./firebase-app.js",
            "path": "../node_modules/firebase",
            "resources": []
          },
          {
            "name": "firebase/auth",
            "main": "./firebase-auth.js",
            "path": "../node_modules/firebase",
            "resources": []
          },
          {
            "name": "firebase/database",
            "main": "./firebase-database.js",
            "path": "../node_modules/firebase",
            "resources": []
          },
          {
            "name": "firebase/messaging",
            "main": "./firebase-messaging.js",
            "path": "../node_modules/firebase",
            "resources": []
          },
          {
            "name": "firebase/storage",
            "main": "./firebase-storage.js",
            "path": "../node_modules/firebase",
            "resources": []
          },
          {
            "name": "firebase",
            "main": "./index.js",
            "path": "../node_modules/firebase",
            "resources": []
          }

I don’t know if this is the intended solution, and I would really like someone from aurelia to comment on this, since now I’m facing the same problem with rxjs and I will be damned if I’ll add ~50 module definitions.

HTH

4

For the record, I solved importing rxjs using the bundled js:

{
    "name": "rxjs",
    "main": "./bundles/Rx.js",
    "path": "../node_modules/rxjs",
    "resources": []
}

It would be essential to get some proper documentation about aurelia.json, though.

5

@TheFab this article talks about size sensitive bundling of rxjs http://pragmatic-coder.net/aurelia-cli-and-rxjs-size-sensitive-bundles/

6

Thanks, I am fighting with a lot more basic issues at the moment, I’ll read up on optimizations later :slight_smile:

7

Actually it sounds bigger than it is. The trick is to set main to false and import only parts you actually need from rxjs.

8

My apologies, disregard this.

I think, actually I am sure, this worked at one point. But then it stopped working and now I spent several evenings (this is a hobby project I’m trying to use it in), but no result.

I like aurelia, but if someone asks me about the aurelia-cli, I will say stay well away.

I’ll try to use webpack directly, I’ll post back about my experiences.

---- UPDATE
I finally got it all to work. I first did it with pure webpack and then I went back and regenerated the aurelia project with webpack. Yay! …I guess.

9

@dwaynecharrington: any chance for an example how did you get this up?

10

@TheFab have you been able to figure this out? I tried following your example for firebase and end up with a firebase is undefined error at runtime (though I no longer get errors when the aurelia cli bundles everything). Any additional guidance you can provide when using firebase with aurelia-cli @dwaynecharrington?

EDIT:
I migrated from aurelia-cli to webpack to get this working, but would still like to know how to handle this with aurelia-cli in the future.

11

I only managed to get it working with webpack (still using aurelia-cli).

I suspect that the require or systemjs flavours of the cli don’t cope with the way firebase exports it’s modules, while webpack handles it.

12

I’ll work out how to get it working properly in Aurelia CLI and report back soon everyone. Worth noting that you can also include the CDN script inside of your index file which I have done and then access the global Firebase object in your application. It just means you don’t explicitly import anything and no Firebase modules get bundled in your app, which can be a benefit if your app is already huge, sometimes taking that additional script request can work out better than one large bundle.

13

This is how did i solve the problem :

      {
        "name": "firebase",
        "path": "../node_modules/firebase",
        "main":"firebase",
        "exports": "firebase"
      }

add this to aurelia.json 's dependencies part . And you should use the firebase class after that.

import * as firebase from 'firebase';

like that

14

What version of firebase and Aurelia did you use? I tried the same with firebase 4.8.2 and aurelia 1.1.5 but it didn’t work :frowning:

(When I opened the application, I got some nasty error in console.log: Unhandled rejection Error: Mismatched anonymous define() module: function (require, exports, aurelia_framework_1)

15

If anyone is interested, I have open sourced a Firebase SSR skeleton on Github here: https://github.com/Vheissu/aurelia-firebase-ssr-starter

3 Likes