Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to access Emulators UI [Current version: 8.15.1] #2793

Open
b0ot opened this issue Nov 6, 2020 · 5 comments
Open

Unable to access Emulators UI [Current version: 8.15.1] #2793

b0ot opened this issue Nov 6, 2020 · 5 comments

Comments

@b0ot
Copy link

b0ot commented Nov 6, 2020

[REQUIRED] Environment info

firebase-tools:
8.15.1

Platform:
Windows 10 - Version: 20H2 (OS Build 19042.572)
WSL 2 - Ubuntu
WSL 2 - Debian
Confirmed via wsl --list --verbose

Reference:
Firebase Tools UI
Bug 332
Emulators Code Lab
Bug 9
Note: I am posting here based on request from @yuchenshi comment to post follow up issues to firebase-tools

[REQUIRED] Test case

I followed the Emulators Code Lab tutorial with a clean pull from git into a new folder. I follow the steps to get the Emulator UI running. There does not appear to be any obvious errors except that after starting the Emulators UI, I'm still unable to access any of the associated webpages e.g.
│ ✔ All emulators ready! View status and logs at http://127.0.0.1:4000
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├───────────┼────────────────┼─────────────────────────────────┤

[REQUIRED] Steps to reproduce

Follow the steps in the Emulator Code Lab. Try to access the UI in various browsers.

[REQUIRED] Expected behavior

Should be able to see the Emulator UI

[REQUIRED] Actual behavior

Unable to access

ADDITIONAL INFORMATION

  • After initial failure to bring up UI, I tried again to have it work after running the networking Script here
    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, this also did not seem to work.

I restarted the computer and then verified the WSL install by re-running steps described here

I then installed a completely new Debian distro for WSL2
I installed

  • curl, nvm, node lts, java, git then followed the Emulators Codelab again

I was still unable to access the Emulator UI

I tried multiple browsers (Chrome / Firefox) and multiple variations of 127.0.0.1 / localhost all without luck.
@yuchenshi
Copy link
Member

yuchenshi commented Nov 6, 2020 •
edited
Loading

Could you please try these debugging steps?

  1. curl http://127.0.0.1:4000 and netstat -nl within WSL2 (e.g. using a bash session on Linux)
  2. curl http://127.0.0.1:4000 from the host (e.g. PowerShell on Windows)

Please paste the output.

And by the way, how are you accessing the Emulator UI? Are you accessing it on the Windows host on the same device where WSL2 is running? Either way, make sure you use http://127.0.0.1/ instead of localhost.

@b0ot
Copy link
Author

b0ot commented Nov 6, 2020 •
edited
Loading

Could you please try these debugging steps?

  1. curl http://127.0.0.1:4000 and netstat -nl within WSL2 (e.g. using a bash session on Linux)
  2. curl http://127.0.0.1:4000 from the host (e.g. PowerShell on Windows)

Please paste the output.

And by the way, how are you accessing the Emulator UI? Are you accessing it on the Windows host on the same device where WSL2 is running? Either way, make sure you use http://127.0.0.1/ instead of localhost.

1. curl http://127.0.0.1:4000 and netstat -nl within WSL2 (e.g. using a bash session on Linux)

tom-linux@DESKTOP:~$ curl http://127.0.0.1:4000
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="msapplication-TileColor" content="#681da8"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#681da8"/><meta name="description" content="Web site created using create-react-app"/><link rel="manifest" href="/manifest.json?v=3"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=3"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=3"><link rel="mask-icon" href="/safari-pinned-tab.svg?v=3" color="#681da8"><link rel="icon" href="/favicon.ico?v=3"/><title>Firebase Emulator Suite</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Roboto Mono:300,400,500" rel="stylesheet"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link href="/static/css/2.3a9d61e3.chunk.css" rel="stylesheet"><link href="/static/css/main.8b1c7704.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,i,a=r[0],f=r[1],c=r[2],s=0,p=[];s<a.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(l&&l(r);p.length;)p.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var f=t[a];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"f1fb2c8e",4:"ff183786",5:"3c3415d4",6:"1f361fdf",7:"89d4cf82",8:"dfaa6f1d",9:"1bec8998",10:"947d73d2"}[e]+".chunk.js"}(e);var f=new Error;u=function(r){a.onerror=a.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;f.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",f.name="ChunkLoadError",f.type=n,f.request=u,t[1](f)}o[e]=void 0}};var c=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/",i.oe=function(e){throw console.error(e),e};var a=this["webpackJsonpfirebase-tools-ui"]=this["webpackJsonpfirebase-tools-ui"]||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var c=0;c<a.length;c++)r(a[c]);var l=f;t()}([])</script><script src="/static/js/2.fbaea028.chunk.js">

tom-linux@DESKTOP:~$ netstat -nl

Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State
tcp        0      0 127.0.0.1:5000          0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:5001          0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:4400          0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:4500          0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:39135         0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:41119         0.0.0.0:*               LISTEN
tcp        0      0 127.0.0.1:4000          0.0.0.0:*               LISTEN
Active UNIX domain sockets (only servers)
Proto RefCnt Flags       Type       State         I-Node   Path
unix  2      [ ACC ]     SEQPACKET  LISTENING     18572    /run/WSL/779_interop
unix  2      [ ACC ]     SEQPACKET  LISTENING     18653    /run/WSL/7_interop
  1. curl http://127.0.0.1:4000` from the host (e.g. PowerShell on Windows)
PS C:\Users\tom> curl http://127.0.0.1:4000
curl : The underlying connection was closed: An unexpected error occurred on a receive.
At line:1 char:1
+ curl http://127.0.0.1:4000
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~
    + CategoryInfo          : InvalidOperation: (System.Net.HttpWebRequest:HttpWebRequest) [Invoke-WebRequest], WebExc
   eption
    + FullyQualifiedErrorId : WebCmdletWebResponseException,Microsoft.PowerShell.Commands.InvokeWebRequestCommand`

@b0ot
Copy link
Author

b0ot commented Nov 6, 2020

Additional Information:

I downgraded my Debian install to WSL1 and then started the emulator suite.
At first I got some issues related to ports not being free.
I restarted my machine to make sure my Ubuntu WSL2 wasn't started

I still got issues related to the ports being blocked.
I manually changed the ports one by one in the firebase.json file until there were no longer conflicts.
I ran the emulators with: firebase emulators:start --import=./seed and it worked. I was able to access the Emulators UI.

However, I'm still not able to access the Emulator UI within WSL 2 (Ubuntu)

  "emulators": {
    "functions": {
      "port": 5002
    },
    "firestore": {
      "port": 8088
    },
    "hosting": {
      "port": 5008
    }

@yuchenshi
Copy link
Member

I'm out of ideas here -- I see the emulators are correctly listening on 127.0.0.1 with IPv4 and netstat results looks right. The difference in WSL1 and WSL2 makes this sound like a configuration issue or bug with WSL2. Would you mind filing an issue to https://github.com/microsoft/WSL/issues and add a link to the outputs above? They may be able to help you further troubleshoot.

@canatella
Copy link

It seems I have kinda the same problem here, updated from 8. something version (sorry, unable to find back the previous version I was in), to 9.12.1 on Ubuntu 20.10. The main page seems to be served correctly but then some javascript requests are replied with HTML:

General:
Request URL: http://localhost:4000/static/js/10.76798a1d.chunk.js
Request Method: GET
Status Code: 304 Not Modified
Remote Address: 127.0.0.1:4000
Referrer Policy: strict-origin-when-cross-origin

Response Headers:
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Content-Length: 4019
Content-Type: text/html; charset=UTF-8
Date: Wed, 09 Jun 2021 08:56:28 GMT
ETag: W/"fb3-179efdec562"
Last-Modified: Wed, 09 Jun 2021 08:23:44 GMT
X-Powered-By: Express

Request Headers:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: localhost:4000
If-Modified-Since: Wed, 09 Jun 2021 08:23:44 GMT
If-None-Match: W/"fb3-179efdec562"
Referer: http://localhost:4000/firestore
sec-ch-ua: "Chromium";v="91", " Not;A Brand";v="99"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: script
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

Response:
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="msapplication-TileColor" content="#681da8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#681da8"/><meta name="description" content="A local-first UI for Firebase Emulator Suite."/><link rel="manifest" href="/manifest.json?v=3"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=3"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=3"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=3"/><link rel="mask-icon" href="/safari-pinned-tab.svg?v=3" color="#681da8"/><link rel="icon" href="/favicon.ico?v=3"/><title>Firebase Emulator Suite</title><link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Roboto Mono:300,400,500" rel="stylesheet"/><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/><link href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended" rel="stylesheet"/><link href="/static/css/10.f66d6f83.chunk.css" rel="stylesheet"><link href="/static/css/main.85b736f6.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,i,a=r[0],c=r[1],f=r[2],l=0,p=[];l<a.length;l++)i=a[l],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(s&&s(r);p.length;)p.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var c=t[a];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={8:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({0:"analytics",1:"auth",2:"firestore",3:"functions",5:"messaging",6:"performance",7:"remoteConfig",9:"storage"}[e]||e)+"."+{0:"1b66ff3a",1:"92c79cbc",2:"61cc0c47",3:"5bc207f8",5:"d11debf6",6:"1b18b63c",7:"bb323ff5",9:"e607d262"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){a.onerror=a.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/",i.oe=function(e){throw console.error(e),e};var a=this["webpackJsonpfirebase-tools-ui"]=this["webpackJsonpfirebase-tools-ui"]||[],c=a.push.bind(a);a.push=r,a=a.slice();for(var f=0;f<a.length;f++)r(a[f]);var s=c;t()}([])</script><script src="/static/js/10.76798a1d.chunk.js"></script><script src="/static/js/main.4c3be1bc.chunk.js"></script></body></html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@canatella @b0ot @yuchenshi