GitHub Action fixes for web frameworks

CHANGELOG.md

@@ -1 +1,2 @@
 - `firebase init dataconnect` now can pull down deployed GQL files.
+- GitHub Action fixes for web frameworks (#6883)

src/init/features/hosting/github.ts

@@ -136,7 +136,7 @@ export async function initGitHub(setup: Setup): Promise<void> {
     logBullet(`You have a predeploy script configured in firebase.json.`);
   }
 
-  const { script } = await promptForBuildScript();
+  const { script } = await promptForBuildScript(setup?.hosting?.useWebFrameworks);
 
   const ymlDeployDoc = loadYMLDeploy();
 
@@ -158,6 +158,8 @@ export async function initGitHub(setup: Setup): Promise<void> {
       githubSecretName,
       setup.projectId,
       script,
+      setup?.hosting?.useWebFrameworks,
+      setup?.hosting?.source,
     );
 
     logger.info();
@@ -192,6 +194,8 @@ export async function initGitHub(setup: Setup): Promise<void> {
         githubSecretName,
         setup.projectId,
         script,
+        setup?.hosting?.useWebFrameworks,
+        setup?.hosting?.source,
       );
 
       logger.info();
@@ -287,6 +291,9 @@ type GitHubWorkflowConfig = {
         with?: { [key: string]: string };
         env?: { [key: string]: string };
       }[];
+      defaults?: {
+        run?: Record<string, string>;
+      };
     };
   };
 };
@@ -295,7 +302,9 @@ function writeChannelActionYMLFile(
   ymlPath: string,
   secretName: string,
   projectId: string,
-  script?: string,
+  script: string | undefined,
+  useWebFrameworks: boolean | undefined,
+  hostingSource: string | undefined,
 ): void {
   const workflowConfig: GitHubWorkflowConfig = {
     name: "Deploy to Firebase Hosting on PR",
@@ -314,20 +323,39 @@ function writeChannelActionYMLFile(
     },
   };
 
-  if (script) {
-    workflowConfig.jobs.build_and_preview.steps.push({
-      run: script,
-    });
-  }
-
-  workflowConfig.jobs.build_and_preview.steps.push({
+  const buildAndPreviewParams: Record<string, any> = {
     uses: HOSTING_GITHUB_ACTION_NAME,
     with: {
       repoToken: "${{ secrets.GITHUB_TOKEN }}",
       firebaseServiceAccount: `\${{ secrets.${secretName} }}`,
       projectId: projectId,
     },
-  });
+  };
+
+  if (useWebFrameworks) {
+    // install is required for web frameworks
+    workflowConfig.jobs.build_and_preview.steps.push({ run: "npm ci" });
+
+    buildAndPreviewParams.env = {
+      FIREBASE_CLI_EXPERIMENTS: "webframeworks",
+    };
+
+    // if source is not root, set the working directory in the GitHub Action so that
+    // the npm script does not fail
+    if (hostingSource && hostingSource !== ".") {
+      workflowConfig.jobs.build_and_preview.defaults = {
+        run: { "working-directory": hostingSource },
+      };
+    }
+  }
+
+  if (script) {
+    workflowConfig.jobs.build_and_preview.steps.push({
+      run: script,
+    });
+  }
+
+  workflowConfig.jobs.build_and_preview.steps.push(buildAndPreviewParams);
 
   const ymlContents = `# This file was auto-generated by the Firebase CLI
 # https://github.com/firebase/firebase-tools
@@ -344,7 +372,9 @@ function writeDeployToProdActionYMLFile(
   branch: string | undefined,
   secretName: string,
   projectId: string,
-  script?: string,
+  script: string | undefined,
+  useWebFrameworks: boolean | undefined,
+  hostingSource: string | undefined,
 ): void {
   const workflowConfig: GitHubWorkflowConfig = {
     name: "Deploy to Firebase Hosting on merge",
@@ -357,21 +387,38 @@ function writeDeployToProdActionYMLFile(
     },
   };
 
-  if (script) {
-    workflowConfig.jobs.build_and_deploy.steps.push({
-      run: script,
-    });
-  }
-
-  workflowConfig.jobs.build_and_deploy.steps.push({
+  const buildAndDeployParams: Record<string, any> = {
     uses: HOSTING_GITHUB_ACTION_NAME,
     with: {
       repoToken: "${{ secrets.GITHUB_TOKEN }}",
       firebaseServiceAccount: `\${{ secrets.${secretName} }}`,
       channelId: "live",
       projectId: projectId,
     },
-  });
+  };
+
+  if (useWebFrameworks) {
+    // install is required for web frameworks
+    workflowConfig.jobs.build_and_deploy.steps.push({ run: "npm ci" });
+
+    buildAndDeployParams.env = {
+      FIREBASE_CLI_EXPERIMENTS: "webframeworks",
+    };
+
+    // if source is not root, set the working directory in the GitHub Action so that
+    // the npm script does not fail
+    if (hostingSource && hostingSource !== ".") {
+      workflowConfig.jobs.build_and_deploy.defaults = {
+        run: { "working-directory": hostingSource },
+      };
+    }
+  }
+
+  if (script) {
+    workflowConfig.jobs.build_and_deploy.steps.push({ run: script });
+  }
+
+  workflowConfig.jobs.build_and_deploy.steps.push(buildAndDeployParams);
 
   const ymlContents = `# This file was auto-generated by the Firebase CLI
 # https://github.com/firebase/firebase-tools
@@ -457,7 +504,9 @@ async function promptForRepo(
   return { repo, key, keyId };
 }
 
-async function promptForBuildScript(): Promise<{ script?: string }> {
+async function promptForBuildScript(
+  useWebFrameworks: boolean | undefined,
+): Promise<{ script?: string }> {
   const { shouldSetupScript } = await prompt({}, [
     {
       type: "confirm",
@@ -475,7 +524,12 @@ async function promptForBuildScript(): Promise<{ script?: string }> {
     {
       type: "input",
       name: "script",
-      default: "npm ci && npm run build",
+      /**
+       * Do not suggest a default script if the user is using web frameworks:
+       * - build script is handled by frameworks code
+       * - install is required for frameworks, the npm ci will be added by default
+       */
+      default: useWebFrameworks ? undefined : "npm ci && npm run build",
       message: "What script should be run before every deploy?",
     },
   ]);

src/init/index.ts

@@ -14,6 +14,7 @@ export interface Setup {
   project?: Record<string, any>;
   projectId?: string;
   projectLocation?: string;
+  hosting?: Record<string, any>;
 }
 
 const featureFns = new Map<string, (setup: any, config: any, options?: any) => Promise<unknown>>([