Use webpack-environment-plugin to read env variables

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>

src/constants/application-config.js

@@ -1,12 +1,12 @@
 const applicationConfig = {
-    CONSUMER_CF_DISTRO: process.env.VUE_APP_CONSUMER_CF_DISTRO,
+    CONSUMER_CF_DISTRO: process.env.__VUE_APP_CONSUMER_CF_DISTRO__,
-    GOOGLE_PLACES_API_KEY: process.env.VUE_APP_GOOGLE_PLACES_API_KEY,
+    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"
+    CURRENT_ENVIRONMENT: process.env.__VUE_APP_CURRENT_ENVIRONMENT__, // "Localhost", "Dev", "QA", and "Prod"
-    HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
+    HERITAGE_FUNNEL: process.env.__VUE_APP_HERITAGE_FUNNEL__,
-    SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
+    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",
 };
 

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;
     }

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,
+    HERITAGE_FUNNEL: applicationConfig.HERITAGE_FUNNEL,
-    SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
+    SAFELITE_HOP: applicationConfig.SAFELITE_HOP,
 };
 
 export { externalUrls };

vue.config.js

@@ -1,20 +1,4 @@
-process.env.VUE_APP_CONSUMER_CF_DISTRO = "https://digitalapi.dev.safelite.io";
+const webpack = require('webpack');
-//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";
 
 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__']: "",
+            }),
+        ],
     },
 };

vue.release.config.js

@@ -1,16 +1,4 @@
-process.env.VUE_APP_CONSUMER_CF_DISTRO = "__VUE_APP_CONSUMER_CF_DISTRO__";
+const webpack = require('webpack');
-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__";
 
 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__',
+            ]),
+        ],
+    },
 };