Skip to content

firestore emulator on hosting emulator does not work #3121

Closed

Description

@lisp719

[REQUIRED] Environment info

firebase-tools: 9.3.0

Platform: Docker container running on Windows 10

[REQUIRED] Test case

I launched a firebase emulator with docker.
I have specified a host to access from outside the container.

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  },
  "emulators": {
    "firestore": {
      "host": "0.0.0.0",
      "port": 8080
    },
    "hosting": {
      "host": "0.0.0.0",
      "port": 4200
    },
    "ui": {
      "enabled": true,
      "host": "0.0.0.0",
      "port": 3000
    }
  }
}

However, I cannot access the firestore emulator from the hosting emulator.

Emulator UI is accessing the firestore emulator at 127.0.0.1:8080.
However, hosting emulator is accessing the firestore emulator at 0.0.0.0:8080.

I think we need to make a similar fix here.
firebase/firebase-tools-ui#312

[REQUIRED] Steps to reproduce

  1. Run firebase init
  2. Select emulator, firestore, hosting
  3. Add host config to firebase.json
  4. Run firebase emulators:start

[REQUIRED] Expected behavior

I can access the firestore emulator from the hosting emulator.

[REQUIRED] Actual behavior

I cannot access the firestore emulator from the hosting emulator.

Activity

  1. samtstern commented on Feb 10, 2021

    @samtstern
    Contributor

    @lisp719 can you explain a little more what you mean by "I can access the firestore emulator from the hosting emulator." ... is there a specific line of code that is not working for you? If so could you show the code and the logs?

  2. lisp719 commented on Feb 10, 2021

    @lisp719
    ContributorAuthor

    public/index.html

    This is mostly html created with firebase init hosting

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Welcome to Firebase Hosting</title>
    
        <!-- update the version number as needed -->
        <script defer src="/__/firebase/8.2.6/firebase-app.js"></script>
        <!-- include only the Firebase features as you need -->
        <script defer src="/__/firebase/8.2.6/firebase-firestore.js"></script>
    
        <script defer src="/__/firebase/init.js?useEmulator=true"></script>
      </head>
      <body>
        <script>
          document.addEventListener("DOMContentLoaded", function () {
            firebase
              .firestore()
              .doc("/foo/bar")
              .get()
              .then((doc) => {
                console.log(doc.exists);
              });
          });
        </script>
      </body>
    </html>
    # /__/firebase/init.js?useEmulator=true
    

    Probably init.js generated by hosting emulator

    if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
    var firebaseConfig = {
      "projectId": "tejun-6b17b",
      "storageBucket": "tejun-6b17b.appspot.com",
      "locationId": "us-central",
      "apiKey": "AIzaSyD5hr25OUI9m7xUUeSVSbZsld3D-R1n9B0",
      "authDomain": "tejun-6b17b.firebaseapp.com",
      "messagingSenderId": "498331656419"
    };
    if (firebaseConfig) {
      firebase.initializeApp(firebaseConfig);
    
      var firebaseEmulators = {
      "firestore": {
        "host": "0.0.0.0",
        "port": 8080
      }
    };
      if (firebaseEmulators) {
        console.log("Automatically connecting Firebase SDKs to running emulators:");
        Object.keys(firebaseEmulators).forEach(function(key) {
          console.log('\t' + key + ': http://' +  firebaseEmulators[key].host + ':' + firebaseEmulators[key].port );
        });
    
        if (firebaseEmulators.database && typeof firebase.database === 'function') {
          firebase.database().useEmulator(firebaseEmulators.database.host, firebaseEmulators.database.port);
        }
    
        if (firebaseEmulators.firestore && typeof firebase.firestore === 'function') {
          firebase.firestore().useEmulator(firebaseEmulators.firestore.host, firebaseEmulators.firestore.port);
        }
    
        if (firebaseEmulators.functions && typeof firebase.functions === 'function') {
          firebase.functions().useEmulator(firebaseEmulators.functions.host, firebaseEmulators.functions.port);
        }
    
        if (firebaseEmulators.auth && typeof firebase.auth === 'function') {
          firebase.auth().useEmulator('http://' + firebaseEmulators.auth.host + ':' + firebaseEmulators.auth.port);
        }
      } else {
        console.log("To automatically connect the Firebase SDKs to running emulators, replace '/__/firebase/init.js' with '/__/firebase/init.js?useEmulator=true' in your index.html");
      }
    }

    browser console error

    POST to http://0.0.0.0:8080 will be net :: ERR_ADDRESS_INVALID

    image

  3. self-assigned this
    on Feb 11, 2021
  4. yuchenshi commented on Feb 11, 2021

    @yuchenshi
    Member

    As you've observed, we need a fix similar to firebase/firebase-tools-ui#312. You're welcome to open a PR to port that change to init.js in hosting emulator, or you can remove ?useEmulator=true and initialize the SDKs yourself as a local workaround.

  5. rcopstein commented on Feb 16, 2021

    @rcopstein

    I've had a similar issue using Docker on macOS Big Sur. It's was interesting to see that hosting using firebase serve worked as expected. That didn't meet my requirements because I also wanted the Firestore emulator to be running with it. My workaround was to setup NGINX on my container to proxy requests to localhost:5000 (which is where hosting was being exposed when launched with firebase emulators:start).

    From what I could see my requests were being dropped by the hosting emulator because they were made from an external IP address. It looks like we are missing an option for "host": "0.0.0.0" on the firebase.json file.

  6. yuchenshi commented on Feb 16, 2021

    @yuchenshi
    Member

    This is now fixed by #3141 (thank you!) and will be included in the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions