Moving the emulator UI server to firebase-tools.

src/emulator/controller.ts

@@ -69,20 +69,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...`);
     }
   }
 }
@@ -305,7 +305,7 @@
   }
 
   const hubLogger = EmulatorLogger.forEmulator(Emulators.HUB);
-  hubLogger.logLabeled("BULLET", "emulators", `Starting emulators: ${targets.join(", ")}`);
+  hubLogger.logLabeled("BULLET", "emulators", `LINKED: Starting emulators: ${targets.join(", ")}`);
 
   const projectId: string = getProjectId(options) || ""; // TODO: Next breaking change, consider making this fall back to demo project.
   const isDemoProject = Constants.isDemoProject(projectId);

src/emulator/downloadableEmulators.ts

@@ -280,7 +280,7 @@
     joinArgs: true,
     shell: true,
   },
-  ui: {
+  ui: { // FIXME
     binary: "node",
     args: [getExecPath(Emulators.UI)],
     optionalArgs: [],
@@ -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/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,124 @@
+/**
+ * Copyright 2022 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.
+
+  During development, the express app is loaded into the Vite dev server
+  (configured via ./vite.config.ts) and exposes the /api/* endpoints below.
+
+  For production, this file serves as an entry point and runs additional logic
+  (see `import.meta.env.PROD` below) to start the server on a port which serves
+  static assets in addition to APIs.
+
+  This file may NOT import any front-end code or types from src/.
+*/
+// FIXME note that this is a facsimile class, and some items are passed in rather than fetched on purpose to keep logic similar to the local instance.
+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,
+        });
+      }
+    );
+  };
+}