firebase / firebase-tools-ui

A local-first UI for Firebase Emulator Suite.
https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html
Apache License 2.0
262 stars 60 forks source link

Firestore emulator UI - loading collection state does not complete when emulator is run in container #900

Open alexapam opened 1 year ago

alexapam commented 1 year ago

Describe the bug The Firestore emulator UI is in perpetual "Loading Collection" state. This is from initial pristine state (i.e. this occurs on emulator start - no additional action needed.). I am running the emulator in a Docker container and have forwarded all the ports used by emulated features (firestore - 8080, ui - 4000, and 4500 and 4400 for good measure)

To Reproduce Steps to reproduce the behavior:

  1. Setup a docker container using debian image
  2. Install firebase
  3. Initialize the project and emulator features
  4. Modify the firebase.json to add host property i.e. host: '0.0.0.0'
  5. Run emulator: firebase --project emulators:start
  6. Goto http://0.0.0.0/4000

Expected behavior Expect to see Firestore emulated UI show no collections, and provide UI widgets to create collection and documents. Instead the 'Loading Collection' spinner is shown and it does not complete.

Screenshots See firebase-debug.log

version-9 23 3 loading-collections-spinner

Desktop (please complete the following information):

Additional context

Thanks in advance. I want to transition the project to local emulated development workflow and being able to access the Firestore UI locally is key.

muzzah commented 1 year ago

Having the same issue. Its because the webpage loaded is still trying to access 127.0.0.1 (which seems to be hardcoded) to load the data since Im assuming this suite is designed to run locally. I deployed a firebase docker container to a remote vm and while everything runs ok, loading the UI seems an issue.

Maybe the devs can provide more guidance on if these tools can be run and accessed remotely when running in a container. Is the 127.0.0.1 request hostname configurable?

pam-emtelligent commented 1 year ago

If you use firebase-tools@10.9.2, the UI will launch even though there are these warnings:

i  emulators: Starting emulators: firestore
⚠  hub: Error when trying to check port 4400 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:4400
⚠  hub: Port 4400 is available on 127.0.0.1 but not ::1. This may cause issues with some clients.
⚠  hub: If you encounter connectivity issues, consider switching to a different port or explicitly specifying "host": "<ip address>" instead of hostname in firebase.json
⚠  ui: Error when trying to check port 4000 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:4000
⚠  ui: Port 4000 is available on 127.0.0.1 but not ::1. This may cause issues with some clients.
⚠  ui: If you encounter connectivity issues, consider switching to a different port or explicitly specifying "host": "<ip address>" instead of hostname in firebase.json
⚠  logging: Error when trying to check port 4500 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:4500
⚠  logging: Port 4500 is available on 127.0.0.1 but not ::1. This may cause issues with some clients.
⚠  logging: If you encounter connectivity issues, consider switching to a different port or explicitly specifying "host": "<ip address>" instead of hostname in firebase.json
⚠  firestore: Error when trying to check port 8080 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:8080
⚠  firestore: Port 8080 is available on 127.0.0.1 but not ::1. This may cause issues with some clients.
⚠  firestore: If you encounter connectivity issues, consider switching to a different port or explicitly specifying "host": "<ip address>" instead of hostname in firebase.json
⚠  firestore.websocket: Error when trying to check port 9150 on ::1: Error: listen EADDRNOTAVAIL: address not available ::1:9150
⚠  firestore: Port 9150 is available on 127.0.0.1 but not ::1. This may cause issues with some clients.
⚠  firestore: If you encounter connectivity issues, consider switching to a different port or explicitly specifying "host": "<ip address>" instead of hostname in firebase.json
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  ui: Emulator UI logging to ui-debug.log

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000/               │
└─────────────────────────────────────────────────────────────┘