Firebase-js-sdk: Testing https.onCall with locally running serve

[fxfactorial]

I have cloud functions running locally via: "firebase": "4.13.1", (yes I know I could test via shell)

firebase serve --only functions

and in my JS web sdk, I get at those functions with

firebase.functions().httpsCallable

but those functions always use a production version of the URL.

How can I change it so that they use a local version of my URL? I'm in a gatsby based projected and I did try adding to gatsby-config.js:

module.exports = {
  proxy: { prefix: '/', url: 'http://localhost:5000' },

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[jshcrowthe]

Hey @fxfactorial, as of 5.2.0 (released yesterday) we support an API to do exactly this!

import firebase from 'firebase/app';
import 'firebase/functions';

const app = firebase.initializeApp({ ... });
app.functions().useFunctionsEmulator('http://localhost:8080'); // Or whatever the port is for your local emulator

...

[fxfactorial]

Oh that's awesome! unfortunately I had to move away from using the function based on onCall because of this issue: https://github.com/firebase/firebase-functions/issues/274

[abraztsov]

app.functions().useFunctionsEmulator('....') - doesn't work. Using 5.30 version.

[ssijak]

I am using this fix in vuejs-cli :

const functions = firebase.functions()
// if dev mode, test with local cloud functions server
if (process.env.NODE_ENV === 'development') {
  functions._url = function (name) {
    return `${process.env.VUE_APP_API_URL}/${name}`
  }
}

[baumblatt]

Hey @fxfactorial, as of 5.2.0 (released yesterday) we support an API to do exactly this!

import firebase from 'firebase/app';
import 'firebase/functions';

const app = firebase.initializeApp({ ... });
app.functions().useFunctionsEmulator('http://localhost:8080'); // Or whatever the port is for your local emulator

...

Hello @jshcrowthe, this works like a charme, just sharing TypeScript/Angular/AngularFire version of your snippet.

import {Injectable} from '@angular/core';
import {AngularFireFunctions} from '@angular/fire/functions';
import {environment} from '@env/environment';
import {Observable} from 'rxjs';

@Injectable()
export class SomeFunctionsService {

    constructor(private fns: AngularFireFunctions) {
        if (!environment.production) {
        // @ts-ignore
        this.fns.functions.useFunctionsEmulator('http://localhost:5001');
    }

    callSomething(data: any): Observable<any> {
        return this.fns.httpsCallable('something')(data);
    }
}

[fxfactorial]

That's really great, I will definitely use that in future projects. Thank you for the great iteration speed on this.

[alenl]

For the benefit of future searchers, the above doesn't work in even in latest version of AngularFire. But a kludge like this does:

import { AngularFireFunctions } from '@angular/fire/functions';
import { FirebaseFunctions } from 'firebase/functions';
[...]
constructor(
    private afFuncs: AngularFireFunctions ) {
[...]     (afFuncs.functions as FirebaseFunctions).useFunctionsEmulator('http://localhost:5000');

[dirkjot]

This functionality is now built-in to Firestore / AngularFire:

import { AngularFireFunctions } from '@angular/fire/functions'

export mainComponent {
  constructor(private firefunctions: AngularFireFunctions) { 
    if (environment.myApp.useLocalFunctions) {
      this.firefunctions.functions.useFunctionsEmulator('http://localhost:5000')   
    }
  }
}