Emulator UI should not connect to 0.0.0.0 for emulators

[yuchenshi]

In firebase.json, it is possible to specify 0.0.0.0 for host for each emulator. This tells an emulator to listen on all IPv4 interfaces (including 127.0.0.1, the device's public network IP, etc.).

{
  // ...
  "emulators": {
    "firestore": {"host": "0.0.0.0", "port": 8080},
  }
}

However, with this setup, the Emulator UI attempts to send requests http://0.0.0.0:8080 to reach Firestore in the Firestore viewer. This is invalid since 0.0.0.0 is a non-routable address but some browsers / platforms (such as Chrome on Linux) special cases it to mean the same as 127.0.0.1. On other browsers / platforms (such as Chrome on Windows), this fails with errors like net::ERR_ADDRESS_INVALID.

Instead, the Emulator UI should change it to 127.0.0.1 when constructing the URL. Similarly, the Emulator UI should connect to ::1 (IPv6 local) when :: (IPv6 zero) is specified.

[gautamsingal]

@yuchenshi I would like to pick this up. As per my understanding, I think simply changing host to 127.0.0.1 in emulators would make it work. Please correct me if something else also needs to be done.

[yuchenshi]

@gautamsingal Of course! We welcome PRs addressing this. As noted in the last paragraph, please make sure to take care of both 0.0.0.0 and :: for completeness. The best place to make the change is in server.js.

[gautamsingal]

@yuchenshi Thanks! Picking this up

[gautamsingal]

@yuchenshi I tried but unable to do. Can you please guide me in this?

[moneal]

I'm not sure if WSL2 is part of the official supported platforms but I was unable to get any host options working when they work fine elsewhere. Using a configuration like below should work, but the emulator UI and other front-end code can't connect. I would be happy to also help.

  "firestore": {
    "host": "127.0.0.1",
    "port": 8080
  },

[blastdan]

In server.js there are the lines

Object.entries(emulators).forEach(([name, info]) => {
      json[name] = {
        hostAndPort: hostAndPort(info.host, info.port),
        ...info,
      }
    });

That host needs be checked for '0.0.0.0' and '::' If they are they should be changed to "localhost". All this logic is done using json so it makes it a bit more tricky.

I tried doing it quickly, but got stuck getting the development environment going in windows. I was getting an SCSS error about material/theme/mixins and dind't have time to work through it.

[gautamsingal]

@blastdan Thanks for the feedback!

[moneal]

@blastdan Was it a issue with node-sass and fsevents by any chance? When setting up Windows environments I commonly need to force a install and rebuild.

npm i -f fsevents
npm rebuild node-sass

[yuchenshi]

@moneal @blastdan I think it's #210 -- a known issue. However, we still haven't found a great cross-platform solution and would appreciate any help there. Either way, let's move the discussion there.

[yuchenshi]

Fixed by #312. This will be included in the next release.