Use webpack-environment-plugin to read env variables

2025-09-18 16:48:14 -04:00 · 2025-09-18 16:48:14 -04:00 · 938dd0b5ca
commit 938dd0b5ca
parent 879c330a00
6 changed files with 49 additions and 45 deletions
--- a/public/index.html
+++ b/public/index.html
@ -4,7 +4,7 @@
    <script>
      window.dataLayer = [{}];
     </script>
-     <script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
+     <script><%= process.env.__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__ %></script>
     <script src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"></script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -16,7 +16,7 @@

    <!-- Google Tag Manager -->
    <noscript>
-      <iframe src="<%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC %>"
+      <iframe src="<%= process.env.__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__ %>"
      height="0" width="0" style="display:none;visibility:hidden"></iframe>
    </noscript>

@ -27,6 +27,6 @@
    <div id="app"></div>
    <!-- built files will be auto injected -->

-    <%= process.env.VUE_APP_SOLARWINDS_MONITORING_SCRIPT %>
+    <%= process.env.__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__ %>
  </body>
 </html>
--- a/src/constants/application-config.js
+++ b/src/constants/application-config.js
@ -1,12 +1,12 @@
 const applicationConfig = {
-    CONSUMER_CF_DISTRO: process.env.VUE_APP_CONSUMER_CF_DISTRO,
-    GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
+    CONSUMER_CF_DISTRO: process.env.__VUE_APP_CONSUMER_CF_DISTRO__,
+    GOOGLE_PLACES_API_KEY: process.env.__VUE_APP_GOOGLE_PLACES_API_KEY__,
    ANALYTICS_SESSION_TIMEOUT_MINUTES: 30,
    SAVED_SESSION_TIMEOUT_DAYS: 45,
    COOKIE_PATH: "/",
-    CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
-    HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
-    SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
+    CURRENT_ENVIRONMENT: process.env.__VUE_APP_CURRENT_ENVIRONMENT__, // "Localhost", "Dev", "QA", and "Prod"
+    HERITAGE_FUNNEL: process.env.__VUE_APP_HERITAGE_FUNNEL__,
+    SAFELITE_HOP: process.env.__VUE_APP_SAFELITE_HOP__,
    APPLICATION_NAME: "FixMyGlass",
    ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen",
    APPLICATION_ABBREVIATION: "fmg",
@ -14,7 +14,7 @@ const applicationConfig = {
    SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
    CASH_PARENT_ACCOUNT_NUMBER: 167132,
    CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER: "87291",
-    MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
+    MY_ACCOUNT: process.env.__VUE_APP_MY_ACCOUNT__,
    PIA_RESPONSE_URL:
        location.protocol + "//" + location.host + "/fmg/payment-pia-return?src=concept-funnel",
    PIA_CANCEL_URL:
@ -29,7 +29,7 @@ const applicationConfig = {
    FRONTEND_LOGGER_PATH: "/analytics/api/v1/logging",
    AFFILIATE_COOKIE_CONTAINING_NAME: "_Track",
    COOKIE_NAME_LENGTH_MAX_LIMIT: 44,
-    SESSION_TIMEOUT_MINUTES: process.env.VUE_APP_SESSION_TIMEOUT_MINUTES,
+    SESSION_TIMEOUT_MINUTES: process.env.__VUE_APP_SESSION_TIMEOUT_MINUTES__,
    RETURN_USER_PAGE: "/fmg/return-user",
 };

--- a/src/helpers/heritage-integration/navigation-helper.js
+++ b/src/helpers/heritage-integration/navigation-helper.js
@ -43,11 +43,11 @@ export async function navigateToHeritageFunnel({ shouldSaveSession, pageNameToLo

    if (
        (applicationConfig.HERITAGE_FUNNEL.includes("fixmyglasstest") &&
-            process.env.VUE_APP_CURRENT_ENVIRONMENT === "Localhost") ||
+            applicationConfig.CURRENT_ENVIRONMENT === "Localhost") ||
        (applicationConfig.HERITAGE_FUNNEL.includes("fixmyglassdev") &&
-            process.env.VUE_APP_CURRENT_ENVIRONMENT === "Localhost") ||
+            applicationConfig.CURRENT_ENVIRONMENT === "Localhost") ||
        (applicationConfig.HERITAGE_FUNNEL.includes("localhost") &&
-            process.env.VUE_APP_CURRENT_ENVIRONMENT === "Localhost")
+            applicationConfig.CURRENT_ENVIRONMENT === "Localhost")
    ) {
        heritageParms["forceEndToEndInsurance"] = true;
    }
--- a/src/router/constants/externalUrl-values.js
+++ b/src/router/constants/externalUrl-values.js
@ -1,6 +1,8 @@
+import { applicationConfig } from "@/constants/application-config";
+
 const externalUrls = {
-    HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
-    SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
+    HERITAGE_FUNNEL: applicationConfig.HERITAGE_FUNNEL,
+    SAFELITE_HOP: applicationConfig.SAFELITE_HOP,
 };

 export { externalUrls };
--- a/vue.config.js
+++ b/vue.config.js
@ -1,20 +1,4 @@
-process.env.VUE_APP_CONSUMER_CF_DISTRO = "https://digitalapi.dev.safelite.io";
-//process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost:38000/default.aspx";
-process.env.VUE_APP_HERITAGE_FUNNEL = "https://fixmyglassdev.safelite.com/default.aspx";
-process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
-process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
-process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
-//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutShared.aspx";
-process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-dev.safelite.com/fmgCheckoutShared.aspx";
-process.env.VUE_APP_SOLARWINDS_MONITORING = "";
-process.env.VUE_APP_SESSION_TIMEOUT_MINUTES = 30;
-
-// GA & GTM
-process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =
-    "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');";
-
-process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC =
-    "https://www.googletagmanager.com/ns.html?id=GTM-M6XCRH&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x";
+const webpack = require('webpack');

 module.exports = {
    outputDir: "dist/fmg",
@ -36,5 +20,19 @@ module.exports = {
    },
    configureWebpack: {
        devtool: "source-map",
+        plugins: [
+            new webpack.EnvironmentPlugin({
+                ['__VUE_APP_CONSUMER_CF_DISTRO__']: "https://digitalapi.dev.safelite.io",
+                ['__VUE_APP_CURRENT_ENVIRONMENT__']: "Localhost",
+                ['__VUE_APP_GOOGLE_PLACES_API_KEY__']: "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo",
+                ['__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__']: "https://www.googletagmanager.com/ns.html?id=GTM-M6XCRH&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x",
+                ['__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__']: "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl+ '&gtm_auth=amlAYNhxUxuskQo7jmjadg&gtm_preview=env-38&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-M6XCRH');",
+                ['__VUE_APP_HERITAGE_FUNNEL__']: "https://fixmyglassdev.safelite.com/default.aspx",
+                ['__VUE_APP_MY_ACCOUNT__']: "https://myaccountdev.safelite.com/",
+                ['__VUE_APP_SAFELITE_HOP__']: "https://sv2-safelitehop-dev.safelite.com/fmgCheckoutShared.aspx",
+                ['__VUE_APP_SESSION_TIMEOUT_MINUTES__']: 30,
+                ['__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__']: "",
+            }),
+        ],
    },
 };
--- a/vue.release.config.js
+++ b/vue.release.config.js
@ -1,16 +1,4 @@
-process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
-process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "__VUE_APP_GOOGLE_PLACES_API_KEY__";
-process.env.VUE_APP_HERITAGE_FUNNEL = "__VUE_APP_HERITAGE_FUNNEL__";
-process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
-process.env.VUE_APP_MY_ACCOUNT = "__VUE_APP_MY_ACCOUNT__";
-process.env.VUE_APP_SAFELITE_HOP = "__VUE_APP_SAFELITE_HOP__";
-process.env.VUE_APP_SOLARWINDS_MONITORING_SCRIPT = "__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__";
-process.env.VUE_APP_SESSION_TIMEOUT_MINUTES = 30;
-
-// GA & GTM
-process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";
-process.env.VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC =
-    "__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__";
+const webpack = require('webpack');

 module.exports = {
    outputDir: "dist/fmg",
@ -30,4 +18,20 @@ module.exports = {
            },
        },
    },
+    configureWebpack: {
+        plugins: [
+            new webpack.EnvironmentPlugin([
+                '__VUE_APP_CONSUMER_CF_DISTRO__',
+                '__VUE_APP_CURRENT_ENVIRONMENT__',
+                '__VUE_APP_GOOGLE_PLACES_API_KEY__',
+                '__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__',
+                '__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__',
+                '__VUE_APP_HERITAGE_FUNNEL__',
+                '__VUE_APP_MY_ACCOUNT__',
+                '__VUE_APP_SAFELITE_HOP__',
+                '__VUE_APP_SESSION_TIMEOUT_MINUTES__',
+                '__VUE_APP_SOLARWINDS_MONITORING_SCRIPT__',
+            ]),
+        ],
+    },
 };