ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Migrate webpack env variables to vite

This commit is contained in:
Ramon Wenger 2023-04-17 14:59:21 +02:00
parent 1134ea9679
commit d910d68824
14 changed files with 82 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/build/utils.js
View File

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

16
client/config/prod-dha.env.js
View File

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

16
client/config/prod-dhf.env.js
View File

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

16
client/config/prod-my-kv.env.js
View File

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

43
client/config/prod.env.js
View File

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

8
client/index.html
View File

@ -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>
<!-- <%= htmlWebpackPlugin.options.VUE_APP_TITLE %> -->
</title>
<title>_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="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>" /> -->
<link rel="icon" type="image/png" sizes="32x32" href="_FAVICON_32_" />
<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" />

2
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -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) {

2
client/src/graphql/client.js
View File

@ -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]);

2
client/src/helpers/app-flavor.ts
View File

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

4
client/src/mixins/logout.js
View File

@ -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(`/`);
}

4
client/src/pages/license-activation.vue
View File

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

12
client/src/setup/plugins.ts
View File

@ -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,

4
client/src/setup/router.ts
View File

@ -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 {

55
client/vite.config.ts
View File

@ -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
})