frontend - moved to vue 2.7 and vite

2026-02-06 09:56:05 +00:00 · 2024-07-11 21:32:45 +02:00 · 2024-07-11 21:32:45 +02:00 · 4e053d98a0
commit 4e053d98a0
parent b551495799
18 changed files with 742 additions and 6588 deletions
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@ -4,9 +4,7 @@ module.exports = {
    browser: true,
    node: true,
    jest: true,
-  },
-  parserOptions: {
-    parser: 'babel-eslint',
+    es2022: true,
  },
  extends: [
    'standard',
@ -29,7 +27,7 @@ module.exports = {
  // add your custom rules here
  rules: {
    'no-console': ['error'],
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': import.meta.env.NODE_ENV === 'production' ? 'error' : 'off',
    'vue/component-name-in-template-casing': ['error', 'kebab-case'],
    'vue/no-static-inline-styles': [
      'error',
--- a/frontend/.postcssrc.js
+++ b/frontend/.postcssrc.js
@ -1,8 +0,0 @@
-// https://github.com/michael-ciniawsky/postcss-load-config
-
-module.exports = {
-  plugins: {
-    // to edit target browsers: use "browserslist" field in package.json
-    autoprefixer: {}
-  }
-};
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@ -98,13 +98,13 @@ COPY --from=build ${DOCKER_WORKDIR}/run ./run
 CMD /bin/sh -c "yarn run start"


- 
+
 ## add `/usr/src/app/node_modules/.bin` to $PATH
 #ENV PATH /usr/src/app/node_modules/.bin:$PATH
-# 
+#
 ## install and cache app dependencies
 #COPY package.json /usr/src/app/package.json
 #RUN npm install
 #RUN npm install -g @vue/cli
 ## start app
-#CMD ["npm", "run", "serve"]
+#CMD ["npm", "run", "serve"]
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@ -11,7 +11,7 @@ module.exports = function (api) {
    ],
  ]

-  if (process.env.NODE_ENV === 'test') {
+  if (import.meta.env.NODE_ENV === 'test') {
    plugins.push('transform-require-context')
  }

--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,69 @@
+<!--
+
+=========================================================
+* Gradido Konto - v1.6.1
+=========================================================
+
+* Product Page: https://www.gradido.net
+* Copyright 2021 Gradido-Akademie - (https://www.gradido.net)
+
+* Coded by www.gradido.net
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="title" lang="de" content="VITE test">
+  <meta name="title" lang="en" content="VITE test">
+  <meta name="description" lang="de" content="VITE test">
+  <meta name="description" lang="en" content="VITE test">
+  <meta name="keywords" lang="de" content="VITE test">
+  <meta name="keywords" lang="en" content="VITE test">
+  <meta name="author" content="VITE test">
+  <meta name="url" content="VITE test">
+  <meta name="identifier-URL" content="VITE test">
+<!--  <meta name="title" lang="de" content="<%= htmlWebpackPlugin.options.meta.title_de %>">-->
+<!--  <meta name="title" lang="en" content="<%= htmlWebpackPlugin.options.meta.title_en %>">-->
+<!--  <meta name="description" lang="de" content="<%= htmlWebpackPlugin.options.meta.description_de %>">-->
+<!--  <meta name="description" lang="en" content="<%= htmlWebpackPlugin.options.meta.description_en %>">-->
+<!--  <meta name="keywords" lang="de" content="<%= htmlWebpackPlugin.options.meta.keywords_de %>">-->
+<!--  <meta name="keywords" lang="en" content="<%= htmlWebpackPlugin.options.meta.keywords_en %>">-->
+<!--  <meta name="author" content="<%= htmlWebpackPlugin.options.meta.author %>">-->
+<!--  <meta name="url" content="<%= htmlWebpackPlugin.options.meta.url %>">-->
+<!--  <meta name="identifier-URL" content="<%= htmlWebpackPlugin.options.meta.url %>">-->
+  <meta charset="utf-8">
+  <meta name="robots" content="index,follow">
+  <link rel='canonical' href='VITE test'>
+<!--  <link rel='canonical' href='<%= htmlWebpackPlugin.options.meta.url %>'>-->
+  <link rel="icon" type="image/png" sizes="96x96" href="/favicon.png">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+
+  <!-- Fonts -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+
+<!--  <meta property="og:title" content="<%= htmlWebpackPlugin.options.meta.title_de %>" />-->
+<!--  <meta property="og:description" content="<%= htmlWebpackPlugin.options.meta.description_de %>" />-->
+<!--  <meta property="og:type" content="Website" />-->
+<!--  <meta property="og:url" content="<%= htmlWebpackPlugin.options.meta.url %>" />-->
+<!--  <meta property="og:image" content="<%= htmlWebpackPlugin.options.meta.url %>/img/gradido-wallet-650-400.jpg" />-->
+
+<!--  <meta lang="de" name="twitter:title" content="<%= htmlWebpackPlugin.options.meta.title_de %>">-->
+<!--  <meta lang="en" name="twitter:title" content="<%= htmlWebpackPlugin.options.meta.title_en %>">-->
+<!--  <meta lang="de" name="twitter:description" content="<%= htmlWebpackPlugin.options.meta.description_de %>">-->
+<!--  <meta lang="en" name="twitter:description" content="<%= htmlWebpackPlugin.options.meta.description_en %>">-->
+<!--  <meta name="twitter:image" content="<%= htmlWebpackPlugin.options.meta.url %>/img/gradido-wallet-650-400.jpg">-->
+  <meta name="twitter:card" content="summary_large_image">
+
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.js"></script>
+<!-- built files will be auto injected -->
+</body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -4,10 +4,10 @@
  "private": true,
  "scripts": {
    "start": "node run/server.js",
-    "serve": "vue-cli-service serve --open",
-    "build": "vue-cli-service build",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
    "postbuild": "find build -type f -regex '.*\\.\\(html\\|js\\|css\\|svg\\|json\\)' -exec gzip -9 -k {} +",
-    "dev": "yarn run serve",
    "analyse-bundle": "yarn build && webpack-bundle-analyzer build/webpack.stats.json",
    "lint": "eslint --max-warnings=0 --ext .js,.vue,.json .",
    "stylelint": "stylelint --max-warnings=0 '**/*.{scss,vue}'",
@ -18,9 +18,11 @@
    "@babel/core": "^7.13.13",
    "@babel/node": "^7.13.13",
    "@babel/preset-env": "^7.13.12",
-    "@vue/cli-plugin-unit-jest": "^4.5.12",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vitejs/plugin-vue2": "^2.3.1",
    "@vue/test-utils": "^1.1.3",
    "apollo-boost": "^0.4.9",
+    "autoprefixer": "^10.4.19",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^27.3.1",
    "babel-preset-vue": "^2.0.2",
@ -38,7 +40,7 @@
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-promise": "^4.3.1",
-    "eslint-plugin-vue": "^7.8.0",
+    "eslint-plugin-vue": "8.7.1",
    "express": "^4.17.1",
    "flatpickr": "^4.5.7",
    "flush-promises": "^1.0.2",
@ -53,7 +55,9 @@
    "regenerator-runtime": "^0.13.7",
    "uuid": "^9.0.0",
    "vee-validate": "^3.4.5",
-    "vue": "2.6.12",
+    "vite": "3.2.10",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vue": "2.7.16",
    "vue-apollo": "^3.0.7",
    "vue-avatar": "^2.3.3",
    "vue-flatpickr-component": "^8.1.2",
@ -70,11 +74,7 @@
  "devDependencies": {
    "@apollo/client": "^3.7.4",
    "@intlify/eslint-plugin-vue-i18n": "^1.4.0",
-    "@vue/cli-plugin-babel": "^3.7.0",
-    "@vue/cli-plugin-eslint": "^3.7.0",
-    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
-    "babel-eslint": "^10.1.0",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-transform-require-context": "^0.1.1",
    "cross-env": "^7.0.3",
@ -84,12 +84,10 @@
    "postcss-html": "^1.3.0",
    "postcss-scss": "^4.0.3",
    "sass": "1.32.13",
-    "sass-loader": "^10",
    "stats-webpack-plugin": "^0.7.0",
    "stylelint": "^14.5.3",
    "stylelint-config-recommended-vue": "^1.3.0",
    "stylelint-config-standard-scss": "^3.0.0",
-    "vue-cli-plugin-i18n": "^1.0.1",
    "vue-html-webpack-plugin": "^3.2.2",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-analyzer": "^4.5.0"
--- a/frontend/run/server.js
+++ b/frontend/run/server.js
@ -4,7 +4,7 @@ const path = require('path')

 // Host & Port
 const hostname = '127.0.0.1'
-const port = process.env.PORT || 3000
+const port = import.meta.env.PORT || 3000

 // Express Server
 const app = express()
--- a/frontend/src/assets/scss/custom/_variables.scss
+++ b/frontend/src/assets/scss/custom/_variables.scss
@ -978,4 +978,4 @@ $btn-border-radius-sm: $input-border-radius !default;

 // Import Bootstrap variable defaults

-@import "~bootstrap/scss/variables";
+@import "bootstrap/scss/variables";
--- a/frontend/src/assets/scss/gradido.scss
+++ b/frontend/src/assets/scss/gradido.scss
@ -1,55 +1,55 @@
 // Bootstrap (4.5.3) functions

-@import "~bootstrap/scss/functions";
+@import "bootstrap/scss/functions";
@import "custom/variables";

 // @import "~bootstrap/scss/variables"; wird am
 // ende der custom/variables angehangen

 // Bootstrap (4.5.3) mixins
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/mixins";

 // Bootstrap (4.5.3) components

-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/code";
-@import "~bootstrap/scss/custom-forms";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/code";
+@import "bootstrap/scss/custom-forms";

 // @import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
+@import "bootstrap/scss/forms";

 // @import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/input-group";
-@import "~bootstrap/scss/list-group";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/input-group";
+@import "bootstrap/scss/list-group";

 // @import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/print";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/tooltip";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/bootstrap-grid";
-@import "~bootstrap/scss/bootstrap-reboot";
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/print";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap";

 // Bootstrap-vue (2.21.1) scss
-@import "~bootstrap-vue/src/index";
+@import "bootstrap-vue/src/index";
@import "gradido-template";
@import "gradido-template-dark";
--- a/frontend/src/components/GddSend/TransactionConfirmationSend.vue
+++ b/frontend/src/components/GddSend/TransactionConfirmationSend.vue
@ -66,7 +66,7 @@
  </div>
 </template>
 <script>
-import { COMMUNITY_NAME } from '@/config'
+import CONFIG from '@/config'

 export default {
  name: 'TransactionConfirmationSend',
@ -79,7 +79,7 @@ export default {
    targetCommunity: {
      type: Object,
      default: function () {
-        return { uuid: '', name: COMMUNITY_NAME }
+        return { uuid: '', name: CONFIG.COMMUNITY_NAME }
      },
    },
  },
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@ -144,7 +144,7 @@ import InputAmount from '@/components/Inputs/InputAmount'
 import InputTextarea from '@/components/Inputs/InputTextarea'
 import CommunitySwitch from '@/components/CommunitySwitch.vue'
 import { user } from '@/graphql/queries'
-import { COMMUNITY_NAME } from '@/config'
+import CONFIG from '@/config'

 export default {
  name: 'TransactionForm',
@ -163,7 +163,7 @@ export default {
    targetCommunity: {
      type: Object,
      default: function () {
-        return { uuid: '', name: COMMUNITY_NAME }
+        return { uuid: '', name: CONFIG.COMMUNITY_NAME }
      },
    },
  },
--- a/frontend/src/config/index.js
+++ b/frontend/src/config/index.js
@ -15,64 +15,65 @@ const constants = {

 const version = {
  APP_VERSION: pkg.version,
-  BUILD_COMMIT: process.env.BUILD_COMMIT ?? null,
+  BUILD_COMMIT: import.meta.env.BUILD_COMMIT ?? null,
  // self reference of `version.BUILD_COMMIT` is not possible at this point, hence the duplicate code
-  BUILD_COMMIT_SHORT: (process.env.BUILD_COMMIT ?? '0000000').slice(0, 7),
+  BUILD_COMMIT_SHORT: (import.meta.env.BUILD_COMMIT ?? '0000000').slice(0, 7),
 }

 const features = {
-  GMS_ACTIVE: process.env.GMS_ACTIVE ?? false,
-  HUMHUB_ACTIVE: process.env.HUMHUB_ACTIVE ?? false,
+  GMS_ACTIVE: import.meta.env.GMS_ACTIVE ?? false,
+  HUMHUB_ACTIVE: import.meta.env.HUMHUB_ACTIVE ?? false,
 }

 const environment = {
-  NODE_ENV: process.env.NODE_ENV,
-  DEBUG: process.env.NODE_ENV !== 'production' ?? false,
-  PRODUCTION: process.env.NODE_ENV === 'production' ?? false,
-  DEFAULT_PUBLISHER_ID: process.env.DEFAULT_PUBLISHER_ID ?? 2896,
-  PORT: process.env.PORT ?? 3000,
+  NODE_ENV: import.meta.env.NODE_ENV,
+  DEBUG: import.meta.env.NODE_ENV !== 'production' ?? false,
+  PRODUCTION: import.meta.env.NODE_ENV === 'production' ?? false,
+  DEFAULT_PUBLISHER_ID: import.meta.env.DEFAULT_PUBLISHER_ID ?? 2896,
+  PORT: import.meta.env.PORT ?? 3000,
 }

-const COMMUNITY_HOST = process.env.COMMUNITY_HOST ?? 'localhost'
-const URL_PROTOCOL = process.env.URL_PROTOCOL ?? 'http'
-const COMMUNITY_URL = process.env.COMMUNITY_URL ?? `${URL_PROTOCOL}://${COMMUNITY_HOST}`
+const COMMUNITY_HOST = import.meta.env.COMMUNITY_HOST ?? 'localhost'
+const URL_PROTOCOL = import.meta.env.URL_PROTOCOL ?? 'http'
+const COMMUNITY_URL = import.meta.env.COMMUNITY_URL ?? `${URL_PROTOCOL}://${COMMUNITY_HOST}`

 const endpoints = {
-  GRAPHQL_URI: COMMUNITY_URL + (process.env.GRAPHQL_PATH ?? '/graphql'),
+  GRAPHQL_URI: COMMUNITY_URL + (import.meta.env.GRAPHQL_PATH ?? '/graphql'),
  ADMIN_AUTH_URL:
-    COMMUNITY_URL + (process.env.ADMIN_AUTH_PATH ?? '/admin/authenticate?token={token}'),
+    COMMUNITY_URL + (import.meta.env.ADMIN_AUTH_PATH ?? '/admin/authenticate?token={token}'),
 }

 const community = {
-  COMMUNITY_NAME: process.env.COMMUNITY_NAME ?? 'Gradido Entwicklung',
+  COMMUNITY_NAME: import.meta.env.COMMUNITY_NAME ?? 'Gradido Entwicklung',
  COMMUNITY_URL: COMMUNITY_URL,
-  COMMUNITY_REGISTER_URL: COMMUNITY_URL + (process.env.COMMUNITY_REGISTER_PATH ?? '/register'),
+  COMMUNITY_REGISTER_URL: COMMUNITY_URL + (import.meta.env.COMMUNITY_REGISTER_PATH ?? '/register'),
  COMMUNITY_DESCRIPTION:
-    process.env.COMMUNITY_DESCRIPTION ?? 'Die lokale Entwicklungsumgebung von Gradido.',
-  COMMUNITY_SUPPORT_MAIL: process.env.COMMUNITY_SUPPORT_MAIL ?? 'support@supportmail.com',
+    import.meta.env.COMMUNITY_DESCRIPTION ?? 'Die lokale Entwicklungsumgebung von Gradido.',
+  COMMUNITY_SUPPORT_MAIL: import.meta.env.COMMUNITY_SUPPORT_MAIL ?? 'support@supportmail.com',
 }

 const meta = {
-  META_URL: process.env.META_URL ?? 'http://localhost',
-  META_TITLE_DE: process.env.META_TITLE_DE ?? 'Gradido – Dein Dankbarkeitskonto',
-  META_TITLE_EN: process.env.META_TITLE_EN ?? 'Gradido - Your gratitude account',
+  META_URL: import.meta.env.META_URL ?? 'http://localhost',
+  META_TITLE_DE: import.meta.env.META_TITLE_DE ?? 'Gradido – Dein Dankbarkeitskonto',
+  META_TITLE_EN: import.meta.env.META_TITLE_EN ?? 'Gradido - Your gratitude account',
  META_DESCRIPTION_DE:
-    process.env.META_DESCRIPTION_DE ??
+    import.meta.env.META_DESCRIPTION_DE ??
    'Dankbarkeit ist die Währung der neuen Zeit. Immer mehr Menschen entfalten ihr Potenzial und gestalten eine gute Zukunft für alle.',
  META_DESCRIPTION_EN:
-    process.env.META_DESCRIPTION_EN ??
+    import.meta.env.META_DESCRIPTION_EN ??
    'Gratitude is the currency of the new age. More and more people are unleashing their potential and shaping a good future for all.',
  META_KEYWORDS_DE:
-    process.env.META_KEYWORDS_DE ??
+    import.meta.env.META_KEYWORDS_DE ??
    'Grundeinkommen, Währung, Dankbarkeit, Schenk-Ökonomie, Natürliche Ökonomie des Lebens, Ökonomie, Ökologie, Potenzialentfaltung, Schenken und Danken, Kreislauf des Lebens, Geldsystem',
  META_KEYWORDS_EN:
-    process.env.META_KEYWORDS_EN ??
+    import.meta.env.META_KEYWORDS_EN ??
    'Basic Income, Currency, Gratitude, Gift Economy, Natural Economy of Life, Economy, Ecology, Potential Development, Giving and Thanking, Cycle of Life, Monetary System',
-  META_AUTHOR: process.env.META_AUTHOR ?? 'Bernd Hückstädt - Gradido-Akademie',
+  META_AUTHOR: import.meta.env.META_AUTHOR ?? 'Bernd Hückstädt - Gradido-Akademie',
 }

 // Check config version
-constants.CONFIG_VERSION.CURRENT = process.env.CONFIG_VERSION ?? constants.CONFIG_VERSION.DEFAULT
+constants.CONFIG_VERSION.CURRENT =
+  import.meta.env.CONFIG_VERSION ?? constants.CONFIG_VERSION.DEFAULT
 if (
  ![constants.CONFIG_VERSION.EXPECTED, constants.CONFIG_VERSION.DEFAULT].includes(
    constants.CONFIG_VERSION.CURRENT,
@ -93,4 +94,4 @@ const CONFIG = {
  ...meta,
 }

-module.exports = CONFIG
+export default CONFIG
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@ -1,24 +1,14 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
+import de from './locales/de.json'
+import en from './locales/en.json'
+import es from './locales/es.json'
+import fr from './locales/fr.json'
+import nl from './locales/nl.json'
+import tr from './locales/tr.json'

 Vue.use(VueI18n)

-function loadLocaleMessages() {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages = {}
-  locales.keys().forEach((key) => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = {
-        validations: require(`vee-validate/dist/locale/${locale}`),
-        ...locales(key),
-      }
-    }
-  })
-  return messages
-}
-
 const numberFormats = {
  en: {
    decimal: {
@ -249,7 +239,7 @@ const dateTimeFormats = {
 export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
-  messages: loadLocaleMessages(),
+  messages: { de, en, es, fr, tr, nl },
  numberFormats,
  dateTimeFormats,
 })
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@ -38,6 +38,7 @@ if (!store) {
  )
 }

+console.log('TEST')
 /* eslint-disable no-new */
 new Vue({
  el: '#app',
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@ -39,7 +39,7 @@ loadAllRules(i18nMock, { query: jest.fn().mockResolvedValue({ data: { checkUsern
 global.localVue = createLocalVue()

 // switch of warnings from bootstrap vue
-global.process.env.BOOTSTRAP_VUE_NO_WARN = true
+global.import.meta.env.BOOTSTRAP_VUE_NO_WARN = true

 global.localVue.use(BootstrapVue)
 global.localVue.use(Vuex)
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@ -0,0 +1,20 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue2'
+import commonjs from "vite-plugin-commonjs";
+
+const path = require('path')
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: 3000,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      assets: path.join(__dirname, 'src/assets'),
+    },
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+  },
+  plugins: [vue(), commonjs()],
+})
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@ -33,11 +33,11 @@ module.exports = {
      new Dotenv(),
      new webpack.DefinePlugin({
        // Those are Environment Variables transmitted via Docker and are only available when defined here aswell
-        // 'process.env.DOCKER_WORKDIR': JSON.stringify(process.env.DOCKER_WORKDIR),
-        // 'process.env.BUILD_DATE': JSON.stringify(process.env.BUILD_DATE),
-        // 'process.env.BUILD_VERSION': JSON.stringify(process.env.BUILD_VERSION),
-        'process.env.BUILD_COMMIT': JSON.stringify(CONFIG.BUILD_COMMIT),
-        // 'process.env.PORT': JSON.stringify(process.env.PORT),
+        // 'import.meta.env.DOCKER_WORKDIR': JSON.stringify(import.meta.env.DOCKER_WORKDIR),
+        // 'import.meta.env.BUILD_DATE': JSON.stringify(import.meta.env.BUILD_DATE),
+        // 'import.meta.env.BUILD_VERSION': JSON.stringify(import.meta.env.BUILD_VERSION),
+        'import.meta.env.BUILD_COMMIT': JSON.stringify(CONFIG.BUILD_COMMIT),
+        // 'import.meta.env.PORT': JSON.stringify(import.meta.env.PORT),
      }),
      // generate webpack stats to allow analysis of the bundlesize
      new StatsPlugin('webpack.stats.json'),
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock