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,7 +31,10 @@ 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

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
+          }
+        },
+      },
+    },
+  },
 });