GitHub Codespaces Firebase Firestore UI Emulator Whitescreen of Death Error

[gregv]

Describe the bug Firestore Component does not render correctly when ran within GitHub Codespaces. Video: https://youtu.be/ZSifwz9Gt4M

To Reproduce

1. Start Forestore emulator + UI firebase emulators:start --import 2022-11-20T02\:56\:20_12843/ --project test-ohack-dev
2. Make port 4000 public within GitHub Codespaces to fix any CORS issues
3. Open Firestore UI in browser
4. Under "Firestore emulator" click "Go to emulator"
5. See error (white screen)

Expected behavior Should open Firestore emulator UI

Screenshots https://youtu.be/ZSifwz9Gt4M

Desktop (please complete the following information): N/A - this is running in Github codespaces

Smartphone (please complete the following information): N/A - this is running in Github codespaces

Additional context firebase.json

{  
  "emulators": {  
    "firestore": {
      "host": "0.0.0.0",
      "port": 8080
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  }
}

I'm loading sample test data via this firebase-export-metadata.json that runs fine on my local laptop

{
  "version": "X.X.X",
  "firestore":
  {
    "version": "X.XX.X",
    "path": "2022-11-20T02:56:20_12843",
    "metadata_file": "2022-11-20T02:56:20_12843.overall_export_metadata"
  }
}

firestore.rules (default)

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      // This rule allows anyone with your database reference to view, edit,
      // and delete all data in your database. It is useful for getting
      // started, but it is configured to expire after 30 days because it
      // leaves your app open to attackers. At that time, all client
      // requests to your database will be denied.
      //
      // Make sure to write security rules for your app before that time, or
      // else all client requests to your database will be denied until you
      // update your rules.
      allow read, write: if request.time < timestamp.date(2022, 12, 20);
    }
  }
}

firestore.indexes.json (default)

{
  "indexes": [],
  "fieldOverrides": []
}

[yuchenshi]

Duplicate of #912

[jeremytondo]

I'm curious. Has anyone actually got this working with codespaces? #912 helped, but I still can't get passed some CORS and Websocket errors. So, while I can load and use the UI, the Firestore section will not load.

[Skarvion]

@jeremytondo Have you ensure that you forward the port for the websocket other than the ones for the services? It should be listed as extra port

[jeremytondo]

@Skarvion Yeah, I went through and made sure that all ports being used were forwarded. I haven't tried this in awhile though as I decided to find a solution other than Code Spaces.

[ezequieltejada]

@Skarvion Yeah, I went through and made sure that all ports being used were forwarded. I haven't tried this in awhile though as I decided to find a solution other than Code Spaces.

@Skarvion May I ask which solution you chose instead of Codespaces?

[Skarvion]

@Skarvion Yeah, I went through and made sure that all ports being used were forwarded. I haven't tried this in awhile though as I decided to find a solution other than Code Spaces.

@Skarvion May I ask which solution you chose instead of Codespaces?

@ezequieltejada Tagged the wrong person, should be jeremy

[ezequieltejada]

@Skarvion Yeah, I went through and made sure that all ports being used were forwarded. I haven't tried this in awhile though as I decided to find a solution other than Code Spaces.

@Skarvion May I ask which solution you chose instead of Codespaces?

@ezequieltejada Tagged the wrong person, should be jeremy

My bad... @jeremytondo Which solution did you choose?

[jeremytondo]

@ezequieltejada I ended up using VSCode server on my own hardware.

https://code.visualstudio.com/docs/remote/vscode-server

[ezequieltejada]

@ezequieltejada I ended up using VSCode server on my own hardware.

https://code.visualstudio.com/docs/remote/vscode-server

Thank you Jeremy! For anyone interested, I'm checking out this: https://docs.linuxserver.io/images/docker-code-server/