Blank screen on Firestore UI page

[tymoeric]

When navigating to http://localhost:****/firestore/ either by URL or clicking "Go to Emulator" from the main page of the emulators, a blank screen is shown. Console shows TypeErrors "Failed to fetch" as well as Unsafe Port errors.

To Reproduce Steps to reproduce the behavior:

1. Go to http://localhost:xxxx
2. Click on 'Go to Emulator'

Expected behavior Being able to access the firestorm emulator

Screenshots

Desktop (please complete the following information):

• OS: Monterey on M1
• Browser Chrome, Safari, and Firefox

[yuchenshi]

Sorry, Chrome doesn't allow connecting to 6666 and there's nothing we can do about it. I'd suggest changing the firebase.json config to use a different port for Firestore.

[madhundle]

I have the exact same issue with port 9150. My development environment is VSCode.

[lucasca95]

Good day, guys.

I'm working on a project, trying to learn about development in Firebase. While using the Firebase Emulator UI, I noticed an issue when using the Firestore Emulator: the screen goes blank.

I have my code in IDX, so I first thought I could be having problmes with the url being different than localhost, but it looks like the emulator is not working when using HTTPS.

If change that to HTTP, I can see how the page tries to load but quickly goes away into that blank screen I mentioned before.

I know how the firestore emulator should look like because if I run the project locally, it works. However I do need to run it on IDX.

When running firebase emulators:start --only firestore I see:

When opening the Emulators UI I see:

And when clicking on the Firestore Emulator I see: (inspector)

(console)

(network)

Hopefully these screenshots may help someone who knows more than me figure out what could be going on with this emulator.

I would really appreciate some help to get it back to work, since I may be doing something wrong and can't find what that is :/

Thank you so much!

[portah]

Can this issue be opened again, same problem here as @lucasca95 has?

[yuchenshi]

I think we have a few different connectivity issues with the same symptoms here. Thanks @lucasca95 for the detailed report and port forwarding in IDX is indeed tricky here, and we may need to investigate more.

Other folks, would you mind sharing a bit more details about your network setup, such as whether you're using remote development (e.g. the browser isn't on the same device as the CLI, or Docker, etc.), what ports Firestore and other emulators are set to run (e.g. firebase.json) and so on?

[davestimpert]

I'm seeing this issue trying to set up emulators on idx.dev. I've tried a few different ports for firestore but nothing works. I'm able to see the other pages in the firebase emulators UI, but not firestore.

127.0.0.1:8080/v1/projects/**********/databases/(default)/documents:listCollectionIds:1 
        
        
       Failed to load resource: net::ERR_CONNECTION_REFUSEDUnderstand this error
react-dom.production.min.js:186 TypeError: Failed to fetch
    at useRequest.ts:28:18
    at index.esm.js:757:54
    at c (index.esm.js:50:23)
    at Object.next (index.esm.js:31:53)
    at index.esm.js:24:71
    at new Promise (<anonymous>)
    at w9 (index.esm.js:20:12)
    at index.esm.js:700:69
    at Ode (index.esm.js:1023:36)
    at index.esm.js:612:16

[kenzomartins]

I'm having a similar experience when running the emulator on Project IDX, the screen goes blank when trying to connect to Firestore from the emulator; Here are the details.

Description: I am experiencing persistent CORS (Cross-Origin Resource Sharing) issues when using the Firebase Emulator UI to connect to the Firestore Emulator within the Project IDX environment. Despite both services appearing to run under the same domain (*.cloudworkstations.dev), the browser blocks requests due to a missing Access-Control-Allow-Origin header.

Steps to Reproduce:

1. I set up a Firebase Emulator Suite within Project IDX, including the following services:
   • Authentication Emulator (Port: 9099)
   • Firestore Emulator (Port: 8080)
   • Functions Emulator (Port: 5001)
   • Firebase Emulator UI (Port: 4000)
2. Access the Firebase Emulator UI at the following URL:
   • https://4000-idx-motito-firebase-backend-1729546918230.cluster-rcyheetymngt4qx5fpswua3ry4.cloudworkstations.dev
3. Interact with the Firestore Emulator from the Firebase Emulator UI.

Observed Behavior:

• In the browser's console, the following error occurs when the Emulator UI attempts to connect to the Firestore Emulator: Access to manifest at 'https://4000-idx-motito-firebase-backend-1729546918230.cluster-rcyheetymngt4qx5fpswua3ry4.cloudworkstations.dev' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
• Additionally, WebSocket connections fail, and authentication-related redirects result in cookie issues.
• The issue occurs despite both services being hosted on the same *.cloudworkstations.dev domain, but with different subdomains or ports.

Error Details:

1. CORS Policy Violation:
   • The browser blocks requests because the server response from Firestore Emulator does not include the Access-Control-Allow-Origin header.
2. 302 Redirect Issues:
   • Requests for resources such as manifest.json are redirected with a 302 status code, which causes further CORS enforcement.
3. WebSocket Failures:
   • WebSocket connections to wss://4000-idx-motito-firebase-backend... fail due to CORS-related issues.
4. Cross-Site Cookie Issues:
   • A warning in the console mentions potential issues with reading cookies in a cross-site context, which could affect the forwarding of authentication tokens.

Troubleshooting Steps Taken:

1. Checked Emulator Configuration:
I verified the emulator setup in firebase.json, ensuring that all emulators are configured with correct ports and hosts. The configuration looks valid and matches the Project IDX environment.
2. Updated Firebase Tools:
I ensured that my Firebase CLI is up-to-date (firebase-tools), but the issue persists.

Environment:

• Project IDX: Running the emulators in a cloud-based development environment provided by Google.
• Browser: Google Chrome (Version 130.x, latest version).
• Firebase Emulator Suite:
  • Firestore Emulator: localhost:8080
  • Functions Emulator: localhost:5001
  • Authentication Emulator: localhost:9099
  • Firebase Emulator UI: localhost:4000

Request for Support: I would appreciate guidance on how to resolve these CORS issues in the Project IDX environment. It seems that the environment is treating requests from different subdomains or ports as cross-origin, even though the root domain remains the same (*.cloudworkstations.dev). Specifically:

• Is there a way to configure CORS headers in the Firebase Emulator Suite on Project IDX?
• Are there known restrictions or limitations in the Project IDX environment that could be causing this?
• Could you provide any configuration changes or alternative approaches to handling CORS and WebSocket connections in this cloud-based setup?

Thank you for your assistance!

[tarobins]

I had this issue when running a development server on a virtual machine. I needed to forward additional ports to solve this issue. In my case 9150 and 8080.

[seungwubaek]

In my case, it's not the same environments with author's, my problem ports are 8080 (firestore) and 9150 (web socket port, hub server maybe?). The cause is not from firebase tools but dev container. I was using dev container with vscode. I just needed to open port forwarding for the two ports manually like below screenshot. I hope this help to someone

[nelsongonzalez]

I guess at this point you are using Firebase Studio, in the workspace where Firebase Emulators is running open the Backend Port configured for Firestore, that worked for me.

The port configured for Firestore is in the file firebase.json, the field emulators.firestore.port.

To open the Backend Port as public you have to navigate to the left menu bar, click on Firebase Studio, and take a look at the section BACKEND PORTS, all the port should be marked as private with a padlock (🔒) icon, click on that icon to open the port.