Firebase Emulators
An emulator dashboard panel that shows the status of each Firebase emulator, embeds the Emulator UI, and auto-detects emulator URLs from terminal output.
The Firebase Emulator Suite lets you run local versions of Firebase services for development and testing. Rift Panel's Emulator panel gives you a unified view of every running emulator without needing to juggle browser tabs or parse terminal output for port numbers. The panel combines a status grid, an embedded Emulator UI, and automatic URL detection into a single workspace panel.
Emulator Dashboard
The dashboard displays a status grid with one row per emulator service. Each row shows the service name, its port number, and a status indicator:
| Service | Default Port | Description |
|---|---|---|
| Authentication | 9099 | Local auth emulator for sign-in and user management |
| Firestore | 8080 | Local Firestore database emulator |
| Realtime Database | 9000 | Local Realtime Database emulator |
| Functions | 5001 | Local Cloud Functions execution environment |
| Hosting | 5000 | Local hosting server for static content |
| Pub/Sub | 8085 | Local Pub/Sub emulator for event-driven functions |
| Storage | 9199 | Local Cloud Storage emulator |
Status indicators use a color-coded system: green for running, gray for stopped, and red for errored. The port numbers are read from your firebase.json emulator configuration, so custom ports are reflected accurately.
Embedded UI
The Firebase Emulator Suite ships with a browser-based UI (typically served at http://localhost:4000). Rift Panel embeds this UI directly into the panel using an iframe, so you can interact with emulator data — browse Firestore documents, inspect auth users, view function logs — without leaving the workspace.
The embedded UI automatically refreshes when the emulator suite is restarted. If the Emulator UI is not yet available (because emulators have not started), the panel shows a placeholder with a button to start the emulators in a new terminal session.
The Emulator UI URL defaults to http://localhost:4000 but respects any custom port configured in your firebase.json under the emulators.ui key.
Auto-Detection
Rift Panel monitors terminal output across all sessions for Firebase Emulator startup messages. When the emulator suite starts, it prints lines like:
╔ Emulator UI logging to ui-debug.log ║ View Emulator UI at http://127.0.0.1:4000
Rift Panel parses these lines and extracts the Emulator UI URL automatically. If an Emulator panel is already open, it navigates the embedded iframe to the detected URL. If no Emulator panel is open, a notification appears offering to open one with a single click.
Auto-detection also works for individual emulator ports. If a terminal session outputs a line like firestore: Emulator started at http://127.0.0.1:8080, the dashboard grid updates the Firestore row to show the running status and correct port number in real time.
Starting Emulators
The Emulator panel itself does not start the emulator processes. To start emulators, run the following command in a terminal session:
firebase emulators:start
You can also start specific emulators with the --only flag:
firebase emulators:start --only firestore,functions,auth
For the best workflow, split your workspace so the terminal running the emulators is visible alongside the Emulator dashboard panel. This lets you see both the raw CLI output and the structured status grid simultaneously. Rift Panel's auto-detection will keep the dashboard in sync as emulators start and stop.
Add --import=./emulator-data --export-on-exit to your emulator start command to persist emulator data between sessions. This avoids re-seeding test data every time you restart the suite.