Skip to content
Advertisement

Vue + Firebase: Functions useEmulator() ignored

I found this line of code in the Firebase docs firebase.functions().useEmulator('localhost', 5001) that supposedly points your Vue app to the locally running emulator, but for some reason my project is ignoring said line of code and continues to call the remotely deployed function instead.

Here’s what the relevant part of my @/plugins/firebase.js looks like:

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

firebase.initializeApp({
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.VUE_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID,
  measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID
});

firebase.functions().useEmulator('localhost', 5001);
const func = {
  botcheck: firebase.app().functions('europe-west2').httpsCallable('validateRecaptcha'),
};

export { func };

And then to call the botcheck function, I’ll run the following in a Vuex action:

const fb = require('@/plugins/firebase');
...
await fb.func.botcheck();

What am I doing wrong? How do I get it to correctly point to my locally running emulator?

Vue project versions:

  • vue: 2.6.11
  • firebase: 8.3.2

Functions project versions:

  • firebase-admin: 9.2.0
  • firebase-functions: 3.11.0

Let me know if I need to include additional information.

Advertisement

Answer

This line:

firebase.functions()

is functionally equivalent to:

firebase.app().functions('us-central1')

In your current code, you connect functions that don’t specify a region to the emulator. Because you specify the region as europe-west2 when using it, you need to connect the europe-west2 functions to the emulator. You can do this by changing this line:

firebase.functions().useEmulator('localhost', 5001);

to use the correct region:

firebase.app().functions('europe-west2').useEmulator('localhost', 5001)

Additional Note: While firebase.functions() and firebase.app().functions() return the same instance of a Functions object (connected to the us-central1 region), firebase.app().functions('us-central1') (where you pass in the region) returns a different instance of Functions. You would need to connect each instance that you use to the emulator.

Advertisement