How to tell Quasar to use Firebase emulator in dev mode

[jrhopkins83]

I’m looking for help with testing my Quasar project that uses Firebase locally before deploying using the new Firebase Emulators.

I followed along with a recent Firebase semi-live episode where he was using the emulators to test his cloud functions locally. He added the following to his main js file:
if (window.location.hostname === ‘localhost’) {
firebase.firestore().settings({
host: ‘localhost:8080’,
ssl: false
})
firebase.functions.useFunctionsEmulator(‘http://localhost:5001’)
}
Where 8080 is the port the Firestore emulator is served locally.

I added the same to my boot/firebase.js file after importing firebase. I modified the port to 8081 since my default for the Quasar dev server is also 8080.

Unfortunately I get a network error when trying to read from Firestore.

Also, I have a cloud function that’s triggered when a new document is created in a collection. When I comment out the firebase.firestore.settings but leave firebase.functions.useFunctionsEmulator(‘http://localhost:5001’ I would expect that when I create a document on the google server it would trigger the function using the emulator. However it triggers the function on the firebase server as indicated in the logs and doesn’t trigger the function locally as nothing shows in the emulator log.

So I haven’t been able to test firestore or cloud functions locally with my Quasar project running in dev mode.

I found this posting on stackoverflow for pointing a Vue app to the emulators but since it relies on the vue-cli-service in the package.json file, I’m not sure how to apply it to Quasar.
https://stackoverflow.com/questions/60536897/how-to-tell-a-vue-app-to-use-firebase-emulator

[felipecampos]

Any luck with this? I’m also having the same issue…

[tedchwang]

You’ve probably figured this out by now, but for future visitors, the problem is in using port 8080 or 8081. The default port for Firestore emulator is actually 5002. You can see this port number when the emulator starts.

Also, as of Firebase version 8.0.0, the method for using the emulator has changed. Here’s the new way to do it:

firebase.firestore().useEmulator("localhost", 5002);

Good luck!

[jrhopkins83]

I haven’t tried tedchwang’s approach but I did finally get it to work. Here’s the code from boot/firebase.js:
// Use emulators
if (window.location.hostname === ‘localhost’) {
firebaseStore.settings({
host: ‘localhost:8080’,
ssl: false,
ignoreUndefinedProperties: true
})
firebaseFunctions.useFunctionsEmulator(‘http://localhost:5001’)
firebaseAuth.useEmulator(‘http://localhost:9099’)
}

In Quasar.config.js I set the dev server port to 8000 so it doesn’t conflict with the firebase emulators.