CODEWITHSUNDEEP
javascriptfirebasevue.jsgoogle-cloud-functionsfirebase-tools
SeriousLee
SeriousLee

Reputation: 1371

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:

Functions project versions:

Let me know if I need to include additional information.

Upvotes: 0

Views: 474

Answers (2)

samthecodingman
samthecodingman

Reputation: 26246

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.

Upvotes: 2

Donnald Cucharo
Donnald Cucharo

Reputation: 4126

Here's your code as I make sure that useEmulator() is configured properly with Cloud Functions for Firebase Emulator. Feel free to try it:

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

const firebaseConfig = {
 // Your config
};

const app = firebase.initializeApp(firebaseConfig);
const functions = app.functions('europe-west2');

functions.useEmulator('localhost', 5001);

const func = {
  botcheck: functions.httpsCallable('validateRecaptcha'),
};

export { func };

Upvotes: 1

Related Questions