Quick .apphosting_build PoC

Author: jamesdaniels

.gitignore

@@ -9,6 +9,8 @@ node_modules
 .vscode
 *.log
 .DS_Store
+/apphosting-*.tgz
+/firebase-frameworks-*.tgz
 
 # firebase
 .firebase

package-lock.json

@@ -19,6 +19,7 @@
     "eslint-plugin-jsdoc": "^46.8.2",
     "eslint-plugin-prettier": "^5.0.1",
     "lerna": "^7.4.0",
-    "prettier": "^3.0.3"
+    "prettier": "^3.0.3",
+    "typescript": "^5.2.0"
   }
 }

package.json

@@ -35,6 +35,8 @@
     ],
     "license": "Apache-2.0",
     "dependencies": {
+        "fs-extra": "^11.1.1",
+        "yaml": "^2.3.4"
     },
     "peerDependencies": {
         "next": "~14.0.0"
@@ -45,6 +47,7 @@
         }
     },
     "devDependencies": {
+        "@types/fs-extra": "^11.0.4",
         "@types/tmp": "^0.2.6",
         "next": "~14.0.0",
         "semver": "^7.5.4",

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

@@ -1,6 +1,60 @@
 #! /usr/bin/env node
 import { spawnSync } from "child_process";
+import { join } from "path";
+import fsExtra from "fs-extra";
+import { stringify as yamlStringify } from "yaml";
+
+const { copy, mkdirp, exists, readJson, writeFile } = fsExtra;
+
+import type { RoutesManifest } from "../interfaces.js";
 
 const cwd = process.cwd();
 
-spawnSync("next", ["build"], { cwd, stdio: "inherit" });
+// TODO don't await these here, clean up these imports
+// for the constants we should probably keep them the same way we do in firebase-tools
+const { default: nextServerConfig }: { default: typeof import("next/dist/server/config.js") } = await import(`${cwd}/node_modules/next/dist/server/config.js`);
+const { PHASE_PRODUCTION_BUILD, ROUTES_MANIFEST }: typeof import("next/constants.js") = await import(`${cwd}/node_modules/next/constants.js`);
+
+const loadConfig = nextServerConfig.default;
+
+// Since this tool can be executed with NPX maybe we should just call `npm run build`?
+spawnSync("next", ["build"], { cwd, stdio: "inherit", env: { ...process.env, NEXT_PRIVATE_STANDALONE: 'true' } });
+
+const { distDir, basePath } = await loadConfig(PHASE_PRODUCTION_BUILD, cwd);
+
+const destination = join(cwd, '.apphosting_build');
+
+const staticDestination = join(destination, "static", basePath);
+const nextStaticDestination = join(staticDestination, "_next", "static");
+const publicDestination = join(destination, "public");
+
+const standaloneDir = join(cwd, distDir, "standalone");
+const publicDir = join(cwd, "public");
+const nextStaticDir = join(cwd, distDir, "static");
+
+await mkdirp(nextStaticDestination);
+
+const copyPublicDir = async () => {
+    const publicDirExists = await exists(publicDir);
+    if (!publicDirExists) return;
+    await Promise.all([
+        copy(publicDir, publicDestination),
+        copy(publicDir, staticDestination)
+    ]);
+};
+
+const writeBundleYaml = async () => {
+    const manifest: RoutesManifest = await readJson(join(cwd, distDir, ROUTES_MANIFEST));
+    const headers = manifest.headers.map(it => ({ ...it, regex: undefined }));
+    const redirects = manifest.redirects.filter(it => !it.internal).map(it => ({ ...it, regex: undefined }));
+    const beforeFileRewrites = Array.isArray(manifest.rewrites) ? manifest.rewrites : manifest.rewrites?.beforeFiles || [];
+    const rewrites = beforeFileRewrites.map(it => ({ ...it, regex: undefined }));
+    await writeFile(join(destination, "bundle.yaml"), yamlStringify({ headers, redirects, rewrites }));
+}
+
+await Promise.all([
+    copy(standaloneDir, destination),
+    copy(nextStaticDir, nextStaticDestination),
+    copyPublicDir(),
+    writeBundleYaml(),
+]);

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

@@ -0,0 +1,73 @@
+import type { RouteHas } from "next/dist/lib/load-custom-routes.js";
+
+export interface RoutesManifestRewriteObject {
+  beforeFiles?: RoutesManifestRewrite[];
+  afterFiles?: RoutesManifestRewrite[];
+  fallback?: RoutesManifestRewrite[];
+}
+
+export interface RoutesManifestRedirect {
+  source: string;
+  destination: string;
+  locale?: false;
+  internal?: boolean;
+  statusCode: number;
+  regex: string;
+  has?: RouteHas[];
+  missing?: RouteHas[];
+}
+
+export interface RoutesManifestRewrite {
+  source: string;
+  destination: string;
+  has?: RouteHas[];
+  missing?: RouteHas[];
+  regex: string;
+}
+
+export interface RoutesManifestHeader {
+  source: string;
+  headers: { key: string; value: string }[];
+  has?: RouteHas[];
+  missing?: RouteHas[];
+  regex: string;
+}
+
+// Next.js's exposed interface is incomplete here
+export interface RoutesManifest {
+  version: number;
+  pages404: boolean;
+  basePath: string;
+  redirects: Array<RoutesManifestRedirect>;
+  rewrites?: Array<RoutesManifestRewrite> | RoutesManifestRewriteObject;
+  headers: Array<RoutesManifestHeader>;
+  staticRoutes: Array<{
+    page: string;
+    regex: string;
+    namedRegex?: string;
+    routeKeys?: { [key: string]: string };
+  }>;
+  dynamicRoutes: Array<{
+    page: string;
+    regex: string;
+    namedRegex?: string;
+    routeKeys?: { [key: string]: string };
+  }>;
+  dataRoutes: Array<{
+    page: string;
+    routeKeys?: { [key: string]: string };
+    dataRouteRegex: string;
+    namedDataRouteRegex?: string;
+  }>;
+  i18n?: {
+    domains?: Array<{
+      http?: true;
+      domain: string;
+      locales?: string[];
+      defaultLocale: string;
+    }>;
+    locales: string[];
+    defaultLocale: string;
+    localeDetection?: false;
+  };
+}

packages/@apphosting/adapter-nextjs/src/interfaces.ts

@@ -31,11 +31,14 @@ program
         `^${version.major}.${version.minor + 1}.0`,   // newer production match
     ].join(" || ");
     const adapterName = `@apphosting/adapter-${framework}`;
+    // TODO add types here
     let npmInfo = JSON.parse(spawnSync("npm", ["info", `${adapterName}@"${versionStackRank}"`, "--json"]).stdout.toString());
     if (npmInfo.error) npmInfo = JSON.parse(spawnSync("npm", ["info", adapterName, "--json"]).stdout.toString());
     if (npmInfo.error) {
         throw new Error(npmInfo.error.detail)
     }
+    npmInfo = [].concat(npmInfo);
+    npmInfo = npmInfo.filter((it:any) => !it.version.includes('-canary.')).sort((a:any,b:any) => new Date(b.time[b.version]).getTime() - new Date(a.time[a.version]).getTime())[0];
     const adapterVersion = semverParse(npmInfo.version);
     if (!adapterVersion) throw new Error(`Unable to parse ${adapterVersion}`);
     // TODO actually write a reasonable error message here & use a generator function

packages/@apphosting/build/src/bin/build.ts

@@ -73,9 +73,8 @@
     "firebase": "^10.0.0",
     "firebase-admin": "^11.0.1",
     "firebase-functions": "^4.3.1",
-    "next": "^14.0.1",
+    "next": "~14.0.0",
     "sharp": "^0.32.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.7.4"
+    "ts-node": "^10.9.1"
   }
 }

packages/firebase-frameworks/package.json

@@ -1,9 +1,12 @@
 import { parse } from "url";
-import { default as next } from "next";
+import next from "next";
+import LRU from "lru-cache";
+
 import type { Request } from "firebase-functions/v2/https";
 import type { Response } from "express";
-import LRU from "lru-cache";
-import { NextServer } from "next/dist/server/next.js";
+import type { NextServer } from "next/dist/server/next.js";
+
+const createServer = next.default;
 
 const nextAppsLRU = new LRU<string, NextServer>({
   // TODO tune this
@@ -24,8 +27,7 @@ export const handle = async (req: Request, res: Response) => {
   // dynamic for middleware.
   let nextApp = nextAppsLRU.get(key);
   if (!nextApp) {
-    // @ts-expect-error
-    nextApp = next({
+    nextApp = createServer({
       dev: false,
       dir: process.cwd(),
       hostname: "0.0.0.0",

packages/firebase-frameworks/src/next.js/index.ts

@@ -1,13 +1,15 @@
 {
   "compilerOptions": {
     "noEmit": true,
-    "target": "es2020",
+    "target": "ES2020",
     "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "types": ["node"],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "declaration": true,
+    "skipLibCheck": true,
     "paths": {
       "firebase-frameworks": ["./packages/firebase-frameworks"],
       "@apphosting/adapter-nextjs": ["./packages/adapter-nextjs"]