From d910d68824fcf6068baa013c45b4e11b615eacae Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Mon, 17 Apr 2023 14:59:21 +0200 Subject: [PATCH] Migrate webpack env variables to vite --- client/build/utils.js | 2 +- client/config/prod-dha.env.js | 16 +----- client/config/prod-dhf.env.js | 16 +----- client/config/prod-my-kv.env.js | 16 +----- client/config/prod.env.js | 43 --------------- client/index.html | 8 +-- .../assignment/SubmissionForm.vue | 2 +- client/src/graphql/client.js | 2 +- client/src/helpers/app-flavor.ts | 2 +- client/src/mixins/logout.js | 4 +- client/src/pages/license-activation.vue | 4 +- client/src/setup/plugins.ts | 12 ++-- client/src/setup/router.ts | 4 +- client/vite.config.ts | 55 ++++++++++++++++++- 14 files changed, 82 insertions(+), 104 deletions(-) delete mode 100644 client/config/prod.env.js diff --git a/client/build/utils.js b/client/build/utils.js index 80059123..d193d38b 100644 --- a/client/build/utils.js +++ b/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; diff --git a/client/config/prod-dha.env.js b/client/config/prod-dha.env.js index 5efa78c3..24689baf 100644 --- a/client/config/prod-dha.env.js +++ b/client/config/prod-dha.env.js @@ -1,17 +1,7 @@ -'use strict'; -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 +const config = { 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; diff --git a/client/config/prod-dhf.env.js b/client/config/prod-dhf.env.js index fa5b1fca..4db3abc8 100644 --- a/client/config/prod-dhf.env.js +++ b/client/config/prod-dhf.env.js @@ -1,17 +1,7 @@ -'use strict'; -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 +const config = { 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; diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js index 797a8bca..26cf4771 100644 --- a/client/config/prod-my-kv.env.js +++ b/client/config/prod-my-kv.env.js @@ -1,17 +1,7 @@ -'use strict'; -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 +const config = { 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; diff --git a/client/config/prod.env.js b/client/config/prod.env.js deleted file mode 100644 index b85354b5..00000000 --- a/client/config/prod.env.js +++ /dev/null @@ -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; -} diff --git a/client/index.html b/client/index.html index 662d7871..3d8524db 100644 --- a/client/index.html +++ b/client/index.html @@ -4,17 +4,15 @@ - - <!-- <%= htmlWebpackPlugin.options.VUE_APP_TITLE %> --> - + _APP_TITLE_ - - + + diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue index 71b63b0d..2a069c84 100644 --- a/client/src/components/content-blocks/assignment/SubmissionForm.vue +++ b/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) { diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js index 9d2d0290..3698b550 100644 --- a/client/src/graphql/client.js +++ b/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]); diff --git a/client/src/helpers/app-flavor.ts b/client/src/helpers/app-flavor.ts index 3278d8c1..b8768070 100644 --- a/client/src/helpers/app-flavor.ts +++ b/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; diff --git a/client/src/mixins/logout.js b/client/src/mixins/logout.js index 4d7c1cad..176abcb8 100644 --- a/client/src/mixins/logout.js +++ b/client/src/mixins/logout.js @@ -9,8 +9,8 @@ export default { }) .then(({ data }) => { if (data.logout.success) { - if (process.env.LOGOUT_REDIRECT_URL) { - location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`); + if (import.meta.env.LOGOUT_REDIRECT_URL) { + location.replace(`https://sso.hep-verlag.ch/logout?return_to=${import.meta.env.LOGOUT_REDIRECT_URL}`); } else { location.replace(`/`); } diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue index 8defdbd5..d7d6317d 100644 --- a/client/src/pages/license-activation.vue +++ b/client/src/pages/license-activation.vue @@ -116,8 +116,8 @@ export default defineComponent({ me: { email: '', }, - teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`, - studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`, + teacherEditionUrl: `${import.meta.env.HEP_URL}/myskillbox-lehrpersonen`, + studentEditionUrl: `${import.meta.env.HEP_URL}/myskillbox-fur-lernende`, loading: false, }; }, diff --git a/client/src/setup/plugins.ts b/client/src/setup/plugins.ts index 63183f4a..daca8250 100644 --- a/client/src/setup/plugins.ts +++ b/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, - environment: process.env.SENTRY_ENVIRONMENT || 'localhost', + dsn: import.meta.env.SENTRY_DSN, + 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, - siteId: process.env.MATOMO_SITE_ID, + host: import.meta.env.MATOMO_HOST, + siteId: import.meta.env.MATOMO_SITE_ID, enableHeartBeatTimer: true, // we don't want the default vue-matomo router behaviour router: null, diff --git a/client/src/setup/router.ts b/client/src/setup/router.ts index 7c7b67d9..db6f2fc4 100644 --- a/client/src/setup/router.ts +++ b/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) { - location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`); + if (import.meta.env.LOGOUT_REDIRECT_URL) { + location.replace(`https://sso.hep-verlag.ch/logout?return_to=${import.meta.env.LOGOUT_REDIRECT_URL}`); next(false); return; } else { diff --git a/client/vite.config.ts b/client/vite.config.ts index 001a8a99..cc267d14 100644 --- a/client/vite.config.ts +++ b/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 })