Angularfire: Feature request: Using Firestore emulator

[mparpaillon]

Version info

**Angular: 8.2.8

**Firebase: 7.0.0

**AngularFire: 5.2.1

Feature Request Details

For now it seems impossible (at least I couldn't find how) to target the Firestore emulator locally.
When I run firebase emulators:start it's telling me firestore: Serving WebChannel traffic on at http://localhost:5003.
Changing the property "databaseURL" to http://localhost:5003 in the firebase config doesn't seem to work

So I guess that's not an option for now?

Thanks

[mparpaillon]

Apparently I'm supposed to do that:

if (window.location.hostname === "localhost") {
  db.settings({
    host: "localhost:5003",
    ssl: false
  });
}

Is there a way to call .settings via angularfire2 ?

[jamesdaniels]

You can provide FirestoreSettingsToken

[mparpaillon]

I'm sorry could you elaborate please?

[GrandSchtroumpf]

You can have something like that in your app.module.ts :

@NgModule({
  providers: [
    {
      provide: FirestoreSettingsToken,
      useValue: environment.production ? undefined : {
        host: 'localhost:8081',
        ssl: false
      }
    }
  ],
  imports: [ ... ],
  declarations: [ ... ]
})

[mparpaillon]

Merci @GrandSchtroumpf ! T'es un chef ;)

[rubenheymans]

host: 'localhost:8081',

thanks finally this took me hours before I realised the environment settings can't solve this

[assafsl]

FirestoreSettingsToken was replaced by SETTINGS in v6.0
see: https://github.com/angular/angularfire/blob/master/CHANGELOG.md

[Javison]

Hi!
On firebase database:

databaseURL: "http://localhost:9000?ns=name-your-database",

firebase emulators:start --only database

Thanks!

[ghost]

Thanks @GrandSchtroumpf for providing that snippet. The docs should be updated to include it probably.

[rami-alloush]

This works in environment.ts without raising any errors.

export const environment = {
    production: false,
    firebaseConfig: {
        host: 'localhost:8081',
        ssl: false,
        apiKey: '<your-key>',
        databaseURL: 'http://localhost:9000?ns=<your-id>',
        projectId: '<your-id>',
        appId: '<your-id>',
        measurementId: '<your-id>',
    },
};

[patbrennan]

@rami-alloush I'm trying to get this to work with the environment.ts file, no joy. The providers method in app.module.ts worked, but I'm wondering - what exactly should go after the ?ns= in the databaseURL? Editing the environments file seems like a much cleaner way to do this.

export const environment = {
  production: false,
  firebase: {
    host: 'localhost:8080',
    ssl: false,
    apiKey: '<my-key>',
    databaseURL: 'http://localhost:8080?ns=...', // what goes after ns? - not working for me
    projectId: 'aerotools-dev',
    appId: '<my-app-id>',
    measurementId: '<my-measurement-id>',
  },
};

Output from running firebase emulators:start --only firestore:

 ✔  All emulators ready! View status and logs at http://localhost:5002 │

│ Emulator  │ Host:Port      │ View in Emulator UI             │
│ Firestore │ localhost:8080 │ http://localhost:5002/firestore │

[tzoratto]

hi @patbrennan, as I understand it, the databaseURL property is only used for firebase database and not Firestore. If you only use Firestore, the properties you need are host and ssl, but these properties cannot be set using the firebase config.
These properties have to be set as explained in https://github.com/angular/angularfire/issues/2183#issuecomment-538402555 (and don't forget to replace FirestoreSettingsToken by SETTINGS since v6 as assafsl said)

[adamgen]

Thanks everyone, I had the same issue and this works for me as expected:

{
    provide: SETTINGS,
    useValue: environment.production ? undefined : {
        host: 'localhost:8080',
        ssl: false
    }
}

[MichaelN2004]

Have look at the example file of the project: app.module.ts. This works for me.
Import:
import { AngularFirestoreModule, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
Added Provider:
{ provide: FIRESTORE_SETTINGS, useFactory: () => shouldUseEmulator() ? { host: 'localhost:8080', ssl: false } : {} }
shouldUseEmulator can be also found in the source.

[blasco]

How about the callable firebase functions? Is there a way to test them locally?

[GrandSchtroumpf]

@blasco It's in the documentation here.

[gino-m]

Edit:
Removing my previous solution, which wasn't working when I tried it in a new branch; I likely missed a piece or misrepresented what's needed for this to work. Better to refer directly to the relevant AngularFire docs, which I discovered after my original post:

Using emulators:
https://github.com/angular/angularfire/blob/master/docs/emulators/emulators.md

Example:
https://github.com/angular/angularfire/blob/master/sample/src/app/app.module.ts

HTH! 🚀