Update doc: cloud functions local debug with real data from production

[emanuelevivoli]

Motivation

Hello everyone, I'm opening this issue because I'd like to improve the documentation on this feature that I found actually amazing for testing my firestore-triggered (and http-triggered) cloud functions locally, adding breakpoints.
I want to share it because I was struggling for many days in order to debug my cloud functions locally, and maybe improving documentation can be a benefit for someone else.
If you know another way to do it, please let me know.

Tools

In order to do this I just used

• emulator (from firebase-tools)
• vscode

To reproduce

As described here you can point the Functions emulator from your Angular project, in order to use your emulated function ( the Creating a callable function example is for the http-callable one).

But if I have firestore-triggered functions? In this case I also need to point the firestore emulator by adding

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

as here.

Actually you can use ** SETTINGS** in v6

After that, you can run the emulator
firebase emulators:start --inspect-functions
and attach the debugger as described here, once you set your launch.json file on vscode.

To import/export data from production

In my Firestore I had some data that I wanted to use, but the emulator comes without any data by itself (and every time you start it, it's empty).
So the trick here is to use this for clone you production Firestore data to a bucket, and download those data to your local.
Then, as suggested here, you proceed by adding some fake data to your local, export it on a folder, and adding your production data just downloaded in that folder, and change the path in the firebase-export.metadata.json

Now you can stop the emulator, and run it with the --import flag on your data folder.

Debugging Angular app at the same time

Because the hosting emulator takes a folder (usually the public folder) where you build your app for production, it can be quite time-consuming to debug your cloud functions with the emulator and whenever you need to change something on your angular app do the deploy of the entire application, and re-run the emulator.
What I did (even if I don't know if it is the best way) is to use the emulator for firestore and functions (and importing my firestore data):
firebase emulators:start --only functions,firestore --import=./data --inspect-functions
and attach the debugger on it; then on another tab I ng serve-ed my Angular app and attach a chrome debug to it.

Conclusion

I'd like someone (or me) to add on the documentation something related to this debug pattern, so we can find in one unique place a way to use properly the emulator, and debug the cloud functions properly without wasting so many time.

Hope it can help.

[KingDarBoja]

Willing to add some docs regarding how to setup firebase emulators + angularfire including importing and exporting data from it. Not sure about the debugging part (--inspect-functions) but could experiment a little bit.

[jamesdaniels]

Some docs would be great, we now have the USE_EMULATOR DI tokens which make this a lot easier.

[KingDarBoja]

I was working on emulator docs but with latest changes (6.1.0), now I have to try it again and see how it goes 🙈