How to tell Quasar to use Firebase emulator in dev mode

[Roger Hopkins]

I posted this on the Quasar forum as well but I’m looking for help with testing my Quasar vuejs project that uses the Firebase locally Emulators before deploying to the server.

My objective is to have the app running against the local emulator Firestore database and calling my cloud functions using the local emulator as well.

I followed along with the Firebase semi-live episode where he was using the emulators to test his cloud function locally (SQL-like joins in Cloud Firestore).

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’)

}

I added the same to my boot/firebase.js file after firebase.initializeApp() and import firebase.firestore.  I modified the firestore port to 8081 since my default for the Quasar dev server is also 8080.

In one terminal I run firebase emulators:start and in another run quasar dev. 

On load the app tries to read a document from Firestore but I get a network error in the console.  The function does get the document successfully if I comment out the above in my firebase.js boot file so I know it works.

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 I think it only applies if you're using the vue-cli.
https://stackoverflow.com/questions/60536897/how-to-tell-a-vue-app-to-use-firebase-emulator

Any help would be greatly appreciated.

[Sam Stern]

Hi Roger,

I'm not familiar with Quasar but that shouldn't be a problem, the Firebase emulators don't really care what frontend framework you're using!  I want to clarify one thing, you said:

> I would expect that when I create a document on the google server it would trigger the function using the emulator.

This will never happen.  The Functions emulator can only be triggered by local events.  If you run the Functions emulator alone it can make outbounds requests to production services but it will never be triggered by them.  Triggers never actually go through the public internet so they can't be intercepted like that.

The JS code snippet you posted looks correct:

if (window.location.hostname === ‘localhost’) {

  // This will connect the Firestore SDK to the emulator running at localhost:8080

  firebase.firestore().settings({
    host: ‘localhost:8080’,
    ssl: false
  })

  // This is only necessary if you are using *CALLABLE* functions in your application, but is harmless otherwise

  firebase.functions.useFunctionsEmulator(‘http://localhost:5001’)
}

Can you make sure of the following:

• You're running `firebase emulators:start` with the same project ID as you're using on your frontend?
• The logs from `firebase emulators:start` confirm that the emulators are starting on the same ports as you're specifying in JavaScript?

Also it would be helpful to share the network error you're seeing!

- Sam

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/36a0eea8-70eb-4024-bf69-78bde3e694c2o%40googlegroups.com.

[Roger Hopkins]

Hi Sam,

I've been messing around with this for a week and it's a head scratcher.  It seems that the app is connected to the emulator database but the Firebase Emulator Suite that's running on localhost:4000 doesn't seem to be getting updated.

Here's the output from firebase emulators:start --import=./dir (I exported the base data I need in the database). Firestore emulator is on localhost:8080. 

 Here's a screenshot from the Emulators Suite Firestore showing the documents in the golfers collection.  It only has 2 documents.

I have a function that uploads golfers from a JSON file.  Here's a screenshot from the app showing I added 3 golfers for a total of 5.  But the Emulator Suite still only shows the same 2 documents in the golfers collection even after refreshing the page.

I went back to the Friendly-Eats lab project that uses the same process: point firebase.firestore to localhost:8080 if running locally.  That project has a function to add sample restaurant data from test data. When I ran that function, I didn't have the same issue.  Both the app and the Firebase Emulator UI showed the added restaurants.

Another strange behavior is that if I add a document in the Emulator UI the app can't read it. I have some console logs and pages that display the data and both show the added documents don't exists.  If I export the emulator data then stop and restart the emulators importing the new export, the data does show up in the app.

This isn't a big issue since I know the app is accessing the emulator Firestore database.  I just can't see updates from the app in the Emulator UI and vice versa.

Thanks for your help.

[Sam Stern]

Hi Roger,

Thanks for the update.  I have a strong feeling this is related to Quasar, which seems to enable the creation of Vue apps across platforms.  Maybe it's intercepting network requests in a way that's incompatible with Firestore (we use a technology called WebChannel on the web and gRPC on other platforms).

Some things you might want to try:

• Disable persistence in Firestore to make sure you're being fooled by local cache updates masking failures.
• Enable debug logging in the Firestore SDK and see if there are any logged failures: https://gist.github.com/katowulf/0475fb7a5907ed757f687aab6ed15878

Unfortunately if you're not able to reproduce this in a minimal app like FriendlyEats it means that it's really unlikely that the problem is in either the emulators or the Firestore SDK so there's not much we can do to help you.  If you discovering something more, let me know.

- Sam

--

You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/2b3880ad-4d36-4a50-8ddb-266237900b3co%40googlegroups.com.

[Roger Hopkins]

Hi Sam,

The saga continues.

Yesterday I was testing triggered functions from my Quasar app using the emulators and miraculously the data created in the app showed up in the Firestore Emulator.  I have a function that creates new invitations in another collection when an event is updated and that was also working correctly with the emulators.

At some point during my updates and testing, I stopped the emulators and restarted imported my baseline data and the emulators stopped working.

So today, I followed the docs for testing firebase cloud functions locally and created a fresh project using firebase init.  I have one simple triggered function that I copied the shell from the Firebase guide and started the emulators.

I added a document to the items collection and the triggered function didn't execute.  So at this point, I don't think it's a Quasar issue.

I'm running Mac OS Catalina 10.15.5 and firebase-tools, firebase-functions are up to date.

Here are screenshots of the code, Firestore document that was created and the output from the emulators log.

const functions = require('firebase-functions')

const admin = require('firebase-admin')

admin.initializeApp()

exports.myFunction = functions.firestore

.document('items/{doc-id}')

.onWrite((change, context) => {

const item = change.after.data()

item.id = change.after.id

console.log('context: ', context)

console.log('item: ', item)

});

17:53:15I

ui

Emulator UI logging to ui-debug.log

17:53:16I

functions

Watching "/Users/rogerhopkins/Documents/Documents/MobileApp_Projects/unittest/functions" for Cloud Functions...

17:53:17I

functions

firestore function initialized.

17:53:17I

┌───────────────────────────────────────────────────────────────────────┐ │ ✔ All emulators ready! View status and logs at http://localhost:4000 │ └───────────────────────────────────────────────────────────────────────┘ ┌───────────┬────────────────┬─────────────────────────────────┐ │ Emulator │ Host:Port │ View in Emulator UI │ ├───────────┼────────────────┼─────────────────────────────────┤ │ Functions │ localhost:5001 │ http://localhost:4000/functions │ ├───────────┼────────────────┼─────────────────────────────────┤ │ Firestore │ localhost:8080 │ http://localhost:4000/firestore │ ├───────────┼────────────────┼─────────────────────────────────┤ │ Hosting │ localhost:5000 │ n/a │ └───────────┴────────────────┴─────────────────────────────────┘ Other reserved ports: 4400, 4500 Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

On Thursday, July 16, 2020 at 5:22:04 PM UTC-5, Roger Hopkins wrote:

[Sam Stern]

Hi Roger,

If both emulators are running (looks like they are) but changes to Firestore aren't triggering the appropriate Functions that normally points to a project ID mismatch.  Please make sure that the project you're using with the emulators (either from the --project="..." flag or .firebaserc) matches the one you're using in your `initializeApp()` call in the code that writes to Firestore.  Functions only trigger from changes to a database in the same project.

- Sam

--

You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/08b898d7-82cd-4821-97e8-b472c1f421b1o%40googlegroups.com.

[Tom McCurdy]

Roger were you able to figure it out?

I have a successful quasar setup (albeit probably hacky) to allow you to use it with emulators.

[Roger Hopkins]

Hi Tom,

I did, although I have no idea how since I didn't change anything.  It just started working and I've been testing my app exclusively with the emulators.

Coincidentally, the other day I switched to a basic Vuejs project to test Firestore security rules.  I then switched back to my Quasar project and it stopped working.  I added data through my app but it seemed to go nowhere.

So I went to the emulators UI and there were no collections.  I added one manually and it just disappeared.

I rebooted and it started working again.  Must be something in memory or cache or something else. Curious if anyone else has had this issue.