Refactor adapter build configuration logic into @apphosting/common module (#204)

* refactor build configuration logic into @apphosting/common pkg

* update deps to include shared module

* provide runBuild() fn

* update github action for publish common pkg

Author: blidd-google

.github/workflows/test.yml

@@ -153,5 +153,6 @@ jobs:
         env:
           ADAPTER_NEXTJS_NPM_TOKEN: ${{ secrets.ADAPTER_NEXTJS_NPM_TOKEN }}
           ADAPTER_ANGULAR_NPM_TOKEN: ${{ secrets.ADAPTER_ANGULAR_NPM_TOKEN }}
+          ADAPTER_COMMON_NPM_TOKEN: ${{ secrets.ADAPTER_COMMON_NPM_TOKEN }}
           # FIREBASE_FRAMEWORKS_NPM_TOKEN: ${{ secrets.FIREBASE_FRAMEWORKS_NPM_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.PERSONAL_NPM_TOKEN }}

package-lock.json

@@ -11,7 +11,9 @@
     "lint:fix": "eslint packages/* scripts/* --fix"
   },
   "workspaces": [
-    "packages/**/*"
+    "packages/@apphosting/*",
+    "packages/create-next-on-firebase/*",
+    "packages/firebase-frameworks/*"
   ],
   "devDependencies": {
     "@angular-devkit/build-angular": "^17.1.2",

package.json

@@ -22,7 +22,9 @@
     "sideEffects": false,
     "scripts": {
         "build": "rm -rf dist && tsc && chmod +x ./dist/bin/*",
-        "test": "ts-mocha -p tsconfig.json src/**/*.spec.ts"
+        "test": "ts-mocha -p tsconfig.json src/**/*.spec.ts",
+        "localregistry:start": "npx verdaccio --config ../publish-dev/verdaccio-config.yaml",
+        "localregistry:publish": "(npm view --registry=http://localhost:4873 @apphosting/adapter-angular && npm unpublish --@apphosting:registry=http://localhost:4873 --force); npm publish --@apphosting:registry=http://localhost:4873"
     },
     "exports": {
         ".": {
@@ -39,6 +41,7 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
+        "@apphosting/common": "^1.0.0",
         "firebase-functions": "^4.3.1",
         "fs-extra": "^11.1.1",
         "strip-ansi": "^7.1.0",
@@ -70,6 +73,7 @@
         "tmp": "*",
         "ts-mocha": "*",
         "ts-node": "*",
-        "typescript": "*"
+        "typescript": "*",
+        "verdaccio": "^5.30.3"
     }
 }

packages/@apphosting/adapter-angular/package.json

@@ -1,48 +1,25 @@
 #! /usr/bin/env node
 import {
-  build,
   generateOutputDirectory,
-  DEFAULT_COMMAND,
-  checkStandaloneBuildConditions,
-  checkMonorepoBuildConditions,
+  checkBuildConditions,
   validateOutputDirectory,
+  parseOutputBundleOptions,
 } from "../utils.js";
-import { join } from "path";
+import { getBuildOptions, runBuild } from "@apphosting/common";
 
 const root = process.cwd();
-
-// TODO(blidd-google): Refactor monorepo logic into separate module
-
-// Determine which project in a monorepo to build. The environment variable will only exist when
-// a monorepo has been detected in the parent buildpacks, so it can also be used to determine
-// whether the project we are building is in a monorepo setup.
-const project = process.env.MONOREPO_PROJECT || "";
-
-// Determine root of project to build.
-let projectRoot = root;
-// N.B. We don't want to change directories for monorepo builds, so that the build process can
-// locate necessary files outside the project directory (e.g. at the root).
-if (process.env.FIREBASE_APP_DIRECTORY && !project) {
-  projectRoot = join(root, process.env.FIREBASE_APP_DIRECTORY);
-}
-
-// Determine which command to run the build
-const cmd = process.env.MONOREPO_COMMAND || DEFAULT_COMMAND;
-
-// Parse args to pass to the build command
-let cmdArgs: string[] = [];
-if (process.env.MONOREPO_BUILD_ARGS) {
-  cmdArgs = process.env.MONOREPO_BUILD_ARGS.split(",");
-}
+const opts = getBuildOptions();
 
 // Check build conditions, which vary depending on your project structure (standalone or monorepo)
-if (project) {
-  checkMonorepoBuildConditions(cmd, project);
-} else {
-  await checkStandaloneBuildConditions(projectRoot);
-}
+await checkBuildConditions(opts);
 
-const outputBundleOptions = await build(projectRoot, cmd, ...cmdArgs);
+// enable JSON build logs for application builder
+process.env.NG_BUILD_LOGS_JSON = "1";
+const { stdout: output } = await runBuild();
+if (!output) {
+  throw new Error("No output from Angular build command, expecting a build manifest file.");
+}
+const outputBundleOptions = parseOutputBundleOptions(output);
 await generateOutputDirectory(root, outputBundleOptions);
 
 await validateOutputDirectory(outputBundleOptions);

packages/@apphosting/adapter-angular/src/bin/build.ts

@@ -2,17 +2,13 @@ import fsExtra from "fs-extra";
 import logger from "firebase-functions/logger";
 
 import { fileURLToPath } from "url";
-import { spawn, execSync } from "child_process";
+import { execSync } from "child_process";
 import { resolve, normalize, relative, dirname, join } from "path";
 import { stringify as yamlStringify } from "yaml";
-import {
-  OutputBundleOptions,
-  OutputPaths,
-  buildManifestSchema,
-  ValidManifest,
-} from "./interface.js";
+import { OutputBundleOptions, OutputPaths, buildManifestSchema } from "./interface.js";
 import { createRequire } from "node:module";
 import stripAnsi from "strip-ansi";
+import { BuildOptions } from "@apphosting/common";
 
 // fs-extra is CJS, readJson can't be imported using shorthand
 export const { writeFile, move, readJson, mkdir, copyFile } = fsExtra;
@@ -22,29 +18,42 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const SIMPLE_SERVER_FILE_PATH = join(__dirname, "simple-server", "bundled_server.mjs");
 
-export const DEFAULT_COMMAND = "npm";
 export const REQUIRED_BUILDER = "@angular-devkit/build-angular:application";
 
 /**
  * Check if the following build conditions are satisfied for the workspace:
  * - The workspace does not contain multiple angular projects.
  * - The angular project must be using the application builder.
  */
-export async function checkStandaloneBuildConditions(cwd: string): Promise<void> {
+export async function checkBuildConditions(opts: BuildOptions): Promise<void> {
+  // Nx uses a project.json file in lieu of an angular.json file, so if the app is in an Nx workspace,
+  // we check if Nx's project.json configures the build to use the Angular application builder.
+  if (opts.buildCommand === "nx") {
+    const output = execSync(`npx nx show project ${opts.projectName}`);
+    const projectJson = JSON.parse(output.toString());
+    const builder = projectJson.targets.build.executor;
+    if (builder !== REQUIRED_BUILDER) {
+      throw new Error(
+        "Only the Angular application builder is supported. Please refer to https://angular.dev/tools/cli/build-system-migration#for-existing-applications guide to upgrade your builder to the Angular application builder. ",
+      );
+    }
+    return;
+  }
+
   // dynamically load Angular so this can be used in an NPX context
-  const angularCorePath = require.resolve("@angular/core", { paths: [cwd] });
+  const angularCorePath = require.resolve("@angular/core", { paths: [process.cwd()] });
   const { NodeJsAsyncHost }: typeof import("@angular-devkit/core/node") = await import(
     require.resolve("@angular-devkit/core/node", {
-      paths: [cwd, angularCorePath],
+      paths: [process.cwd(), angularCorePath],
     })
   );
   const { workspaces }: typeof import("@angular-devkit/core") = await import(
     require.resolve("@angular-devkit/core", {
-      paths: [cwd, angularCorePath],
+      paths: [process.cwd(), angularCorePath],
     })
   );
   const host = workspaces.createWorkspaceHost(new NodeJsAsyncHost());
-  const { workspace } = await workspaces.readWorkspace(cwd, host);
+  const { workspace } = await workspaces.readWorkspace(opts.projectDirectory, host);
 
   const apps: string[] = [];
   workspace.projects.forEach((value, key) => {
@@ -67,23 +76,6 @@ export async function checkStandaloneBuildConditions(cwd: string): Promise<void>
   }
 }
 
-/**
- * Check if the monorepo build system is using the Angular application builder.
- */
-export function checkMonorepoBuildConditions(cmd: string, target: string) {
-  let builder;
-  if (cmd === "nx") {
-    const output = execSync(`npx nx show project ${target}`);
-    const projectJson = JSON.parse(output.toString());
-    builder = projectJson.targets.build.executor;
-  }
-  if (builder !== REQUIRED_BUILDER) {
-    throw new Error(
-      "Only the Angular application builder is supported. Please refer to https://angular.dev/tools/cli/build-system-migration#for-existing-applications guide to upgrade your builder to the Angular application builder. ",
-    );
-  }
-}
-
 // Populate file or directory paths we need for generating output directory
 export function populateOutputBundleOptions(outputPaths: OutputPaths): OutputBundleOptions {
   const outputBundleDir = resolve(".apphosting");
@@ -108,57 +100,24 @@ export function populateOutputBundleOptions(outputPaths: OutputPaths): OutputBun
   };
 }
 
-// Run build command
-export const build = (
-  projectRoot = process.cwd(),
-  cmd = DEFAULT_COMMAND,
-  ...argv: string[]
-): Promise<OutputBundleOptions> =>
-  new Promise((resolve, reject) => {
-    // enable JSON build logs for application builder
-    process.env.NG_BUILD_LOGS_JSON = "1";
-    const childProcess = spawn(cmd, ["run", "build", ...argv], {
-      cwd: projectRoot,
-      shell: true,
-      stdio: ["inherit", "pipe", "pipe"],
-    });
-    let buildOutput = "";
-    let manifest = {} as ValidManifest;
-
-    childProcess.stdout.on("data", (data: Buffer) => {
-      buildOutput += data.toString();
+export function parseOutputBundleOptions(buildOutput: string): OutputBundleOptions {
+  const strippedManifest = extractManifestOutput(buildOutput);
+  const parsedManifest = JSON.parse(strippedManifest) as string;
+  const manifest = buildManifestSchema.parse(parsedManifest);
+  if (manifest["errors"].length > 0) {
+    // errors when extracting manifest
+    manifest.errors.forEach((error) => {
+      logger.error(error);
     });
-
-    childProcess.on("exit", (code) => {
-      if (code !== 0) {
-        reject(new Error(`Process exited with error code ${code}. Output: ${buildOutput}`));
-      }
-      if (!buildOutput) {
-        reject(new Error("Unable to locate build manifest with output paths."));
-      }
-      try {
-        const strippedManifest = extractManifestOutput(buildOutput);
-        const parsedManifest = JSON.parse(strippedManifest) as string;
-        // validate if the manifest is of the expected form
-        manifest = buildManifestSchema.parse(parsedManifest);
-        if (manifest["errors"].length > 0) {
-          // errors when extracting manifest
-          manifest.errors.forEach((error) => {
-            logger.error(error);
-          });
-        }
-        if (manifest["warnings"].length > 0) {
-          // warnings when extracting manifest
-          manifest.warnings.forEach((warning) => {
-            logger.info(warning);
-          });
-        }
-        resolve(populateOutputBundleOptions(manifest["outputPaths"]));
-      } catch (error) {
-        reject(new Error("Build manifest is not of expected structure: " + error));
-      }
+  }
+  if (manifest["warnings"].length > 0) {
+    // warnings when extracting manifest
+    manifest.warnings.forEach((warning) => {
+      logger.info(warning);
     });
-  });
+  }
+  return populateOutputBundleOptions(manifest["outputPaths"]);
+}
 
 /**
  * Extracts the build manifest from the build command's console output.

packages/@apphosting/adapter-angular/src/utils.ts

@@ -22,7 +22,9 @@
   "sideEffects": false,
   "scripts": {
     "build": "rm -rf dist && tsc && chmod +x ./dist/bin/*",
-    "test": "ts-mocha -p tsconfig.json src/**/*.spec.ts"
+    "test": "ts-mocha -p tsconfig.json src/**/*.spec.ts",
+    "localregistry:start": "npx verdaccio --config ../publish-dev/verdaccio-config.yaml",
+    "localregistry:publish": "(npm view --registry=http://localhost:4873 @apphosting/adapter-nextjs && npm unpublish --@apphosting:registry=http://localhost:4873 --force); npm publish --@apphosting:registry=http://localhost:4873"
   },
   "exports": {
     ".": {
@@ -39,6 +41,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
+    "@apphosting/common": "^1.0.0",
     "fs-extra": "^11.1.1",
     "yaml": "^2.3.4"
   },
@@ -56,6 +59,7 @@
     "next": "~14.0.0",
     "semver": "*",
     "tmp": "*",
-    "ts-node": "*"
+    "ts-node": "*",
+    "verdaccio": "^5.30.3"
   }
 }

packages/@apphosting/adapter-nextjs/package.json

@@ -1,38 +1,25 @@
 #! /usr/bin/env node
 import {
   loadConfig,
-  build,
   populateOutputBundleOptions,
   generateOutputDirectory,
-  DEFAULT_COMMAND,
   validateOutputDirectory,
 } from "../utils.js";
 import { join } from "path";
+import { getBuildOptions, runBuild } from "@apphosting/common";
 
 const root = process.cwd();
+const opts = getBuildOptions();
 
-let projectRoot = root;
-if (process.env.FIREBASE_APP_DIRECTORY) {
-  projectRoot = join(root, process.env.FIREBASE_APP_DIRECTORY);
-}
+// Set standalone mode
+process.env.NEXT_PRIVATE_STANDALONE = "true";
+// Opt-out sending telemetry to Vercel
+process.env.NEXT_TELEMETRY_DISABLED = "1";
+await runBuild();
 
-// Parse args to pass to the build command
-let cmdArgs: string[] = [];
-if (process.env.MONOREPO_BUILD_ARGS) {
-  cmdArgs = process.env.MONOREPO_BUILD_ARGS.split(",");
-}
+const outputBundleOptions = populateOutputBundleOptions(root, opts.projectDirectory);
+const { distDir } = await loadConfig(root, opts.projectDirectory);
+const nextBuildDirectory = join(opts.projectDirectory, distDir);
 
-// Determine which command to run the build
-const cmd = process.env.MONOREPO_COMMAND || DEFAULT_COMMAND;
-
-// Run build command from the subdirectory if specified.
-// N.B. We run the build command from the root for monorepo builds, so that the build process can
-// locate necessary files outside the project directory.
-build(process.env.MONOREPO_CMD ? root : projectRoot, cmd, ...cmdArgs);
-
-const outputBundleOptions = populateOutputBundleOptions(root, projectRoot);
-const { distDir } = await loadConfig(root, projectRoot);
-const nextBuildDirectory = join(projectRoot, distDir);
-
-await generateOutputDirectory(root, projectRoot, outputBundleOptions, nextBuildDirectory);
+await generateOutputDirectory(root, opts.projectDirectory, outputBundleOptions, nextBuildDirectory);
 await validateOutputDirectory(outputBundleOptions);

packages/@apphosting/adapter-nextjs/src/bin/build.ts

@@ -1,4 +1,3 @@
-import { spawnSync } from "child_process";
 import fsExtra from "fs-extra";
 import { createRequire } from "node:module";
 import { join, relative, normalize } from "path";
@@ -70,15 +69,6 @@ export function populateOutputBundleOptions(rootDir: string, appDir: string): Ou
   };
 }
 
-// Run build command
-export function build(cwd: string, cmd = DEFAULT_COMMAND, ...argv: string[]): void {
-  // Set standalone mode
-  process.env.NEXT_PRIVATE_STANDALONE = "true";
-  // Opt-out sending telemetry to Vercel
-  process.env.NEXT_TELEMETRY_DISABLED = "1";
-  spawnSync(cmd, ["run", "build", ...argv], { cwd, shell: true, stdio: "inherit" });
-}
-
 /**
  * Moves the standalone directory, the static directory and copies over all of the apps resources
  * to the apphosting output directory.