Moving the emulator UI server to firebase-tools.

src/emulator/controller.ts

@@ -70,20 +70,20 @@
 
 /**
  * Exports emulator data on clean exit (SIGINT or process end)
  * @param options
  */
 export async function exportOnExit(options: any) {
   const exportOnExitDir = options.exportOnExit;
   if (exportOnExitDir) {
     try {
       utils.logBullet(
         `Automatically exporting data using ${FLAG_EXPORT_ON_EXIT_NAME} "${exportOnExitDir}" ` +
           "please wait for the export to finish...",
       );
       await exportEmulatorData(exportOnExitDir, options, /* initiatedBy= */ "exit");
     } catch (e: any) {
       utils.logWarning(e);
       utils.logWarning(`Automatic export to "${exportOnExitDir}" failed, going to exit now...`);
     }
   }
 }
@@ -964,7 +964,6 @@
   if (listenForEmulator.ui) {
     const ui = new EmulatorUI({
       projectId: projectId,
-      auto_download: true,
       listen: listenForEmulator[Emulators.UI],
     });
     await startEmulator(ui);

src/emulator/downloadableEmulators.ts

@@ -281,8 +281,8 @@ const Commands: { [s in DownloadableEmulators]: DownloadableEmulatorCommand } =
     shell: true,
   },
   ui: {
-    binary: "node",
-    args: [getExecPath(Emulators.UI)],
+    binary: "",
+    args: [],
     optionalArgs: [],
     joinArgs: false,
     shell: false,

src/emulator/types.ts

@@ -27,6 +27,7 @@ export type DownloadableEmulators =
   | Emulators.UI
   | Emulators.STORAGE
   | Emulators.DATACONNECT;
+
 export const DOWNLOADABLE_EMULATORS = [
   Emulators.FIRESTORE,
   Emulators.DATABASE,

src/emulator/ui.ts

@@ -1,7 +1,11 @@
-import { EmulatorInstance, EmulatorInfo, Emulators, ListenSpec } from "./types";
+import * as express from "express";
+import * as path from "path";
+import fetch from "node-fetch";
+import { Emulators, ListenSpec } from "./types";
 import * as downloadableEmulators from "./downloadableEmulators";
 import { EmulatorRegistry } from "./registry";
 import { FirebaseError } from "../error";
+import { EmulatorLogger } from "./emulatorLogger";
 import { Constants } from "./constants";
 import { emulatorSession } from "../track";
 import { ExpressBasedEmulator } from "./ExpressBasedEmulator";
@@ -10,58 +14,99 @@ import { ALL_EXPERIMENTS, ExperimentName, isEnabled } from "../experiments";
 export interface EmulatorUIOptions {
   listen: ListenSpec[];
   projectId: string;
-  auto_download?: boolean;
 }
 
-export class EmulatorUI implements EmulatorInstance {
-  constructor(private args: EmulatorUIOptions) {}
+export class EmulatorUI extends ExpressBasedEmulator {
+  constructor(private args: EmulatorUIOptions) {
+    super({
+      listen: args.listen,
+    });
+  }
+
+  override async start(): Promise<void> {
+    await super.start();
+  }
 
-  start(): Promise<void> {
+  protected override async createExpressApp(): Promise<express.Express> {
     if (!EmulatorRegistry.isRunning(Emulators.HUB)) {
       throw new FirebaseError(
         `Cannot start ${Constants.description(Emulators.UI)} without ${Constants.description(
           Emulators.HUB,
         )}!`,
       );
     }
-    const { auto_download: autoDownload, projectId } = this.args;
-    const env: Partial<NodeJS.ProcessEnv> = {
-      LISTEN: JSON.stringify(ExpressBasedEmulator.listenOptionsFromSpecs(this.args.listen)),
-      GCLOUD_PROJECT: projectId,
-      [Constants.FIREBASE_EMULATOR_HUB]: EmulatorRegistry.url(Emulators.HUB).host,
-    };
+    const app = await super.createExpressApp();
+    const { projectId } = this.args;
+    const enabledExperiments: Array<ExperimentName> = (
+      Object.keys(ALL_EXPERIMENTS) as Array<ExperimentName>
+    ).filter((experimentName) => isEnabled(experimentName));
+    const emulatorGaSession = emulatorSession();
 
-    const session = emulatorSession();
-    if (session) {
-      env[Constants.FIREBASE_GA_SESSION] = JSON.stringify(session);
-    }
+    await downloadableEmulators.downloadIfNecessary(Emulators.UI);
+    const downloadDetails = downloadableEmulators.getDownloadDetails(Emulators.UI);
+    const webDir = path.join(downloadDetails.unzipDir!!, "client");
+
+    // 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.
+    app.get(
+      "/api/config",
+      this.jsonHandler(async () => {
+        const hubDiscoveryUrl = new URL(
+          `http://${EmulatorRegistry.url(Emulators.HUB).host}/emulators`,
+        );
+        const emulatorsRes = await fetch(hubDiscoveryUrl.toString());
+        const emulators = (await emulatorsRes.json()) as any;
+
+        const json = { projectId, experiments: [], ...emulators };
+
+        // 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;
+        }
 
-    const enabledExperiments = (Object.keys(ALL_EXPERIMENTS) as Array<ExperimentName>).filter(
-      (experimentName) => isEnabled(experimentName),
+        return json;
+      }),
     );
-    env[Constants.FIREBASE_ENABLED_EXPERIMENTS] = JSON.stringify(enabledExperiments);
 
-    return downloadableEmulators.start(Emulators.UI, { auto_download: autoDownload }, env);
+    app.use(express.static(webDir));
+    // Required for the router to work properly.
+    app.get("*", (_, res) => {
+      res.sendFile(path.join(webDir, "index.html"));
+    });
+
+    return app;
   }
 
   connect(): Promise<void> {
     return Promise.resolve();
   }
 
-  stop(): Promise<void> {
-    return downloadableEmulators.stop(Emulators.UI);
+  getName(): Emulators {
+    return Emulators.UI;
   }
 
-  getInfo(): EmulatorInfo {
-    return {
-      name: this.getName(),
-      host: this.args.listen[0].address,
-      port: this.args.listen[0].port,
-      pid: downloadableEmulators.getPID(Emulators.UI),
+  jsonHandler(handler: (req: express.Request) => Promise<object>): express.Handler {
+    return (req, res) => {
+      handler(req).then(
+        (body) => {
+          res.status(200).json(body);
+        },
+        (err) => {
+          EmulatorLogger.forEmulator(Emulators.UI).log("ERROR", err);
+          res.status(500).json({
+            message: err.message,
+            stack: err.stack,
+            raw: err,
+          });
+        },
+      );
     };
   }
-
-  getName(): Emulators {
-    return Emulators.UI;
-  }
 }