Vite and NPM workspace fixes (#5640)

* Better error message if a framework isn't detected
* Handle NPM workspaces for both Vite and Angular
* Error if the node_module binary isn't found
* Force vite build to production mode

------
Co-authored-by: Tatsuya Yamamoto <TatsuyaYamamoto@users.noreply.github.com>

Author: jamesdaniels

.eslintrc.js

@@ -125,5 +125,7 @@ module.exports = {
     "scripts/webframeworks-deploy-tests/hosting/**",
     "scripts/frameworks-tests/vite-project/**",
     "/src/frameworks/docs/**",
+    // This file is taking a very long time to lint, 2-4m
+    "src/emulator/auth/schema.ts",
   ],
 };

CHANGELOG.md

@@ -1,4 +1,6 @@
 - Fix bug where functions shell failed to invoke event triggered functions in debug mode. (#5609)
 - Fixed bug with the web frameworks proxy that could see unexpected 404 errors while emulating. (#5525)
 - Added experimental support for SvelteKit codebases. (#5525)
+- Allow usage of Angular and Vite within an NPM workspace. (#5640)
+- Force Vite to build the production bundle when deploying to Hosting. (#5640)
 - Fix bug where eagerly initializing UA failed function deployment that imported firebase-tools as a library. (#5666)

src/frameworks/angular/index.ts

@@ -10,6 +10,7 @@ import {
   Discovery,
   findDependency,
   FrameworkType,
+  getNodeModuleBin,
   relativeRequire,
   SupportLevel,
 } from "..";
@@ -20,7 +21,6 @@ export const name = "Angular";
 export const support = SupportLevel.Experimental;
 export const type = FrameworkType.Framework;
 
-const CLI_COMMAND = join("node_modules", ".bin", process.platform === "win32" ? "ng.cmd" : "ng");
 const DEFAULT_BUILD_SCRIPT = ["ng build"];
 
 export async function discover(dir: string): Promise<Discovery | undefined> {
@@ -70,7 +70,8 @@ export async function build(dir: string): Promise<BuildResult> {
   if (prerenderTarget) {
     // TODO there is a bug here. Spawn for now.
     // await scheduleTarget(prerenderTarget);
-    execSync(`${CLI_COMMAND} run ${targetStringFromTarget(prerenderTarget)}`, {
+    const cli = getNodeModuleBin("ng", dir);
+    execSync(`${cli} run ${targetStringFromTarget(prerenderTarget)}`, {
       cwd: dir,
       stdio: "inherit",
     });
@@ -91,11 +92,10 @@ export async function getDevModeHandle(dir: string) {
   const host = new Promise<string>((resolve) => {
     // Can't use scheduleTarget since that—like prerender—is failing on an ESM bug
     // will just grep for the hostname
-    const serve = spawn(
-      CLI_COMMAND,
-      ["run", targetStringFromTarget(serveTarget), "--host", "localhost"],
-      { cwd: dir }
-    );
+    const cli = getNodeModuleBin("ng", dir);
+    const serve = spawn(cli, ["run", targetStringFromTarget(serveTarget), "--host", "localhost"], {
+      cwd: dir,
+    });
     serve.stdout.on("data", (data: any) => {
       process.stdout.write(data);
       const match = data.toString().match(/(http:\/\/localhost:\d+)/);

src/frameworks/index.ts

@@ -28,6 +28,7 @@ import { HostingRewrites } from "../firebaseConfig";
 import * as experiments from "../experiments";
 import { ensureTargeted } from "../functions/ensureTargeted";
 import { implicitInit } from "../hosting/implicitInit";
+import { fileExistsSync } from "../fsutils";
 
 // Use "true &&"" to keep typescript from compiling this file and rewriting
 // the import statement into a require
@@ -124,8 +125,6 @@ const DEFAULT_FIND_DEP_OPTIONS: FindDepOptions = {
   omitDev: true,
 };
 
-const NPM_COMMAND = process.platform === "win32" ? "npm.cmd" : "npm";
-
 export const WebFrameworks: Record<string, Framework> = Object.fromEntries(
   readdirSync(__dirname)
     .filter((path) => statSync(join(__dirname, path)).isDirectory())
@@ -233,15 +232,30 @@ function scanDependencyTree(searchingFor: string, dependencies = {}): any {
   return;
 }
 
+export function getNodeModuleBin(name: string, cwd: string) {
+  const cantFindExecutable = new FirebaseError(`Could not find the ${name} executable.`);
+  const npmBin = spawnSync("npm", ["bin"], { cwd }).stdout?.toString().trim();
+  if (!npmBin) {
+    throw cantFindExecutable;
+  }
+  const path = join(npmBin, name);
+  if (!fileExistsSync(path)) {
+    throw cantFindExecutable;
+  }
+  return path;
+}
+
 /**
  *
  */
 export function findDependency(name: string, options: Partial<FindDepOptions> = {}) {
-  const { cwd, depth, omitDev } = { ...DEFAULT_FIND_DEP_OPTIONS, ...options };
+  const { cwd: dir, depth, omitDev } = { ...DEFAULT_FIND_DEP_OPTIONS, ...options };
+  const cwd = spawnSync("npm", ["root"], { cwd: dir }).stdout?.toString().trim();
+  if (!cwd) return;
   const env: any = Object.assign({}, process.env);
   delete env.NODE_ENV;
   const result = spawnSync(
-    NPM_COMMAND,
+    "npm",
     [
       "list",
       name,
@@ -395,7 +409,10 @@ export async function prepareFrameworks(
       process.env.__FIREBASE_DEFAULTS__ = JSON.stringify(firebaseDefaults);
     }
     const results = await discover(getProjectPath());
-    if (!results) throw new Error("Epic fail.");
+    if (!results)
+      throw new FirebaseError(
+        "Unable to detect the web framework in use, check firebase-debug.log for more info."
+      );
     const { framework, mayWantBackend, publicDirectory } = results;
     const {
       build,
@@ -569,7 +586,7 @@ ${firebaseDefaults ? `__FIREBASE_DEFAULTS__=${JSON.stringify(firebaseDefaults)}\
 
       await Promise.all(envs.map((path) => copyFile(path, join(functionsDist, basename(path)))));
 
-      execSync(`${NPM_COMMAND} i --omit dev --no-audit`, {
+      execSync(`npm i --omit dev --no-audit`, {
         cwd: functionsDist,
         stdio: "inherit",
       });

src/frameworks/vite/index.ts

@@ -3,20 +3,14 @@ import { spawn } from "cross-spawn";
 import { existsSync } from "fs";
 import { copy, pathExists } from "fs-extra";
 import { join } from "path";
-import { findDependency, FrameworkType, relativeRequire, SupportLevel } from "..";
+import { findDependency, FrameworkType, getNodeModuleBin, relativeRequire, SupportLevel } from "..";
 import { promptOnce } from "../../prompt";
 import { simpleProxy, warnIfCustomBuildScript } from "../utils";
 
 export const name = "Vite";
 export const support = SupportLevel.Experimental;
 export const type = FrameworkType.Toolchain;
 
-const CLI_COMMAND = join(
-  "node_modules",
-  ".bin",
-  process.platform === "win32" ? "vite.cmd" : "vite"
-);
-
 export const DEFAULT_BUILD_SCRIPT = ["vite build", "tsc && vite build"];
 
 export const initViteTemplate = (template: string) => async (setup: any, config: any) =>
@@ -67,10 +61,11 @@ export async function build(root: string) {
   const { build } = relativeRequire(root, "vite");
 
   await warnIfCustomBuildScript(root, name, DEFAULT_BUILD_SCRIPT);
+
   // SvelteKit uses process.cwd() unfortunately, chdir
   const cwd = process.cwd();
   process.chdir(root);
-  await build({ root });
+  await build({ root, mode: "production" });
   process.chdir(cwd);
 }
 
@@ -84,7 +79,8 @@ export async function getDevModeHandle(dir: string) {
   const host = new Promise<string>((resolve) => {
     // Can't use scheduleTarget since that—like prerender—is failing on an ESM bug
     // will just grep for the hostname
-    const serve = spawn(CLI_COMMAND, [], { cwd: dir });
+    const cli = getNodeModuleBin("vite", dir);
+    const serve = spawn(cli, [], { cwd: dir });
     serve.stdout.on("data", (data: any) => {
       process.stdout.write(data);
       const match = data.toString().match(/(http:\/\/.+:\d+)/);

src/test/frameworks/utils.spec.ts

@@ -1,11 +1,30 @@
 import { expect } from "chai";
 import * as sinon from "sinon";
 import * as fs from "fs";
+import { resolve, join } from "path";
 
-import { warnIfCustomBuildScript } from "../../frameworks/utils";
-import { isUrl } from "../../frameworks/utils";
+import { warnIfCustomBuildScript, isUrl } from "../../frameworks/utils";
+import { getNodeModuleBin } from "../../frameworks";
 
 describe("Frameworks utils", () => {
+  describe("getNodeModuleBin", () => {
+    it("should return expected tsc path", () => {
+      expect(getNodeModuleBin("tsc", __dirname)).to.equal(
+        resolve(join(__dirname, "..", "..", "..", "node_modules", ".bin", "tsc"))
+      );
+    });
+    it("should throw when npm root not found", () => {
+      expect(() => {
+        getNodeModuleBin("tsc", "/");
+      }).to.throw("Could not find the tsc executable.");
+    });
+    it("should throw when executable not found", () => {
+      expect(() => {
+        getNodeModuleBin("xxxxx", __dirname);
+      }).to.throw("Could not find the xxxxx executable.");
+    });
+  });
+
   describe("isUrl", () => {
     it("should identify http URL", () => {
       expect(isUrl("http://firebase.google.com")).to.be.true;