Emulator UI does not show up on Windows w/ WSL2

[b0ot]

Note: As I was writing this I realized it probably is more of a Emulator UI issue. I created a new ticket there but am fairly new to this and not sure if I should close this or admin
New Ticket: firebase/firebase-tools-ui#377

Browser: Google Chrome (Also tested firefox/edge)
Browser version: Version 86.0.4240.75 (Official Build) (64-bit)
Operating system: Windows 10 Pro Version 2004
Running WSL2 with Ubuntu 20.04
uname -r : 4.19.128-microsoft-standard
Operating system version:

What steps will reproduce the problem:

1. I follow the through step 3 (no issues yet)
2. On step 4 I run firebase emulators: start

What is the expected result?
I should be able to login web UI via localhost:4000

What happens instead of that?
The emulators seems to start ok

tom-linux@DESKTOP:~/emulators-codelab/codelab-initial-state$ firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, pubsub
⚠  Your requested "node" version "8" doesn't match your global version "12"
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/home/tom-linux/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4000 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├───────────┼────────────────┼─────────────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                             │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

However I can't access the UI via any web browser
I get Error: ERR_CONNECTION_RESET

At first this seems very similar to:
firebase/firebase-tools-ui#332

However users in that thread were able to
1.) Access the UI using the linux host IP address in place of local host
2.) Had a successful work-around using: microsoft/WSL#5706 (comment)
That leads to running a custom script here: #4150 (comment)
After adding additional ports: 22,80,443,8080,10000,3000,4000,5000,5001,8081,8082,4200,3128,4400,4500

However both of the above workarounds do not work with my setup.

Additional Debug Logs
firebase-debug.log
firestore-debug.log
ui-debug.log

[samtstern]

@b0ot thanks for filing this feedback and for doing your research. As you noticed this is the larger issue being discussed in firebase/firebase-tools-ui#332 ... the thing is we have not yet been able to identify a solution for everyone or identify a root cause. It seems that workaround work for some, but not others.

I'm going to leave this open in case some other codelab user can point out a potential solution! But I personally don't have any advice for you beyond the various workarounds on the threads you linked.

[b0ot]

@samtstern Appreciate the feedback.

Two pieces of additional information

1. Additional Information on Bug
2. Potential Workaround Idea

1.)
I should note that I am able to access other services that are being run on the same WSL2 Ubuntu system. I can view the websites being hosted on their ports from my Windows Machines, just not the emulators suite.
Examples:

• (Quasar | Vue | Firebase) project via (quasar run dev) port: 8080, 8082, 8084, 8086
• Many other web projects via (npm run serv) port 8080
  To answer your next question: No, I'm not trying to run the emulators suite while also running these other projects. 👍

2.)
As I mentioned, I'm fairly new to web programming so apologies if this is off track but I was curious if it might be possible to setup a solution in Windows using Docker.

The main goals in using WSL2 was to

• Keep projects seperate from my main Windows OS
• Easier command line support

Would it be possible to meet these goals where one could get the codelab running in a docker solution?

Eventually I'm interested converting my projects using firebase from WSL2 to another solution until the emulator suite / WSL2 integration is fixed. I thought Docker might be the next best option.

[yuchenshi]

This should be fixed with Firebase CLI v8.15.1. See firebase/firebase-tools-ui#332 (comment) for details. If you still see the issue, just kindly open a new issue in firebase-tools.