Refactor configuration of client software

Author: esadakcam

client/.env.development

@@ -1,10 +1,5 @@
-ARG NODE_ENV=production
 FROM node:22-alpine AS build
 
-ARG NODE_ENV
-ENV NODE_ENV=$NODE_ENV
-
-RUN echo "Building in $NODE_ENV mode"
 WORKDIR /app
 
 COPY package*.json ./

client/.env.production

@@ -0,0 +1,4 @@
+{
+  "redirectUri": "http://localhost:5173",
+  "clientId": "60a9e442420a386f2ddff0f60ed0801dd7e826f0710507e982d5afe6aa054334"
+}

client/Dockerfile

@@ -8,6 +8,13 @@ server {
         try_files $uri /index.html;
     }
 
+    location /config.json {
+        try_files $uri =404;
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+        add_header Expires "0";
+    }
+
     location /api/ {
         proxy_pass http://apigw-service/;
         proxy_set_header Host $host;

client/config.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "npx vite build --mode $NODE_ENV",
+    "build": "npx vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
@@ -22,6 +22,7 @@
     "@types/babel__generator": "^7.6.8",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.6",
+    "@types/node": "^24.0.10",
     "@types/prop-types": "^15.7.13",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

client/nginx.conf

@@ -4,18 +4,41 @@ import { RouterProvider } from "react-router-dom";
 import { AuthProvider } from "react-oidc-context";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import { oidcConfig } from "./oidcConfig";
 import { router } from "./routes/routes";
 import "./index.css";
 
 const queryClient = new QueryClient();
 
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <AuthProvider {...oidcConfig}>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-      </QueryClientProvider>
-    </AuthProvider>
-  </StrictMode>
-);
+(async () => {
+  const gitlabConfig = await fetch("/config.json")
+    .then((response) => response.json())
+    .then((config) => config as { redirectUri: string; clientId: string });
+
+  const oidcConfig = {
+    authority: "https://gitlab.lrz.de",
+    response_type: "code",
+    scope: "read_user",
+    onSigninCallback: () => {
+      const url = new URL(window.location.href);
+      url.searchParams.delete("code");
+      url.searchParams.delete("state");
+      window.history.replaceState(
+        {},
+        document.title,
+        url.pathname + url.search
+      );
+    },
+    redirect_uri: gitlabConfig.redirectUri,
+    client_id: gitlabConfig.clientId,
+  };
+
+  createRoot(document.getElementById("root")!).render(
+    <StrictMode>
+      <AuthProvider {...oidcConfig}>
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
+      </AuthProvider>
+    </StrictMode>
+  );
+})();

client/package-lock.json

@@ -1,8 +1,21 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { readFileSync } from "fs";
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    {
+      name: "serve-config",
+      configureServer(server) {
+        server.middlewares.use("/config.json", (req, res) => {
+          const config = readFileSync("./config.json", "utf-8");
+          res.setHeader("Content-Type", "application/json");
+          res.end(config);
+        });
+      },
+    },
+  ],
   optimizeDeps: {
     exclude: ["lucide-react"],
   },