Firebase Emulators Requests to local FireStore unsuccessful

Question

Firebase Emulators Requests to local FireStore unsuccessful

Hello,

I am trying to setup the Firebase Emulators and my app is still connecting to Firebase(web). When I do a db.collection("users").add(), I see the entry on https://console.firebase.google.com not on http://localhost:4000/firestore (host port is 8080, viewer port is 4000)

Here is what I have done to far:

1. Firebase emulators:start returns "All emulators are ready!"

2. Firebase.json looks fine (ports look ok)

"emulators": {
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "database": {
      "port": 9000
    },
    "hosting": {
      "port": 5000
    },
    "pubsub": {
      "port": 8085
    },
    "ui": {
      "enabled": true
}

3. Before initializing the App, I change databaseURL to my local firestore. Note that in the video "The Local Firebase Emulator UI in 15 minutes" (https://www.youtube.com/watch?v=pkgvFNPdiEs 5:19) David East replaces the whole config objects by "config = { databaseURL: '...' }" but it returns this error: "Uncaught FirebaseError: "projectId" not provided in firebase.initializeApp" and if I add the value-key projectId, it returns lost of additional errors.

if (location.hostname === "localhost") {
  config.databaseURL = "http://localhost:8080?ns=project_name";
}

firebase.initializeApp(config);

4. Firebase using good project (Firebase Firestore works with real database but not emulator)

firebase use project_name

5. I also created Google Cloud Platform private key... just in case.

I think my problem might be in step 3 but I can't find how to fix it. Have you got any idea? What do you do to make it work?

Thank you!

Answer 1

You're most of the way there but I think the method of connecting to the local database emulators has changed since the video was produced.

I successfully connected to my local db emulator using:

if (!firebase.apps.length) {
  let config = {
    apiKey: "-------------------",
    authDomain: "--------------",
    databaseURL: "------------------",
    projectId: "----------------",
    storageBucket: "---------------------",
    messagingSenderId: "--------------",
    appId: "----------------------",
    measurementId: "-----------------"
  };

  firebase.initializeApp(config);

  if (location.hostname === "localhost") {
    var db = firebase.firestore();
    db.settings({
      host: "localhost:8080",
      ssl: false
    });
  }
}

The original config for online connection is left in place, but if the location.hostname === "localhost", then the change is made appropriately.

firebase.initializeApp(config) needs to be above the if statement that detects local running of the app.

Fortunately, the app continues to use the online authentication and the database and function connections are local.

The up to date documentation is here: https://firebase.google.com/docs/emulator-suite/connect_and_prototype