Add SDK autoinit to the App Hosting emulator (#8582)

Setup environment variables and trip the Firebase JS SDK's postinstall step. This permits autoinit for both Firebase Admin SDK and JS SDK.

Author: jamesdaniels

CHANGELOG.md

@@ -5,4 +5,5 @@
 - Add GCP API client functions to support App Hosting deploy from source feature. (#8545)
 - Changed firebase init template for functions to pin runtime version on init. (#8553)
 - Fix an issue where updating a Cloud Function that retires would add incorrect fields to the updateMask. (#8560)
+- Add SDK autoinit capabilities to App Hosting emulator. (#8582)
 - Provision App Hosting compute service account during init flow. (#8580)

src/emulator/apphosting/index.ts

@@ -1,8 +1,10 @@
 import { EmulatorInfo, EmulatorInstance, Emulators } from "../types";
 import { start as apphostingStart } from "./serve";
 import { logger } from "./developmentServer";
+
 interface AppHostingEmulatorArgs {
   projectId?: string;
+  backendId?: string;
   options?: any;
   port?: number;
   host?: string;
@@ -20,6 +22,7 @@ export class AppHostingEmulator implements EmulatorInstance {
   async start(): Promise<void> {
     const { hostname, port } = await apphostingStart({
       projectId: this.args.projectId,
+      backendId: this.args.backendId,
       port: this.args.port,
       startCommand: this.args.startCommand,
       rootDirectory: this.args.rootDirectory,

src/emulator/apphosting/serve.ts

@@ -6,7 +6,7 @@
 import { isIPv4 } from "net";
 import * as clc from "colorette";
 import { checkListenable } from "../portUtils";
-import { detectStartCommand } from "./developmentServer";
+import { detectPackageManager, detectStartCommand } from "./developmentServer";
 import { DEFAULT_HOST, DEFAULT_PORTS } from "../constants";
 import { spawnWithCommandString } from "../../init/spawn";
 import { logger } from "./developmentServer";
@@ -17,10 +17,17 @@ import { EmulatorRegistry } from "../registry";
 import { setEnvVarsForEmulators } from "../env";
 import { FirebaseError } from "../../error";
 import * as secrets from "../../gcp/secretManager";
-import { logLabeledError } from "../../utils";
+import { logLabeledError, logLabeledWarning } from "../../utils";
+import * as apphosting from "../../gcp/apphosting";
+import { Constants } from "../constants";
+import { constructDefaultWebSetup, WebConfig } from "../../fetchWebSetup";
+import { AppPlatform, getAppConfig } from "../../management/apps";
+import { spawnSync } from "child_process";
+import { gte as semverGte } from "semver";
 
 interface StartOptions {
   projectId?: string;
+  backendId?: string;
   port?: number;
   startCommand?: string;
   rootDirectory?: string;
@@ -41,7 +48,13 @@ export async function start(options?: StartOptions): Promise<{ hostname: string;
     port += 1;
   }
 
-  await serve(options?.projectId, port, options?.startCommand, options?.rootDirectory);
+  await serve(
+    options?.projectId,
+    options?.backendId,
+    port,
+    options?.startCommand,
+    options?.rootDirectory,
+  );
 
   return { hostname, port };
 }
@@ -102,6 +115,7 @@ async function loadSecret(project: string | undefined, name: string): Promise<st
  */
 async function serve(
   projectId: string | undefined,
+  backendId: string | undefined,
   port: number,
   startCommand?: string,
   backendRelativeDir?: string,
@@ -115,11 +129,34 @@ async function serve(
     value.value ? value.value : await loadSecret(projectId, value.secret!),
   ]);
 
-  const environmentVariablesToInject = {
+  const environmentVariablesToInject: NodeJS.ProcessEnv = {
+    NODE_ENV: process.env.NODE_ENV,
     ...getEmulatorEnvs(),
     ...Object.fromEntries(await Promise.all(resolveEnv)),
+    FIREBASE_APP_HOSTING: "1",
+    X_GOOGLE_TARGET_PLATFORM: "fah",
+    GCLOUD_PROJECT: projectId,
+    PROJECT_ID: projectId,
     PORT: port.toString(),
   };
+
+  const packageManager = await detectPackageManager(backendRoot).catch(() => undefined);
+  if (packageManager === "pnpm") {
+    // TODO(jamesdaniels) look into pnpm support for autoinit
+    logLabeledWarning("apphosting", `Firebase JS SDK autoinit does not currently support PNPM.`);
+  } else {
+    const webappConfig = await getBackendAppConfig(projectId, backendId);
+    if (webappConfig) {
+      environmentVariablesToInject["FIREBASE_WEBAPP_CONFIG"] ||= JSON.stringify(webappConfig);
+      environmentVariablesToInject["FIREBASE_CONFIG"] ||= JSON.stringify({
+        databaseURL: webappConfig.databaseURL,
+        storageBucket: webappConfig.storageBucket,
+        projectId: webappConfig.projectId,
+      });
+    }
+    await tripFirebasePostinstall(backendRoot, environmentVariablesToInject);
+  }
+
   if (startCommand) {
     logger.logLabeled(
       "BULLET",
@@ -167,3 +204,89 @@ export function getEmulatorEnvs(): Record<string, string> {
 
   return envs;
 }
+
+type Dependency = {
+  name: string;
+  version: string;
+  path: string;
+  dependencies?: Record<string, Dependency>;
+};
+
+async function tripFirebasePostinstall(
+  rootDirectory: string,
+  env: NodeJS.ProcessEnv,
+): Promise<void> {
+  const npmLs = spawnSync("npm", ["ls", "@firebase/util", "--json", "--long"], {
+    cwd: rootDirectory,
+    shell: process.platform === "win32",
+  });
+  if (!npmLs.stdout) {
+    return;
+  }
+  const npmLsResults = JSON.parse(npmLs.stdout.toString().trim());
+  const dependenciesToSearch: Dependency[] = Object.values(npmLsResults.dependencies);
+  const firebaseUtilPaths: string[] = [];
+  for (const dependency of dependenciesToSearch) {
+    if (
+      dependency.name === "@firebase/util" &&
+      semverGte(dependency.version, "1.11.0") &&
+      firebaseUtilPaths.indexOf(dependency.path) === -1
+    ) {
+      firebaseUtilPaths.push(dependency.path);
+    }
+    if (dependency.dependencies) {
+      dependenciesToSearch.push(...Object.values(dependency.dependencies));
+    }
+  }
+
+  await Promise.all(
+    firebaseUtilPaths.map(
+      (path) =>
+        new Promise<void>((resolve) => {
+          spawnSync("npm", ["run", "postinstall"], {
+            cwd: path,
+            env,
+            stdio: "ignore",
+            shell: process.platform === "win32",
+          });
+          resolve();
+        }),
+    ),
+  );
+}
+
+async function getBackendAppConfig(
+  projectId?: string,
+  backendId?: string,
+): Promise<WebConfig | undefined> {
+  if (!projectId) {
+    return undefined;
+  }
+
+  if (Constants.isDemoProject(projectId)) {
+    return constructDefaultWebSetup(projectId);
+  }
+
+  if (!backendId) {
+    return undefined;
+  }
+
+  const backendsList = await apphosting.listBackends(projectId, "-").catch(() => undefined);
+  const backend = backendsList?.backends.find(
+    (b) => apphosting.parseBackendName(b.name).id === backendId,
+  );
+
+  if (!backend) {
+    logLabeledWarning(
+      "apphosting",
+      `Unable to lookup details for backend ${backendId}. Firebase SDK autoinit will not be available.`,
+    );
+    return undefined;
+  }
+
+  if (!backend.appId) {
+    return undefined;
+  }
+
+  return (await getAppConfig(backend.appId, AppPlatform.WEB)) as WebConfig;
+}

src/emulator/controller.ts

@@ -61,6 +61,8 @@ import { TasksEmulator } from "./tasksEmulator";
 import { AppHostingEmulator } from "./apphosting";
 import { sendVSCodeMessage, VSCODE_MESSAGE } from "../dataconnect/webhook";
 import { dataConnectLocalConnString } from "../api";
+import { AppHostingSingle } from "../firebaseConfig";
+import { resolveProjectPath } from "../projectPath";
 
 const START_LOGGING_EMULATOR = utils.envOverride(
   "START_LOGGING_EMULATOR",
@@ -968,11 +970,28 @@ export async function startAll(
    * app hosting emulator may depend on other emulators (i.e auth, firestore,
    * storage, etc).
    */
-  const apphostingConfig = options.config.src.emulators?.[Emulators.APPHOSTING];
+  const apphostingEmulatorConfig = options.config.src.emulators?.[Emulators.APPHOSTING];
 
   if (listenForEmulator.apphosting) {
+    const rootDirectory = apphostingEmulatorConfig?.rootDirectory;
+    const backendRoot = resolveProjectPath({}, rootDirectory ?? "./");
+
+    // It doesn't seem as though App Hosting emulator supports multiple backends, infer the correct one
+    // from the root directory.
+    let apphostingConfig: AppHostingSingle | undefined;
+    if (Array.isArray(options.config.src.apphosting)) {
+      const matchingAppHostingConfig = options.config.src.apphosting.filter(
+        (config) => resolveProjectPath({}, path.join(".", config.rootDir ?? "/")) === backendRoot,
+      );
+      if (matchingAppHostingConfig.length === 1) {
+        apphostingConfig = matchingAppHostingConfig[0];
+      }
+    } else {
+      apphostingConfig = options.config.src.apphosting;
+    }
+
     const apphostingAddr = legacyGetFirstAddr(Emulators.APPHOSTING);
-    if (apphostingConfig?.startCommandOverride) {
+    if (apphostingEmulatorConfig?.startCommandOverride) {
       const apphostingLogger = EmulatorLogger.forEmulator(Emulators.APPHOSTING);
       apphostingLogger.logLabeled(
         "WARN",
@@ -982,10 +1001,12 @@ export async function startAll(
     }
     const apphostingEmulator = new AppHostingEmulator({
       projectId: options.project,
+      backendId: apphostingConfig?.backendId,
       host: apphostingAddr.host,
       port: apphostingAddr.port,
-      startCommand: apphostingConfig?.startCommand || apphostingConfig?.startCommandOverride,
-      rootDirectory: apphostingConfig?.rootDirectory,
+      startCommand:
+        apphostingEmulatorConfig?.startCommand || apphostingEmulatorConfig?.startCommandOverride,
+      rootDirectory,
       options,
     });
 

src/init/spawn.ts

@@ -87,7 +87,7 @@ export function spawnWithOutput(cmd: string, args: string[]): Promise<string> {
 export function spawnWithCommandString(
   cmd: string,
   projectDir: string,
-  environmentVariables?: Record<string, string>,
+  environmentVariables?: NodeJS.ProcessEnv,
 ): Promise<void> {
   return new Promise<void>((resolve, reject) => {
     const installer = spawn(cmd, {