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

@@ -2,10 +2,13 @@
 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";
+import { createApp } from "./ui/server";
 import { ALL_EXPERIMENTS, ExperimentName, isEnabled } from "../experiments";
+import { createDestroyer } from "../utils";
 
 export interface EmulatorUIOptions {
   listen: ListenSpec[];
@@ -14,42 +17,47 @@
 }
 
 export class EmulatorUI implements EmulatorInstance {
-  constructor(private args: EmulatorUIOptions) {}
 
-  start(): Promise<void> {
+  private destroyServer?: () => Promise<void>;
+  constructor(private args: EmulatorUIOptions) { }
+
+  async start(): Promise<void> {
     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 session = emulatorSession();
-    if (session) {
-      env[Constants.FIREBASE_GA_SESSION] = JSON.stringify(session);
-    }
+    const { projectId } = this.args;
 
-    const enabledExperiments = (Object.keys(ALL_EXPERIMENTS) as Array<ExperimentName>).filter(
+    // FIXME Question: do we need GCLOUD_PROJECT: projectId, for anything?
+    const enabledExperiments: Array<ExperimentName> = (Object.keys(ALL_EXPERIMENTS) as Array<ExperimentName>).filter(
       (experimentName) => isEnabled(experimentName),
     );
-    env[Constants.FIREBASE_ENABLED_EXPERIMENTS] = JSON.stringify(enabledExperiments);
+    const downloadDetails = downloadableEmulators.DownloadDetails[Emulators.UI]; // FIXME Question: use getDownloadDetails to re-use path override? idk
+    await downloadableEmulators.downloadIfNecessary(Emulators.UI);
+
+    const server = await createApp(
+      downloadDetails.unzipDir!!,
+      projectId,
+      EmulatorRegistry.url(Emulators.HUB).host,
+      emulatorSession(),
+      ExpressBasedEmulator.listenOptionsFromSpecs(this.args.listen),
+      enabledExperiments);
+      this.destroyServer = createDestroyer(server);
 
-    return downloadableEmulators.start(Emulators.UI, { auto_download: autoDownload }, env);
   }
 
   connect(): Promise<void> {
     return Promise.resolve();
   }
 
   stop(): Promise<void> {
-    return downloadableEmulators.stop(Emulators.UI);
+    if (this.destroyServer) {
+      return this.destroyServer();
+    }
+    return Promise.resolve();
   }
 
   getInfo(): EmulatorInfo {

src/emulator/ui/server.ts

@@ -0,0 +1,118 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createServer } from 'http';
+import type { ListenOptions } from 'net';
+import * as path from 'path';
+
+import * as express from "express";
+import fetch from 'node-fetch';
+import { AnalyticsSession } from "../../track";
+import { ExperimentName } from "../../experiments";
+import * as http from "http";
+
+/*
+  This file defines Node.js server-side logic for the Emulator UI.
+
+  It is a facsimile class of the local server in firebase-tools-ui/server.ts. For that reason, 
+  values that were previously environment variables are passed in rather than fetched/derived 
+  in the class itself.
+*/
+export async function createApp(
+  zipDirPath: string,
+  projectId: string,
+  hubHost: string,
+  emulatorGaSession: AnalyticsSession | undefined,
+  listenOptions: ListenOptions[],
+  experiments: Array<ExperimentName>): Promise<http.Server> {
+
+  const app = express();
+  // 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',
+    jsonHandler(async () => {
+      const hubDiscoveryUrl = new URL(`http://${hubHost}/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 (experiments) {
+        json.experiments = experiments;
+      }
+
+      return json;
+    })
+  );
+
+  const webDir = path.join(zipDirPath, 'client');
+  app.use(express.static(webDir));
+  // Required for the router to work properly.
+  app.get('*', function (_, res) {
+    res.sendFile(path.join(webDir, 'index.html'));
+  });
+
+  if (listenOptions.length == 0) {
+    console.error(`Failed to start UI server, listenOptions empty`);
+    process.exit(1);
+  }
+  var server = null;
+  for (const opts of listenOptions) {
+    server = createServer(app).listen(opts);
+    server.once('listening', () => {
+      console.log(`Web / API server started at ${opts.host}:${opts.port}`);
+    });
+    server.once('error', (err) => {
+      console.error(`Failed to start server at ${opts.host}:${opts.port}`);
+      console.error(err);
+      if (opts === listenOptions[0]) {
+        // If we failed to listen on the primary address, surface the error.
+        process.exit(1);
+      }
+    });
+  }
+
+  return server!!
+}
+
+function jsonHandler(
+  handler: (req: express.Request) => Promise<object>
+): express.Handler {
+  return (req, res) => {
+    handler(req).then(
+      (body) => {
+        res.status(200).json(body);
+      },
+      (err) => {
+        console.error(err);
+        res.status(500).json({
+          message: err.message,
+          stack: err.stack,
+          raw: err,
+        });
+      }
+    );
+  };
+}