Moving the emulator UI server to firebase-tools.

src/emulator/downloadableEmulators.ts

@@ -1,4 +1,4 @@
 const lsofi = require("lsofi");
 import {
   Emulators,
   DownloadableEmulators,
@@ -274,15 +274,15 @@
     shell: false,
   },
   pubsub: {
     binary: `${getExecPath(Emulators.PUBSUB)!}`,
     args: [],
     optionalArgs: ["port", "host"],
     joinArgs: true,
     shell: true,
   },
   ui: {
-    binary: "node",
-    args: [getExecPath(Emulators.UI)],
+    binary: "",
+    args: [],
     optionalArgs: [],
     joinArgs: false,
     shell: false,
@@ -310,7 +310,7 @@
 }
 
 /**
  * @param name
  */
 export function getLogFileName(name: string): string {
   return `${name}-debug.log`;
@@ -323,7 +323,7 @@
  */
 export function _getCommand(
   emulator: DownloadableEmulators,
   args: { [s: string]: any },
 ): DownloadableEmulatorCommand {
   const baseCmd = Commands[emulator];
   const defaultPort = Constants.getDefaultPort(emulator);
@@ -336,7 +336,7 @@
   if (
     baseCmd.binary === "java" &&
     utils.isRunningInWSL() &&
     (!args.host || !args.host.includes(":"))
   ) {
     // HACK(https://github.com/firebase/firebase-tools-ui/issues/332): Force
     // Java to use IPv4 sockets in WSL (unless IPv6 address explicitly used).
@@ -355,7 +355,7 @@
     }
 
     const argKey = "--" + key;
     const argVal = args[key];
 
     if (argVal === undefined) {
       logger.log("DEBUG", `Ignoring empty arg for key: ${key}`);
@@ -364,9 +364,9 @@
 
     // Sigh ... RTDB emulator needs "--arg val" and PubSub emulator needs "--arg=val"
     if (baseCmd.joinArgs) {
       cmdLineArgs.push(`${argKey}=${argVal}`);
     } else {
       cmdLineArgs.push(argKey, argVal);
     }
   });
 
@@ -527,7 +527,7 @@
  */
 export function getDownloadDetails(emulator: DownloadableEmulators): EmulatorDownloadDetails {
   const details = DownloadDetails[emulator];
-  const pathOverride = process.env[`${emulator.toUpperCase()}_EMULATOR_BINARY_PATH`];
+  const pathOverride = process.env[`${emulator.toUpperCase()}_EMULATOR_BINARY_PATH`]; // FIXME care about this for UI?
   if (pathOverride) {
     const logger = EmulatorLogger.forEmulator(emulator);
     logger.logLabeled(

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";
@@ -13,55 +17,98 @@
   auto_download?: boolean;
 }
 
-export class EmulatorUI implements EmulatorInstance {
-  constructor(private args: EmulatorUIOptions) {}
+export class EmulatorUI extends ExpressBasedEmulator {
 
-  start(): Promise<void> {
+  constructor(private args: EmulatorUIOptions) {
+    super({
+      listen: args.listen,
+    });
+  }
+
+  override async start(): Promise<void> {
+    await super.start();
+  }
+
+  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');
 
-    const enabledExperiments = (Object.keys(ALL_EXPERIMENTS) as Array<ExperimentName>).filter(
-      (experimentName) => isEnabled(experimentName),
+    // 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;
+        }
+
+        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('*', function (_, 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;
-  }
 }