frontend: use vite's mechanism for env variables to fill window.envir…

…onment

That we don't have locally cached environment.js files breaking the development setup.
Sadly we still use vue-cli to run our tests, so there the vite mechanism does
not work and we have to maintain one additional environment.js.

In production, we compose the environment.js anyway in the configmap, thus we don't
have to consider the production case in dev-environment.js.

Now we can also remove the check in index.html.
In a production environment, you have to check yourself that you have all the needed configurations
set.

closes #3267

frontend/.gitignore

@@ -9,7 +9,6 @@ selenium-debug.log
 # local env files
 .env.local
 .env.*.local
-public/environment.js
 
 # Log files
 npm-debug.log*

frontend/docker-setup.sh

@@ -1,13 +1,6 @@
 #!/bin/bash
 set -euo pipefail
 
-BASEDIR=$(dirname "$0")
-ENV_FILE=$BASEDIR"/public/environment.js"
-
-if [ ! -f "$ENV_FILE" ]; then
-    cp $BASEDIR/public/environment.docker.dist "$ENV_FILE"
-fi
-
 npm ci --verbose
 
 if [ "$CI" = 'true' ] ; then

frontend/index.html

@@ -55,48 +55,6 @@
 
     <div id="app"></div>
     <script src="/environment.js" lang="application/javascript"></script>
-    <script>
-      if ('environment' in window) {
-        const requiredKeys = [
-          'API_ROOT_URL',
-          'COOKIE_PREFIX',
-          'PRINT_URL',
-          'SENTRY_FRONTEND_DSN',
-          'SHARED_COOKIE_DOMAIN',
-          'DEPLOYMENT_TIME',
-          'VERSION',
-          'VERSION_LINK_TEMPLATE',
-          'TERMS_OF_SERVICE_LINK_TEMPLATE',
-          'LOGIN_INFO_TEXT_KEY',
-        ]
-
-        const optionalKeys = [
-          'SENTRY_ENVIRONMENT',
-          'FEATURE_DEVELOPER',
-          'RECAPTCHA_SITE_KEY',
-        ]
-
-        const missingKeys = requiredKeys.filter(
-          (key) => !Object.keys(window.environment).includes(key)
-        )
-        if (missingKeys.length > 0) {
-          console.error(`Missing key(s): "${missingKeys.join(
-            ','
-          )}" in frontend/public/environment.js
-  You can look up example values in frontend/public/environment.dist`)
-        }
-
-        const additionalKeys = Object.keys(window.environment).filter(
-          (key) => !requiredKeys.includes(key) && !optionalKeys.includes(key)
-        )
-        if (additionalKeys.length > 0) {
-          console.error(`Additional defined key(s): "${additionalKeys.join(
-            ','
-          )}" in frontend/public/environment.js
-  Maybe you forgot to add them here to the requiredKeys`)
-        }
-      }
-    </script>
     <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>

frontend/public/environment.js

@@ -0,0 +1,5 @@
+/**
+ * This is a placeholder.
+ * In production, this file is filled with the values for window.environment.
+ * In development, window.environment is filled in src/dev-environment.js
+ */

frontend/src/dev-environment.js

@@ -0,0 +1,21 @@
+// you can overwrite the env variables locally in frontend/env.local
+// @see https://vitejs.dev/guide/env-and-mode.html
+if (!window.environment) {
+  const env = import.meta.env
+  window.environment = {
+    API_ROOT_URL: env.VITE_API_ROOT_URL ?? 'http://localhost:3001',
+    COOKIE_PREFIX: env.VITE_COOKIE_PREFIX ?? 'localhost_',
+    PRINT_URL: env.VITE_PRINT_URL ?? 'http://localhost:3003',
+    SENTRY_FRONTEND_DSN: env.VITE_SENTRY_FRONTEND_DSN,
+    SENTRY_ENVIRONMENT: env.VITE_SENTRY_ENVIRONMENT ?? 'http://localhost:3000',
+    SHARED_COOKIE_DOMAIN: env.VITE_SHARED_COOKIE_DOMAIN ?? 'localhost',
+    DEPLOYMENT_TIME: env.VITE_DEPLOYMENT_TIME ?? '',
+    VERSION: env.VITE_VERSION ?? '',
+    VERSION_LINK_TEMPLATE:
+      env.VITE_VERSION_LINK_TEMPLATE ??
+      'https://github.com/ecamp/ecamp3/commit/{version}',
+    FEATURE_DEVELOPER: (env.VITE_FEATURE_DEVELOPER ?? 'true') === 'true',
+    LOGIN_INFO_TEXT_KEY: env.VITE_LOGIN_INFO_TEXT_KEY ?? 'dev',
+  }
+}
+export const getEnv = () => window.environment

frontend/src/main.js

@@ -1,3 +1,5 @@
+//getEnv needs to be imported first
+import { getEnv } from '@/dev-environment.js'
 import Vue from 'vue'
 import App from './App.vue'
 import router from '@/router.js'
@@ -20,6 +22,8 @@ import 'vue-toastification/dist/index.css'
 
 import { Resize } from 'vuetify/lib/directives'
 
+getEnv()
+
 if (window.environment && window.environment.SENTRY_FRONTEND_DSN) {
   const environment = window.environment.SENTRY_ENVIRONMENT ?? 'http://localhost:3000'
   Sentry.init({