Support Firebase sutdio port forwarding in emulator suite (#8443)

* Trying out some IDX hax

* Oops

* round 2

* Progess!

* Progess!

* More hax

* a cleaner appraoch

* For functions, too

* For functions, too

* Dont double apply

* Dont double apply

* websockets too

* extra url

* PR cleanup

* Use WEB_HOST instead

* Use 443 instead

Author: joehan

src/emulator/env.ts

@@ -4,6 +4,7 @@ import { formatHost } from "./functionsEmulatorShared";
 import { Account } from "../types/auth/index";
 import { EmulatorLogger } from "./emulatorLogger";
 import { getCredentialPathAsync, hasDefaultCredentials } from "../defaultCredentials";
+import { FirestoreEmulatorInfo } from "./firestoreEmulator";
 
 /**
  * Adds or replaces emulator-related env vars (for Admin SDKs, etc.).
@@ -14,6 +15,7 @@ export function setEnvVarsForEmulators(
   env: Record<string, string | undefined>,
   emulators: EmulatorInfo[],
 ): void {
+  maybeUsePortForwarding(emulators);
   for (const emu of emulators) {
     const host = formatHost(emu);
     switch (emu.name) {
@@ -85,3 +87,30 @@ export async function getCredentialsEnvironment(
   }
   return credentialEnv;
 }
+
+export function maybeUsePortForwarding(emulatorInfos: EmulatorInfo[]): EmulatorInfo[] {
+  const portForwardingHost = process.env.WEB_HOST;
+  if (portForwardingHost) {
+    for (const info of emulatorInfos) {
+      if (info.host.includes(portForwardingHost)) {
+        // Don't double apply this.
+        // TODO: Just deep copy everything each time.
+        continue;
+      }
+      const url = `${info.port}-${portForwardingHost}`;
+      info.host = url;
+      info.listen = info.listen?.map((l) => {
+        l.address = url;
+        l.port = 443;
+        return l;
+      });
+      info.port = 443;
+      const fsInfo = info as FirestoreEmulatorInfo;
+      if (fsInfo.webSocketPort) {
+        fsInfo.webSocketHost = `${fsInfo.webSocketPort}-${portForwardingHost}`;
+        fsInfo.webSocketPort = 443;
+      }
+    }
+  }
+  return emulatorInfos;
+}

src/emulator/functionsEmulator.ts

@@ -59,7 +59,7 @@ import * as functionsEnv from "../functions/env";
 import { AUTH_BLOCKING_EVENTS, BEFORE_CREATE_EVENT } from "../functions/events/v1";
 import { BlockingFunctionsConfig } from "../gcp/identityPlatform";
 import { resolveBackend } from "../deploy/functions/build";
-import { getCredentialsEnvironment, setEnvVarsForEmulators } from "./env";
+import { getCredentialsEnvironment, maybeUsePortForwarding, setEnvVarsForEmulators } from "./env";
 import { runWithVirtualEnv } from "../functions/python";
 import { Runtime } from "../deploy/functions/runtimes/supported";
 import { ExtensionsEmulator } from "./extensionsEmulator";
@@ -1427,6 +1427,7 @@ export class FunctionsEmulator implements EmulatorInstance {
     if (this.args.remoteEmulators) {
       emulatorInfos = emulatorInfos.concat(Object.values(this.args.remoteEmulators));
     }
+    maybeUsePortForwarding(emulatorInfos);
     setEnvVarsForEmulators(envs, emulatorInfos);
 
     if (this.debugMode) {
@@ -1710,12 +1711,9 @@ export class FunctionsEmulator implements EmulatorInstance {
    * @param emulator
    */
   private getEmulatorInfo(emulator: Emulators): EmulatorInfo | undefined {
-    if (this.args.remoteEmulators) {
-      if (this.args.remoteEmulators[emulator]) {
-        return this.args.remoteEmulators[emulator];
-      }
+    if (this.args.remoteEmulators?.[emulator]) {
+      return this.args.remoteEmulators[emulator];
     }
-
     return EmulatorRegistry.getInfo(emulator);
   }
 

src/emulator/hub.ts

@@ -29,7 +29,7 @@ export interface EmulatorHubArgs {
   listenForEmulator: Record<PortName, ListenSpec[]>;
 }
 
-export type GetEmulatorsResponse = Record<string, EmulatorInfo>;
+export type GetEmulatorsResponse = Partial<Record<Emulators, EmulatorInfo>>;
 
 export class EmulatorHub extends ExpressBasedEmulator {
   static CLI_VERSION = pkg.version;
@@ -79,7 +79,7 @@ export class EmulatorHub extends ExpressBasedEmulator {
     await this.writeLocatorFile();
   }
 
-  getRunningEmulatorsMapping(): any {
+  getRunningEmulatorsMapping(): GetEmulatorsResponse {
     const emulators: GetEmulatorsResponse = {};
     for (const info of EmulatorRegistry.listRunningWithInfo()) {
       emulators[info.name] = {

src/emulator/ui.ts

@@ -6,16 +6,24 @@ import { EmulatorRegistry } from "./registry";
 import { FirebaseError } from "../error";
 import { EmulatorLogger } from "./emulatorLogger";
 import { Constants } from "./constants";
-import { emulatorSession } from "../track";
+import { AnalyticsSession, emulatorSession } from "../track";
 import { ExpressBasedEmulator } from "./ExpressBasedEmulator";
 import { ALL_EXPERIMENTS, ExperimentName, isEnabled } from "../experiments";
-import { EmulatorHub } from "./hub";
+import { EmulatorHub, GetEmulatorsResponse } from "./hub";
+import { maybeUsePortForwarding } from "./env";
 
 export interface EmulatorUIOptions {
   listen: ListenSpec[];
   projectId: string;
 }
 
+// Response shape for /api/config endpoint. Contains info about which emulators are running and where.
+interface EmulatorConfigInfo extends GetEmulatorsResponse {
+  projectId: string;
+  experiments: string[];
+  analytics?: AnalyticsSession;
+}
+
 export class EmulatorUI extends ExpressBasedEmulator {
   constructor(private args: EmulatorUIOptions) {
     super({
@@ -49,27 +57,18 @@ export class EmulatorUI extends ExpressBasedEmulator {
 
     // Exposes the host and port of various emulators to facilitate accessing
     // them using client SDKs. For features that involve multiple emulators or
-    // hard to accomplish using client SDKs, consider adding an API below.
+    // hard to accomplish using client SDKs, consider adding an API below
     app.get(
       "/api/config",
       this.jsonHandler(() => {
-        const json = {
+        const emulatorInfos = (hub! as EmulatorHub).getRunningEmulatorsMapping();
+        maybeUsePortForwarding(Object.values(emulatorInfos));
+        const json: EmulatorConfigInfo = {
           projectId,
-          experiments: [],
-          ...(hub! as EmulatorHub).getRunningEmulatorsMapping(),
+          experiments: enabledExperiments ?? [],
+          analytics: emulatorGaSession,
+          ...emulatorInfos,
         };
-
-        // Googlers: see go/firebase-emulator-ui-usage-collection-design?pli=1#heading=h.jwz7lj6r67z8
-        // for more detail
-        if (emulatorGaSession) {
-          json.analytics = emulatorGaSession;
-        }
-
-        // pick up any experiments enabled with `firebase experiment:enable`
-        if (enabledExperiments) {
-          json.experiments = enabledExperiments;
-        }
-
         return Promise.resolve(json);
       }),
     );