Usage with Electron

[joaogarin]

Hello,

I am using angularfire2 with Electron. Technically Electron apps are running on node so the Firebase initializer throws the message :

'Invalid service account provided'

Normally you would set it up as described here : https://firebase.google.com/docs/server/setup

with service accounts

firebase.initializeApp({
  serviceAccount: "path/to/serviceAccountCredentials.json",
  databaseURL: "https://databaseName.firebaseio.com"
});

But dont think angularfire2 is providing a way to hook into the initializeApp() method right?

Maybe there is something I am missing?

[joaogarin]

I was running it on electron without a problem before with the previous SDK, so I dont know if this was introduced now with the 3 SDK or maybe something that I am missing here =/

[davideast]

@joaogarin You are right, we currently don't support this but it should be added.

[joaogarin]

yep that would be awesome!! Looking forward =)

[davideast]

@joaogarin

I'm not an electron user, so I'm not sure if you'll run into any other issues however. Could you try something for me?

AngularFire let's you initialize a default project with defaultFirebase(configObject), but you can also pass in a reference to a af.database.list(ref) or af.database.object(ref). This reference can be initialized outside of the scope of defaultFirebase(configObject). Can you try initialize the project that uses a service account inside of a component and then passing a reference from that initialized project? This may allow you to move forward until we have a fix and you can also see if they are compatible.

[joaogarin]

Sure I will try it! Will let you know how that works.

[davideast]

Awesome! Thanks @joaogarin!

[joaogarin]

Hello @davideast, I have some questions regarding your suggestion. So normally you would do something like :

...ROUTER_PROVIDERS,
    ...HTTP_PROVIDERS,
    ...FIREBASE_PROVIDERS,
    // Initialize Firebase app
    defaultFirebase({
        apiKey: options.firebase.apiKey,
        authDomain: options.firebase.authDomain,
        databaseURL: options.firebase.databaseURL,
        storageBucket: options.firebase.storageBucket,
    })

to provide the firebase default to angular providers so you can inject the service anywhere right?

is your suggestion not providing anything here? Or instead of this defaultFirebase giving it a af.database.object(ref)? But that would have to be done inside a component. So inside a component I have (example in a home component)

/**
 * Import decorators and services from angular
 */
import {Component} from '@angular/core';
import {AngularFire, FirebaseListObservable} from 'angularfire2';

@Component({
  selector: 'ae-home',
  template: `
    <div>
       <h1>{{name}}</h1>
       <input [(ngModel)]='name' />
       <ul>
          <li *ngFor="let item of items | async">
            {{ item.name }}
          </li>
       </ul>
    </div>
    `
})
export class HomeComponent {
  name: string;
  items: FirebaseListObservable<any[]>;

  constructor(af: AngularFire) {
    this.name = 'Firebase';
    this.items = af.database.list('/items');
  }
}

Would I create this af.database.object(ref) inside this component? or in the app component (the root component)?

I have a repo with a very minimal setup of angular2 on electron and firebase to demostrate the issue. Its visible here https://github.com/joaogarin/firebase3-electron case anyone wants to try it out. You do have to provide the firebase configs to actually run it as stated in the readme file.

[joaogarin]

What I am currently trying is :

export class HomeComponent {
  name: string;
  items: FirebaseListObservable<any[]>;
  ref: firebase.database.Reference;

  constructor(af: AngularFire) {
    this.name = 'Firebase';

    // Initialize ref
    this.ref = firebase.initializeApp({
      serviceAccount: options.firebase.serviceAccount,
      databaseURL: options.firebase.databaseURL
    });

    defaultFirebase(af.database.list(this.ref));
  }
}

But this reference should be a firebase.database.Reference type which is not what firebase.initializeApp returns (it returns an app) so I think something is not playing nice here..;P I will keep digging

Also in this scenario I am not doing the defaultfirebase in the normal angular bootstrap providers list (like you would normally do)

[davideast]

@joaogarin

Try this

export class HomeComponent {
  name: string;
  items: FirebaseListObservable<any[]>;
  ref: firebase.database.Reference;

  constructor(af: AngularFire) {
    this.name = 'Firebase';

    // Initialize ref
    this.app = firebase.initializeApp({
      serviceAccount: options.firebase.serviceAccount,
      databaseURL: options.firebase.databaseURL
    });

    const itemsRef = app.database().ref().child('items');
    af.database.list(itemsRef);
  }
}

[joaogarin]

I get a :

"Property 'database' does not exist on type 'App'." =/

[joaogarin]

Havent had much succes with this approach unfortunately.maybe I am missing something. Is the official support for this on the near future in the table? or too complex to put it for now? just so I equacionate some timings on my side for the electron app.going only web is also an option

[joaogarin]

I am actually now getting an error : No provider for Token FirebaseUrl! which kind of suggests I got passed this issue..Will try to figure it out.

[joaogarin]

Hey @davideast , just bumping on this one..Any ideas on how I might unstuck myself here? any plans on this integration with the service accounts?

Thanks a lot;) cheers

[davideast]

@joaogarin I don't think AF2 is setup for Electron. We'll have to look into what it will take to support it in the next few releases.

[joaogarin]

Sure! Appreciate the support @davideast I will stay tuned for updates;)

[Nebula-Spark]

So , If I am going To develop A Desktop Application > Can't Use Firebase or Angularfire ? Right ?

[joaogarin]

Yes I think at this point Angular2 + Firebase3 its fine with electron (see https://firebase.google.com/support/release-notes/js) altough I didnt try it out yet. Angularfire2 I dont think so.

[Nebula-Spark]

@joaogarin Finally The new Angularfire2@next Works like a Magic In ELECTRON ! >> ITZ working Now @joaogarin :+1:

[rozdub]

@joaogarin did you ever get past the "no provider for token FirebaseUrl"? I am stuck on that myself.

[joaogarin]

@Nishanth2 cool! I will try it out! @therealdsmart not really I havent tried anything after that error, as @Nishanth2 suggests using angularfire2@next works. Which makes sense since firebase has released support for node js apps to work without a service account as far as I know. I would still try authentication because that is where things got messy previously (at least using only firebase 3 and electron)

[davideast]

@joaogarin I would believe that only authentication with anonymous and password will work out of the box. Doing popop or redirect flows will likely require your own implementation and then passing the token to the the Firebase SDK.

I'm working on some bug fixes for this release and then hopefully Firebase Storage. If you'd like to create a sample project for setting up AF2 with Electron that would be amazing. Also if you could document your setup process and any problems you encountered in your repo, that too would be amazing.

[joaogarin]

Hello @davideast yeah sure. I will try and put something up together using AF2 with electron. I know people are using the CLI with it but I have no experience with it or systemJs. But I will try and put together something simple and document how to get that working properly and we can go from there. I will be sure to try out authentication as well.

[joaogarin]

Hello @davideast , sry for not getting back to you on this. I have created some tests with electron in https://github.com/joaogarin/angularfire2-firebase3-electron if you want to have a look there. Just tested today the latest angularfire2 and authentication at least with email and password works well. I will do some testing with some popus in the auth flow and get back to you.

I will also try and document a little better the setup, but its not so different than a normal angular app except for a couple of electron entry points that are necessary. I will try and make a file explaining all of that in the repo.

[joaogarin]

So I did a quick test on the social providers with Facebook and I get an error similar to https://github.com/angular/angularfire2/issues/279 :

EXCEPTION: Uncaught (in promise): Error: This operation is not supported in the environment this application is running on. "location.protocol" must be http or https and web storage must be enabled.

I guess this has something to do with the environment electron is running on. I have another project where I had to do a customAuthentication with Firebaese (without angularfire2) and that worked well. But there I had to circle a bit around the authentication Firebase provides by default since I was using another oauth system and just had to pass in the JWT to firebase.

I will still push the nonworking loginGoogle component to the repo case anyone wants to try something out.

[yuricamara]

Hello @davideast , sry for not getting back to you on this. I have created some tests with electron in https://github.com/joaogarin/angularfire2-firebase3-electron if you want to have a look there. Just tested today the latest angularfire2 and authentication at least with email and password works well. I will do some testing with some popus in the auth flow and get back to you.

I will also try and document a little better the setup, but its not so different than a normal angular app except for a couple of electron entry points that are necessary. I will try and make a file explaining all of that in the repo.

Hi, @joaogarin ,

Thank you for sharing your tests. Everything relevant to the issue, is in the directory /src/app?