DEVPROD-14645 Ensure profiler config is not leaked into non profiler …

…builds (#613)
evergreen-ci · Feb 4, 2025 · 0cf158f · 0cf158f
1 parent 390dbc1
commit 0cf158f
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 35 deletions.
diff --git a/.evergreen/deploy.yml b/.evergreen/deploy.yml
@@ -35,8 +35,8 @@ functions:
           AWS_SESSION_TOKEN: ${AWS_SESSION_TOKEN}
         script: |
           ${PREPARE_SHELL}
-          # Add PROFILER to env if profiler patch parameter is set.
-          if [ -n "${profiler}" ]; then
+          # Add PROFILER to env if profiler patch parameter is set to true.
+          if [ "${profiler}" = "true" ]; then
               echo "PROFILER is set to true, adding profiler to the build"
               PROFILER=true PROFILE_HEAD="<script src=\"https://localhost:8097\"></script>" yarn env-cmd --no-override -e "${target}" yarn deploy-utils-build-and-push
           else

diff --git a/apps/parsley/config/injectVariablesInHTML.ts b/apps/parsley/config/injectVariablesInHTML.ts
@@ -2,17 +2,36 @@ import pkg from "replace-in-file";
 
 const { sync } = pkg;
 
-type InjectVariablesInHTMLConfig = {
+export type InjectVariablesInHTMLConfig = {
   files: string | string[];
   variables: string[];
 };
-export default (options: InjectVariablesInHTMLConfig) => {
+
+/**
+ * `injectVariablesInHTML` is a Vite plugin that replaces variables in HTML files with environment variables.
+ * @param options - Configuration options for the plugin.
+ * @returns A Vite plugin that replaces variables in HTML files with environment variables.
+ */
+export default function injectVariablesInHTML(
+  options: InjectVariablesInHTMLConfig,
+) {
+  // Prepare regexes and replacement values
   const from = options.variables.map((v) => new RegExp(v, "g"));
   const to = options.variables.map(
     (v) => process.env[v.replace(/%/g, "")] || "",
   );
+
   return {
     name: "injectVariablesInHTML",
+    // This hook runs in dev mode when serving the HTML
+    transformIndexHtml(html: string) {
+      let updatedHtml = html;
+      from.forEach((regex, i) => {
+        updatedHtml = updatedHtml.replace(regex, to[i]);
+      });
+      return updatedHtml;
+    },
+    // This hook runs during the build, after the bundle has been written
     writeBundle: async () => {
       try {
         sync({
@@ -21,8 +40,8 @@ export default (options: InjectVariablesInHTMLConfig) => {
           to,
         });
       } catch (error) {
-        console.error("Error occurred: ", error);
+        console.error("Error occurred while injecting variables:", error);
       }
     },
   };
-};
+}
diff --git a/apps/parsley/vite.config.ts b/apps/parsley/vite.config.ts
@@ -17,18 +17,7 @@ dns.setDefaultResultOrder("ipv4first");
 export default defineConfig({
   build: {
     rollupOptions: {
-      plugins: [
-        injectVariablesInHTML({
-          files: "dist/index.html",
-          variables: [
-            "%APP_VERSION%",
-            "%GIT_SHA%",
-            "%REACT_APP_RELEASE_STAGE%",
-            "%NODE_ENV%",
-            "%PROFILE_HEAD%",
-          ],
-        }),
-      ],
+      plugins: [],
     },
     sourcemap: true,
   },
@@ -53,6 +42,16 @@ export default defineConfig({
     envCompatible({
       prefix: "REACT_APP_",
     }),
+    injectVariablesInHTML({
+      files: "dist/index.html",
+      variables: [
+        "%APP_VERSION%",
+        "%GIT_SHA%",
+        "%REACT_APP_RELEASE_STAGE%",
+        "%NODE_ENV%",
+        "%PROFILE_HEAD%",
+      ],
+    }),
     // Typescript checking
     checker({ typescript: true }),
     // Bundle analyzer

diff --git a/apps/spruce/config/injectVariablesInHTML.ts b/apps/spruce/config/injectVariablesInHTML.ts
@@ -2,17 +2,36 @@ import pkg from "replace-in-file";
 
 const { sync } = pkg;
 
-type InjectVariablesInHTMLConfig = {
+export type InjectVariablesInHTMLConfig = {
   files: string | string[];
   variables: string[];
 };
-export default (options: InjectVariablesInHTMLConfig) => {
+
+/**
+ * `injectVariablesInHTML` is a Vite plugin that replaces variables in HTML files with environment variables.
+ * @param options - Configuration options for the plugin.
+ * @returns A Vite plugin that replaces variables in HTML files with environment variables.
+ */
+export default function injectVariablesInHTML(
+  options: InjectVariablesInHTMLConfig,
+) {
+  // Prepare regexes and replacement values
   const from = options.variables.map((v) => new RegExp(v, "g"));
   const to = options.variables.map(
     (v) => process.env[v.replace(/%/g, "")] || "",
   );
+
   return {
     name: "injectVariablesInHTML",
+    // This hook runs in dev mode when serving the HTML
+    transformIndexHtml(html: string) {
+      let updatedHtml = html;
+      from.forEach((regex, i) => {
+        updatedHtml = updatedHtml.replace(regex, to[i]);
+      });
+      return updatedHtml;
+    },
+    // This hook runs during the build, after the bundle has been written
     writeBundle: async () => {
       try {
         sync({
@@ -21,8 +40,8 @@ export default (options: InjectVariablesInHTMLConfig) => {
           to,
         });
       } catch (error) {
-        console.error("Error occurred:", error);
+        console.error("Error occurred while injecting variables:", error);
       }
     },
   };
-};
+}
diff --git a/apps/spruce/vite.config.ts b/apps/spruce/vite.config.ts
@@ -49,19 +49,6 @@ export default defineConfig({
     sourcemap: true,
     rollupOptions: {
       output: {
-        plugins: [
-          // Replace the variables in our HTML files.
-          injectVariablesInHTML({
-            files: "dist/index.html",
-            variables: [
-              "%APP_VERSION%",
-              "%GIT_SHA%",
-              "%REACT_APP_RELEASE_STAGE%",
-              "%NODE_ENV%",
-              "%PROFILE_HEAD%",
-            ],
-          }),
-        ],
         manualChunks: {
           vendor: [
             "react",
@@ -109,6 +96,17 @@ export default defineConfig({
       // exclude storybook stories
       exclude: [/\.stories\.tsx?$/],
     }),
+    // Replace the variables in our HTML files.
+    injectVariablesInHTML({
+      files: "dist/index.html",
+      variables: [
+        "%APP_VERSION%",
+        "%GIT_SHA%",
+        "%REACT_APP_RELEASE_STAGE%",
+        "%NODE_ENV%",
+        "%PROFILE_HEAD%",
+      ],
+    }),
     // Dynamic imports of antd styles
     vitePluginImp({
       optimize: true,