fix: availability of env variables

.env.example

@@ -1 +1,4 @@
-SERVER_ADDRESS = serveradress
+VITE_SERVER_ADDRESS = serveradress #ohne https und ohne pfad
+VITE_IMPRINT_LINK = https://mywebsite-imprint-url
+VITE_PRIVACY_LINK = https://mywebsite-privacy-url
+VITE_CUSTOM_LOGIN_MESSAGE = betrieben von xy

.env.production

@@ -0,0 +1,4 @@
+VITE_SERVER_ADDRESS = __SERVERADDRESS__
+VITE_IMPRINT_LINK = __IMPRINTLINK__
+VITE_PRIVACY_LINK = __PRIVACYLINK__
+VITE_CUSTOM_LOGIN_MESSAGE = __CUSTOMLOGINMESSAGE__

Dockerfile

@@ -19,4 +19,7 @@ COPY ./nginx.conf /etc/nginx/nginx.conf
 
 EXPOSE 80
 
-CMD ["nginx", "-g", "daemon off;"]
+COPY ./entrypoint.sh /entrypoint.sh
+RUN apk add --no-cache dos2unix
+RUN dos2unix /entrypoint.sh && chmod +x /entrypoint.sh
+ENTRYPOINT [ "/entrypoint.sh" ]

README.md

@@ -31,10 +31,13 @@ services:
     restart: unless-stopped
 
     #environment:
-    #  - SERVER_ADRESS=<backend_host> # wichtig: ohne https:// bzw http://
+    #  - SERVERADRESS=<backend_host> # wichtig: ohne https:// bzw http:// und ohne pfad
+    #  - IMPRINTLINK=https://mywebsite-imprint-url
+    #  - PRIVACYLINK=https://mywebsite-privacy-url
+    #  - CUSTOMLOGINMESSAGE=betrieben von xy
     #volumes:
-    #  - <volume|local path>/myfavicon.png:/app/public/favicon.png
-    #  - <volume|local path>/mylogo.png:/app/public/logo.png
+    #  - <volume|local path>/myfavicon.png:/usr/share/nginx/html/favicon.png
+    #  - <volume|local path>/mylogo.png:/usr/share/nginx/html/Logo.png
 ```
 
 Wenn keine Server-Adresse angegeben wird, wird versucht das Backend unter der URL des Frontends zu erreichen. Dazu muss das Backend auf der gleichen URL wie das Frontend laufen. Zur Unterscheidung von Frontend und Backend bei gleicher URL müssen alle Anfragen mit dem PathPrefix `/api` an das Backend weitergeleitet werden.

entrypoint.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+keys="SERVERADDRESS IMPRINTLINK PRIVACYLINK CUSTOMLOGINMESSAGE"
+
+# Replace env vars in files served by NGINX
+for file in /usr/share/nginx/html/assets/config-*.js
+do
+  echo "Processing $file ...";
+  for key in $keys
+  do
+    # Get environment variable
+    value=$(eval echo "\$$key")
+    echo "replace $key by $value"
+
+    # replace __[variable_name]__ value with environment variable
+    sed -i 's|__'"$key"'__|'"$value"'|g' $file
+  done
+done
+
+nginx -g 'daemon off;'

src/components/FormBottomBar.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="flex flex-col text-gray-400 text-sm mt-4 items-center">
     <div class="flex flex-row gap-2 justify-center">
-      <a href="https://jk-effects.com/privacy" target="_blank">Datenschutz</a>
-      <a href="https://jk-effects.com/imprint" target="_blank">Impressum</a>
+      <a v-if="config.imprint_link" :href="config.imprint_link" target="_blank">Datenschutz</a>
+      <a v-if="config.privacy_link" :href="config.privacy_link" target="_blank">Impressum</a>
     </div>
+    <p v-if="config.custom_login_message">{{ config.custom_login_message }}</p>
     <a href="https://jk-effects.com" target="_blank"> &copy; Admin-Portal by JK Effects </a>
   </div>
-</template>
+</template>
+
+<script setup lang="ts">
+import { config } from '../config'
+</script>

src/components/UserMenu.vue

@@ -26,7 +26,7 @@
             </RouterLink>
           </MenuItem>
           <MenuItem v-slot="{ close }">
-            <RouterLink to="/docs">
+            <RouterLink to="/docs" target="_blank">
               <button button primary @click="close">Dokumentation</button>
             </RouterLink>
           </MenuItem>

src/config.ts

@@ -0,0 +1,13 @@
+export interface Config {
+  server_address: string;
+  imprint_link: string;
+  privacy_link: string;
+  custom_login_message: string;
+}
+
+export const config: Config = {
+  server_address: import.meta.env.VITE_SERVER_ADDRESS,
+  imprint_link: import.meta.env.VITE_IMPRINT_LINK,
+  privacy_link: import.meta.env.VITE_PRIVACY_LINK,
+  custom_login_message: import.meta.env.VITE_CUSTOM_LOGIN_MESSAGE,
+};

src/serverCom.ts

@@ -3,10 +3,11 @@ import { isAuthenticatedPromise, type Payload } from "./router/authGuard";
 import router from "./router";
 import { useNotificationStore } from "./stores/notification";
 import { EventSourcePolyfill } from "event-source-polyfill";
+import { config } from "./config";
 
 let devMode = process.env.NODE_ENV === "development";
 
-let host = devMode ? "localhost:5000" : process.env.SERVER_ADDRESS || "";
+let host = devMode ? "localhost:5000" : (config.server_address ?? "");
 let url = devMode ? "http://" + host : (host ? "https://" : "") + host;
 
 const http = axios.create({

vite.config.ts

@@ -41,4 +41,20 @@ export default defineConfig({
       $: fileURLToPath(new URL("./docs", import.meta.url)),
     },
   },
+  build: {
+    rollupOptions: {
+      output: {
+        // Define the main output bundle (e.g., for your application)
+        entryFileNames: "[name]-[hash].js",
+        // Define the directory where the main bundle should be output
+        dir: "dist",
+        // Create a separate output bundle for your specific file
+        manualChunks(id) {
+          if (id.endsWith("src/config.ts")) {
+            return "config"; // This will create a separate bundle for config-[hash].js
+          }
+        },
+      },
+    },
+  },
 });