Migrate webpack env variables to vite

client/build/utils.js

@@ -3,7 +3,7 @@ const path = require('path');
 const config = require('../config');
 const packageConfig = require('../package.json');
 
-const isDev = process.env.NODE_ENV !== 'production';
+const isDev = import.meta.env.MODE !== 'production';
 
 const assetsPath = (_path) => {
   const assetsSubDirectory = isDev ? config.dev.assetsSubDirectory : config.build.assetsSubDirectory;

client/config/prod-dha.env.js

@@ -1,17 +1,7 @@
-'use strict';
+const config = {
-module.exports = {
-  /*
-   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-   * around strings
-   */
-  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-
-  /*
-   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
-   */
-  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
   VUE_APP_TITLE: 'myDHA',
-  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 };
+
+export default config;

client/config/prod-dhf.env.js

@@ -1,17 +1,7 @@
-'use strict';
+const config = {
-module.exports = {
-  /*
-   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-   * around strings
-   */
-  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-
-  /*
-   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
-   */
-  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
   VUE_APP_TITLE: 'myDHF',
-  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 };
+
+export default config;

client/config/prod-my-kv.env.js

@@ -1,17 +1,7 @@
-'use strict';
+const config = {
-module.exports = {
-  /*
-   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-   * around strings
-   */
-  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-
-  /*
-   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
-   */
-  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
   VUE_APP_TITLE: 'myKV',
-  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
 };
+
+export default config;

client/config/prod.env.js

@@ -1,43 +0,0 @@
-'use strict';
-const { merge } = require('webpack-merge');
-
-const values = {
-  NODE_ENV: '"production"',
-  HEP_URL: JSON.stringify(process.env.HEP_URL),
-  MATOMO_HOST: JSON.stringify(process.env.MATOMO_HOST),
-  MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
-  LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
-  VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
-  SENTRY_DSN: JSON.stringify(process.env.SENTRY_JAVASCRIPT_DSN),
-  SENTRY_ENVIRONMENT: JSON.stringify(process.env.SENTRY_ENV),
-  /*
-   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
-   * and JS needs quotes around strings
-   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
-   */
-  VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
-
-  /*
-   * Vars used in HTML templates don't need to be stringyfied, as HTML does not need them to have quotes
-   */
-  // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
-  VUE_APP_FAVICON_32: '/static/favicon-32x32.png',
-  VUE_APP_FAVICON_16: '/static/favicon-16x16.png',
-  VUE_APP_TITLE: 'mySkillbox',
-  // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
-};
-
-switch (process.env.APP_FLAVOR) {
-  case 'my-kv':
-    module.exports = merge(values, require('./prod-my-kv.env.js'));
-    break;
-  case 'my-dhf':
-    module.exports = merge(values, require('./prod-dhf.env.js'));
-    break;
-  case 'my-dha':
-    module.exports = merge(values, require('./prod-dha.env.js'));
-    break;
-  default:
-    // we are on the skillbox APP_FLAVOR
-    module.exports = values;
-}

client/index.html

@@ -4,17 +4,15 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
-  <title>
+  <title>_APP_TITLE_</title>
-    <!-- <%= htmlWebpackPlugin.options.VUE_APP_TITLE %> -->
-  </title>
 
   <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css" />
   <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet" />
   <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet" />
 
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
-  <!-- <link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>" /> -->
+  <link rel="icon" type="image/png" sizes="32x32" href="_FAVICON_32_" />
-  <!-- <link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>" /> -->
+  <link rel="icon" type="image/png" sizes="16x16" href="_FAVICON_16_" />
   <link rel="manifest" href="/static/site.webmanifest" />
   <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5" />
   <meta name="msapplication-TileColor" content="#da532c" />

client/src/components/content-blocks/assignment/SubmissionForm.vue

@@ -88,7 +88,7 @@ const allowsDocuments = computed(() => {
   return 'document' in props.userInput;
 });
 const showSpellcheckButton = computed(() => {
-  return props.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
+  return props.spellcheck && import.meta.env.VUE_APP_ENABLE_SPELLCHECK;
 });
 const spellcheckText = computed(() => {
   if (!props.spellcheckLoading) {

client/src/graphql/client.js

@@ -78,7 +78,7 @@ export default function(uri, networkErrorCallback) {
   });
 
   let composedLink;
-  if (process.env.NODE_ENV === 'production') {
+  if (import.meta.env.MODE === 'production') {
     composedLink = ApolloLink.from([createOmitTypenameLink, errorLink, notFoundLink, httpLink]);
   } else {
     composedLink = ApolloLink.from([consoleLink, createOmitTypenameLink, errorLink, notFoundLink, httpLink]);

client/src/helpers/app-flavor.ts

@@ -4,7 +4,7 @@ import { defaultFlavorValues, dhaValues, dhfValues, myKvValues } from '@/helpers
 
 let flavorValues: FlavorValues;
 
-switch (process.env.VUE_APP_FLAVOR) {
+switch (import.meta.env.VUE_APP_FLAVOR) {
   case 'my-kv':
     flavorValues = myKvValues;
     break;

client/src/mixins/logout.js

@@ -9,8 +9,8 @@ export default {
         })
         .then(({ data }) => {
           if (data.logout.success) {
-            if (process.env.LOGOUT_REDIRECT_URL) {
+            if (import.meta.env.LOGOUT_REDIRECT_URL) {
-              location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
+              location.replace(`https://sso.hep-verlag.ch/logout?return_to=${import.meta.env.LOGOUT_REDIRECT_URL}`);
             } else {
               location.replace(`/`);
             }

client/src/pages/license-activation.vue

@@ -116,8 +116,8 @@ export default defineComponent({
       me: {
         email: '',
       },
-      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
+      teacherEditionUrl: `${import.meta.env.HEP_URL}/myskillbox-lehrpersonen`,
-      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
+      studentEditionUrl: `${import.meta.env.HEP_URL}/myskillbox-fur-lernende`,
       loading: false,
     };
   },

client/src/setup/plugins.ts

@@ -18,11 +18,11 @@ const apolloProvider = createApolloProvider({
   defaultClient: privateApolloClient,
 });
 const registerPlugins = (app: any) => {
-  if (process.env.SENTRY_DSN) {
+  if (import.meta.env.SENTRY_DSN) {
     Sentry.init({
       app,
-      dsn: process.env.SENTRY_DSN,
+      dsn: import.meta.env.SENTRY_DSN,
-      environment: process.env.SENTRY_ENVIRONMENT || 'localhost',
+      environment: import.meta.env.SENTRY_ENVIRONMENT || 'localhost',
     });
   }
   app.use(store);
@@ -32,12 +32,12 @@ const registerPlugins = (app: any) => {
   app.use(apolloProvider);
   app.use(router);
   app.use(flavorPlugin);
-  if (process.env.MATOMO_HOST) {
+  if (import.meta.env.MATOMO_HOST) {
     // MS-628: we use VueMatomo "only" to setup the Matomo tracker
     // we will not use any of the provided functions
     app.use(VueMatomo, {
-      host: process.env.MATOMO_HOST,
+      host: import.meta.env.MATOMO_HOST,
-      siteId: process.env.MATOMO_SITE_ID,
+      siteId: import.meta.env.MATOMO_SITE_ID,
       enableHeartBeatTimer: true,
       // we don't want the default vue-matomo router behaviour
       router: null,

client/src/setup/router.ts

@@ -32,8 +32,8 @@ const setupRouteGuards = () => {
     // logger.$log.debug('navigation guard called', to, from);
     if (to.path === '/logout') {
       await publicApolloClient.resetStore();
-      if (process.env.LOGOUT_REDIRECT_URL) {
+      if (import.meta.env.LOGOUT_REDIRECT_URL) {
-        location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
+        location.replace(`https://sso.hep-verlag.ch/logout?return_to=${import.meta.env.LOGOUT_REDIRECT_URL}`);
         next(false);
         return;
       } else {

client/vite.config.ts

@@ -3,10 +3,61 @@ import vue from '@vitejs/plugin-vue'
 import gql from '@rollup/plugin-graphql';
 import path from 'path';
 
+
+const getFlavorConfig = () => {
+  switch (process.env.APP_FLAVOR) {
+    case 'my-kv':
+      return require('./config/prod-my-kv.env.js').default;
+    case 'my-dhf':
+      return require('./config/prod-dhf.env.js').default;
+    case 'my-dha':
+      return require('./config/prod-dha.env.js').default;
+  }
+  return {};
+}
+
+
 function resolve(dir: string) {
   return path.join(__dirname, dir);
 }
 
+const define = {
+  'import.meta.env.HEP_URL': JSON.stringify(process.env.HEP_URL),
+  'import.meta.env.MATOMO_HOST': JSON.stringify(process.env.MATOMO_HOST),
+  'import.meta.env.MATOMO_SITE_ID': JSON.stringify(process.env.MATOMO_SITE_ID),
+  'import.meta.env.LOGOUT_REDIRECT_URL': JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
+  'import.meta.env.VUE_APP_FLAVOR': JSON.stringify(process.env.APP_FLAVOR),
+  'import.meta.env.SENTRY_DSN': JSON.stringify(process.env.SENTRY_JAVASCRIPT_DSN),
+  'import.meta.env.SENTRY_ENVIRONMENT': JSON.stringify(process.env.SENTRY_ENV),
+  /*
+   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
+   * and JS needs quotes around strings
+   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
+   */
+  'import.meta.env.VUE_APP_ENABLE_SPELLCHECK': !!process.env.TASKBASE_BASEURL,
+
+}
+
+const flavorConfig = getFlavorConfig();
+
+const htmlPlugin = () => {
+  return {
+    name: 'html-transform',
+    transformIndexHtml(html: string) {
+      return html.replace(
+        /_APP_TITLE_/,
+        flavorConfig.VUE_APP_TITLE || 'mySkillbox'
+      ).replace(
+        /_FAVICON_16_/,
+        flavorConfig.VUE_APP_FAVICON_16 || '/static/favicon-16x16.png'
+      ).replace(
+        /_FAVICON_32_/,
+        flavorConfig.VUE_APP_FAVICON_32 || '/static/favicon-32x32.png'
+      );
+    }
+  }
+}
+
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -25,5 +76,7 @@ export default defineConfig({
   plugins: [
     gql(),
     vue(),
-  ]
+    htmlPlugin()
+  ],
+  define
 })