Handle NextJS 13.3 app directory (#5691)

* Handle Next 13 app directory—fixes #5661, #5522 
* Actually pull static assets from app directory now that it's stabilizing, fixes #5660
* Hack for detecting image optimization in app directory
* Add frameworks CTA
* Add integration test for frameworks back in
* Add timeouts to NPM and bundle commands—fixes #5661, #5622

---------

Co-authored-by: Leonardo Ortiz <[email protected]>

Author: jamesdaniels

.github/workflows/node-test.yml

@@ -94,6 +94,7 @@ jobs:
           - npm run test:storage-emulator-integration
           - npm run test:triggers-end-to-end
           - npm run test:triggers-end-to-end:inspect
+          - npm run test:webframeworks-deploy
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

scripts/webframeworks-deploy-tests/hosting/app/api/static/route.ts

@@ -0,0 +1,9 @@
+export async function GET() {
+  return new Response(JSON.stringify([1, 2, 3]), {
+    status: 200,
+    headers: {
+      "content-type": "application/json",
+      "custom-header": "custom-value",
+    },
+  });
+}

scripts/webframeworks-deploy-tests/run.sh

@@ -4,6 +4,8 @@ set -e # Immediately exit on failure
 # Globally link the CLI for the testing framework
 ./scripts/clean-install.sh
 
+source scripts/set-default-credentials.sh
+
 (cd scripts/webframeworks-deploy-tests/hosting; npm i; npm run build)
 
 mocha scripts/webframeworks-deploy-tests/tests.ts

scripts/webframeworks-deploy-tests/tests.ts

@@ -1,9 +1,12 @@
 import { expect } from "chai";
+import * as glob from "glob";
 
 import * as cli from "./cli";
 import { requireAuth } from "../../src/requireAuth";
+import { getBuildId } from "../../src/frameworks/next/utils";
+import { relative } from "path";
 
-const FIREBASE_PROJECT = process.env.GCLOUD_PROJECT || "";
+const FIREBASE_PROJECT = process.env.FBTOOLS_TARGET_PROJECT || "";
 const FIREBASE_DEBUG = process.env.FIREBASE_DEBUG || "";
 
 function genRandomId(n = 10): string {
@@ -15,37 +18,109 @@ function genRandomId(n = 10): string {
   return id;
 }
 
-describe("webframeworks deploy", function (this) {
+async function getFilesListFromDir(dir: string): Promise<string[]> {
+  const files = await new Promise<string[]>((resolve, reject) => {
+    glob(`${dir}/**/*`, (err, matches) => {
+      if (err) reject(err);
+      resolve(matches);
+    });
+  });
+  return files.map((path) => relative(dir, path));
+}
+
+describe("webframeworks deploy build", function (this) {
   this.timeout(1000_000);
 
+  let result: cli.Result;
+
   const RUN_ID = genRandomId();
   console.log(`TEST RUN: ${RUN_ID}`);
 
-  async function setOptsAndDeploy(): Promise<cli.Result> {
-    const args = [];
+  async function setOptsAndBuild(): Promise<cli.Result> {
+    const args = ["exit 0"];
     if (FIREBASE_DEBUG) {
       args.push("--debug");
     }
-    return await cli.exec("deploy", FIREBASE_PROJECT, args, __dirname, false);
+
+    return await cli.exec("emulators:exec", FIREBASE_PROJECT, args, __dirname, false);
   }
 
   before(async () => {
     expect(FIREBASE_PROJECT).to.not.be.empty;
 
     await requireAuth({});
+    process.env.FIREBASE_CLI_EXPERIMENTS = "webframeworks";
+    result = await setOptsAndBuild();
   });
 
   after(() => {
     // This is not an empty block.
   });
 
-  it("deploys functions with runtime options", async () => {
+  it("should log reasons for backend", () => {
     process.env.FIREBASE_CLI_EXPERIMENTS = "webframeworks";
 
-    const result = await setOptsAndDeploy();
+    expect(result.stdout, "build result").to.match(
+      /Building a Cloud Function to run this application. This is needed due to:/
+    );
+    expect(result.stdout, "build result").to.match(/middleware/);
+    expect(result.stdout, "build result").to.match(/Image Optimization/);
+    expect(result.stdout, "build result").to.match(/use of revalidate \/bar/);
+    expect(result.stdout, "build result").to.match(/non-static route \/api\/hello/);
+  });
+
+  it("should have the expected static files to be deployed", async () => {
+    const buildId = await getBuildId(`${__dirname}/hosting/.next`);
+
+    const DOT_FIREBASE_FOLDER_PATH = `${__dirname}/.firebase/${FIREBASE_PROJECT}`;
+
+    const EXPECTED_FILES = [
+      `_next`,
+      `_next/static`,
+      `_next/static/chunks`,
+      `_next/static/chunks/app`,
+      `_next/static/chunks/app/bar`,
+      `_next/static/chunks/app/foo`,
+      `_next/static/chunks/pages`,
+      `_next/static/chunks/pages/about`,
+      `_next/static/css`,
+      `_next/static/${buildId}`,
+      `_next/static/${buildId}/_buildManifest.js`,
+      `_next/static/${buildId}/_ssgManifest.js`,
+      `404.html`,
+      `500.html`,
+      `foo.html`,
+      `index.html`,
+    ];
+
+    const EXPECTED_PATTERNS = [
+      `_next\/static\/chunks\/[0-9]+-[^\.]+\.js`,
+      `_next\/static\/chunks\/app-internals-[^\.]+\.js`,
+      `_next\/static\/chunks\/app\/bar\/page-[^\.]+\.js`,
+      `_next\/static\/chunks\/app\/foo\/page-[^\.]+\.js`,
+      `_next\/static\/chunks\/app\/layout-[^\.]+\.js`,
+      `_next\/static\/chunks\/main-[^\.]+\.js`,
+      `_next\/static\/chunks\/main-app-[^\.]+\.js`,
+      `_next\/static\/chunks\/pages\/_app-[^\.]+\.js`,
+      `_next\/static\/chunks\/pages\/_error-[^\.]+\.js`,
+      `_next\/static\/chunks\/pages\/about\/me-[^\.]+\.js`,
+      `_next\/static\/chunks\/pages\/index-[^\.]+\.js`,
+      `_next\/static\/chunks\/polyfills-[^\.]+\.js`,
+      `_next\/static\/chunks\/webpack-[^\.]+\.js`,
+      `_next\/static\/css\/[^\.]+\.css`,
+    ].map((it) => new RegExp(it));
+
+    const files = await getFilesListFromDir(`${DOT_FIREBASE_FOLDER_PATH}/hosting`);
+    const unmatchedFiles = files.filter(
+      (it) =>
+        !(EXPECTED_FILES.includes(it) || EXPECTED_PATTERNS.some((pattern) => !!it.match(pattern)))
+    );
+    const unmatchedExpectations = [
+      ...EXPECTED_FILES.filter((it) => !files.includes(it)),
+      ...EXPECTED_PATTERNS.filter((it) => !files.some((file) => !!file.match(it))),
+    ];
 
-    expect(result.stdout, "deploy result").to.match(/file upload complete/);
-    expect(result.stdout, "deploy result").to.match(/found 20 files/);
-    expect(result.stdout, "deploy result").to.match(/Deploy complete!/);
+    expect(unmatchedFiles).to.be.empty;
+    expect(unmatchedExpectations).to.be.empty;
   });
 });

src/frameworks/angular/index.ts

@@ -5,21 +5,20 @@ import { spawn } from "cross-spawn";
 import { copy, pathExists } from "fs-extra";
 import { mkdir } from "fs/promises";
 
+import { BuildResult, Discovery, FrameworkType, SupportLevel } from "../interfaces";
+import { promptOnce } from "../../prompt";
 import {
-  BuildResult,
-  Discovery,
-  findDependency,
-  FrameworkType,
+  simpleProxy,
+  warnIfCustomBuildScript,
   getNodeModuleBin,
   relativeRequire,
-  SupportLevel,
-} from "..";
-import { promptOnce } from "../../prompt";
-import { simpleProxy, warnIfCustomBuildScript } from "../utils";
+  findDependency,
+} from "../utils";
 
 export const name = "Angular";
-export const support = SupportLevel.Experimental;
+export const support = SupportLevel.Preview;
 export const type = FrameworkType.Framework;
+export const docsUrl = "https://firebase.google.com/docs/hosting/frameworks/angular";
 
 const DEFAULT_BUILD_SCRIPT = ["ng build"];
 

src/frameworks/astro/index.ts

@@ -1,16 +1,15 @@
 import { sync as spawnSync, spawn } from "cross-spawn";
 import { copy, existsSync } from "fs-extra";
 import { join } from "path";
+import { BuildResult, Discovery, FrameworkType, SupportLevel } from "../interfaces";
+import { FirebaseError } from "../../error";
 import {
-  BuildResult,
-  Discovery,
-  FrameworkType,
-  SupportLevel,
+  readJSON,
+  simpleProxy,
+  warnIfCustomBuildScript,
   findDependency,
   getNodeModuleBin,
-} from "..";
-import { FirebaseError } from "../../error";
-import { readJSON, simpleProxy, warnIfCustomBuildScript } from "../utils";
+} from "../utils";
 import { getBootstrapScript, getConfig } from "./utils";
 
 export const name = "Astro";

src/frameworks/constants.ts

@@ -0,0 +1,65 @@
+import { readdirSync, statSync } from "fs";
+import { join } from "path";
+import { Framework, SupportLevel } from "./interfaces";
+import * as clc from "colorette";
+
+export const NPM_COMMAND_TIMEOUT_MILLIES = 10_000;
+
+export const SupportLevelWarnings = {
+  [SupportLevel.Experimental]: (framework: string) => `Thank you for trying our ${clc.italic(
+    "experimental"
+  )} support for ${framework} on Firebase Hosting.
+   ${clc.yellow(`While this integration is maintained by Googlers it is not a supported Firebase product.
+   Issues filed on GitHub will be addressed on a best-effort basis by maintainers and other community members.`)}`,
+  [SupportLevel.Preview]: (framework: string) => `Thank you for trying our ${clc.italic(
+    "early preview"
+  )} of ${framework} support on Firebase Hosting.
+   ${clc.yellow(
+     "During the preview, support is best-effort and breaking changes can be expected. Proceed with caution."
+   )}`,
+};
+
+export const DEFAULT_DOCS_URL =
+  "https://firebase.google.com/docs/hosting/frameworks/frameworks-overview";
+export const FILE_BUG_URL =
+  "https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md";
+export const FEATURE_REQUEST_URL =
+  "https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md";
+export const MAILING_LIST_URL = "https://goo.gle/41enW5X";
+
+export const FIREBASE_FRAMEWORKS_VERSION = "^0.9.0";
+export const FIREBASE_FUNCTIONS_VERSION = "^4.3.0";
+export const FIREBASE_ADMIN_VERSION = "^11.0.1";
+export const NODE_VERSION = parseInt(process.versions.node, 10);
+export const VALID_ENGINES = { node: [16, 18] };
+
+export const DEFAULT_REGION = "us-central1";
+export const ALLOWED_SSR_REGIONS = [
+  { name: "us-central1 (Iowa)", value: "us-central1" },
+  { name: "us-west1 (Oregon)", value: "us-west1" },
+  { name: "us-east1 (South Carolina)", value: "us-east1" },
+  { name: "europe-west1 (Belgium)", value: "europe-west1" },
+  { name: "asia-east1 (Taiwan)", value: "asia-east1" },
+];
+
+export const WebFrameworks: Record<string, Framework> = Object.fromEntries(
+  readdirSync(__dirname)
+    .filter((path) => statSync(join(__dirname, path)).isDirectory())
+    .map((path) => {
+      // If not called by the CLI, (e.g., by the VS Code Extension)
+      // __dirname won't refer to this folder and these files won't be available.
+      // Instead it may find sibling folders that aren't modules, and this
+      // require will throw.
+      // Long term fix may be to bundle this instead of reading files at runtime
+      // but for now, this prevents crashing.
+      try {
+        return [path, require(join(__dirname, path))];
+      } catch (e) {
+        return [];
+      }
+    })
+    .filter(
+      ([, obj]) =>
+        obj && obj.name && obj.discover && obj.build && obj.type !== undefined && obj.support
+    )
+);

src/frameworks/express/index.ts

@@ -2,15 +2,16 @@ import { execSync } from "child_process";
 import { copy, pathExists } from "fs-extra";
 import { mkdir, readFile } from "fs/promises";
 import { join } from "path";
-import { BuildResult, FrameworkType, SupportLevel } from "..";
+import { BuildResult, FrameworkType, SupportLevel } from "../interfaces";
 
 // Use "true &&"" to keep typescript from compiling this file and rewriting
 // the import statement into a require
 const { dynamicImport } = require(true && "../../dynamicImport");
 
 export const name = "Express.js";
-export const support = SupportLevel.Experimental;
+export const support = SupportLevel.Preview;
 export const type = FrameworkType.Custom;
+export const docsUrl = "https://firebase.google.com/docs/hosting/frameworks/express";
 
 async function getConfig(root: string) {
   const packageJsonBuffer = await readFile(join(root, "package.json"));

src/frameworks/flutter/index.ts

@@ -4,7 +4,7 @@ import { join } from "path";
 import { load as loadYaml } from "js-yaml";
 import { readFile } from "fs/promises";
 
-import { BuildResult, Discovery, FrameworkType, SupportLevel } from "..";
+import { BuildResult, Discovery, FrameworkType, SupportLevel } from "../interfaces";
 import { FirebaseError } from "../../error";
 import { assertFlutterCliExists } from "./utils";