Originally posted by **luc122c** September 8, 2023
I was taking a look at the way Vuefire detects and connects to the Firebase emulators:
https://github.com/vuejs/vuefire/blob/cab2e95e95b9c4d66b5f0fa5e75539f1f3a27f01/packages/nuxt/src/module/emulators.ts#L55 Currently, it uses a combination of environment variables and the `firebase.json` file to see which emulators should be enabled. However, I believe there is a better option. `firebase.json` and the env variables just tell the emulator suite the *desired* ports. While most of the services will shutdown if the port is unavailable, not all do:
```
⚠ logging: Logging Emulator unable to start on port 4500, starting on 4501 instead.
```
The [firebase emulator hub](https://firebase.google.com/docs/emulator-suite/install_and_configure#use_the_emulator_hub_rest_api) offers a REST API to query the running emulators and get back the *actual* host and port in use. I think this would be a more robust solution.
We could simply fetch this endpoint, and capture the host and ports from it. A rough example below:
```ts
const emulators = await $fetch(`http://${HOST}:4400/emulators`)
if (emulators.firestore) {
const { host, port } = emulators.firestore;
connectFirestoreEmulator(firestore, host, port);
}
if (emulators.auth) {
const { host, port } = emulators.auth;
connectAuthEmulator(auth, `http://${host}:${port}`);
}
```
I've been using this in my testing to connect to the emulators and it works fine. Just thought I'd post this idea to get your thoughts.
Discussed in https://github.com/vuejs/vuefire/discussions/1425