Emulator UI doesn't respect the host configuration.

[creack]

Describe the bug

Setting the host field in firebase.json isn't respected anymore to access emulators. The UI always tries to access them on 127.0.0.1, regardless of the config or from where it is accessed.

In version 9, it was working as expected and the UI was using window.location or something like that to call the emulators on the same domain as it was being accessed.

Running in Docker and/or on a different machine results in the UI being broken.

To Reproduce

Run the emulator with

{
  "emulators": {
    "ui": {
      "enabled": true,
      "port": 9001,
      "host": "0.0.0.0"
    },
    "auth": {
      "port": 9002,
      "host": "0.0.0.0"
    }
  }
}

Expected behavior

The UI should be able to access emulators outside localhost.

Screenshots/Logs

V11 - Broken

CLI Logs:

Resulting Hub config for V11

{
  "hub": {
    "listen": [
      {
        "address": "127.0.0.1",
        "family": "IPv4",
        "port": 4400
      }
    ],
    "name": "hub",
    "host": "127.0.0.1",
    "port": 4400
  },
  "ui": {
    "listen": [
      {
        "address": "0.0.0.0",
        "family": "IPv4",
        "port": 9001
      }
    ],
    "name": "ui",
    "host": "127.0.0.1",
    "port": 9001,
    "pid": 18
  },
  "logging": {
    "listen": [
      {
        "address": "127.0.0.1",
        "family": "IPv4",
        "port": 4500
      }
    ],
    "name": "logging",
    "host": "127.0.0.1",
    "port": 4500
  },
  "auth": {
    "listen": [
      {
        "address": "0.0.0.0",
        "family": "IPv4",
        "port": 9002
      }
    ],
    "name": "auth",
    "host": "127.0.0.1",
    "port": 9002
  }
}

Browser network Tab V11 - Broken

V9 - Working

The same configuration was working fine in v9.23.3.

CLI logs:

Resulting Hub config for v9

{
  "hub": {
    "name": "hub",
    "host": "localhost",
    "port": 4400
  },
  "ui": {
    "name": "ui",
    "host": "0.0.0.0",
    "port": 9001,
    "pid": 24
  },
  "logging": {
    "name": "logging",
    "host": "localhost",
    "port": 4500
  },
  "auth": {
    "name": "auth",
    "host": "0.0.0.0",
    "port": 9002
  }
}

Browser network tab V9 - Working

The UI should load and access the emulators on the domain it is serving.

Additional context

Running on Docker linux/amd64.

To reproduce the issue:

Common Dockerfile:

FROM node:14-alpine

RUN apk add openjdk11

# Install firebase tools.
ARG FIREBASE_VERSION
RUN npm install -g firebase-tools@${FIREBASE_VERSION}

RUN firebase setup:emulators:ui

CMD firebase --project local emulators:start --only=auth

ARG HOST=0.0.0.0
ARG UI_PORT=9001
ARG AUTH_PORT=9002
RUN echo '{"emulators": {"ui": {"enabled": true, "host": "'${HOST}'", "port": '${UI_PORT}'}, "auth": {"host": "'${HOST}'", "port": '${AUTH_PORT}'}}}' > firebase.json

Working as expected:

docker build -t fbui:v9 --build-arg=FIREBASE_VERSION=9.23.3 --build-arg=HOST=0.0.0.0 .
docker run --rm -it -p 9001-9002:9001-9002 fbui:v9

Not working:

docker build -t fbui:v11 --build-arg=FIREBASE_VERSION=11.21.0 --build-arg=HOST=0.0.0.0 .
docker run --rm -it -p 9001-9002:9001-9002 fbui:v11

NOTE: I also tried to run the UI under a valid https domain, just in case, but same result.

[creack]

I missed it, but it is probably the same issue as #874

[creack]

@yuchenshi Is this part of firebase-tools 11.22.0? Not sure how to get which version of firebase-tools-ui it uses.
11.22.0 still has the same behavior and uses 127.0.0.1 instead of window.location and shows 127.0.01 instead of the configured 'host'.

[yuchenshi]

@creack We've still haven't got a chance to cut an Emulator UI release yet, but it will be included in the next one. I'll update this thread when the fix is released.

[yuchenshi]

Fixed in v11.23.1

[jeremytondo]

UPDATE:
This actually is not an issue. I realized after the fact that hosts have to be set to 0.0.0.0. Mine were set to 127.0.0.1. Changing them to 0.0.0.0 fixed this issue. I still have some other Web Socket issues, but I don't think they're related to this.

I'm still having this issue. I was on the latest version of Firebase Tools 11.24, but I also tried on 11.23.1. Is there something else I need to update to get this working?

[creack]

@yuchenshi, I just tried on 11.24. Works like charm. Thanks!

[muzzah]

@yuchenshi The UI is still trying to connect to 0.0.0.0 when I follow @creack steps here to build a docker container.
I also cannot see any of the upates happening to the realtime database emulator.

My config is as follows

{
  "emulators": {
    "firestore": {
      "port": 5000,
      "host": "0.0.0.0"
    },
    "auth": {
      "port": "5001",
      "host": "0.0.0.0"
    },
    "database": {
      "port": "5002",
      "host": "0.0.0.0"
    },
    "ui": {
      "enabled": true,
      "host": "0.0.0.0",
      "port": 4000
    }
  }
}

I am also using in local mode

I can also confirm that the request for 0.0.0.0 is on port 5002

[muzzah]

@yuchenshi can you advise if I should open another issue or not related to this? When visitng the logs tab, the site still tries to access 127.0.0.7 as per my screenshot above

[yuchenshi]

@muzzah I no longer work on the team, but please make sure FIREBASE_VERSION is set to latest if you're following the comment above (not an outdated version).

For your other issue, logging needs to be explicitly configured in addition to the other emulators. See #340 (comment)