feat: implement runtime config loading for frontend (#52)

atyrode · web-flow · commit f02d21b96301 · 2025-04-30T00:15:42.000+02:00
* fix: update AuthGate to use environment variable for Coder URL

- Modified AuthGate component to retrieve Coder URL from environment variable instead of hardcoding.
- Added new CODER_URL definition in env.d.ts for better configuration management.

* refactor: enhance Vite configuration to load environment variables

- Updated vite.config.mts to load environment variables based on the current mode, allowing for better configuration management.
- Made CODER_URL available through import.meta.env for improved flexibility in accessing environment-specific settings.

* fix: update AuthGate to use corrected environment variable for Coder URL

- Changed the environment variable reference in AuthGate from VITE_CODER_URL to CODER_URL for consistency with the updated configuration management.

* refactor: update Dockerfile and add startup script for application initialization

- Modified Dockerfile to copy and execute a new startup script instead of directly running the application.
- Introduced startup.sh to create a runtime configuration file with environment variables and start the application.
- Updated index.html to include the new runtime configuration script.
- Enhanced AuthGate component to utilize the runtime configuration for the Coder URL, providing fallback to environment variables.
- Added global TypeScript definitions for the runtime configuration interface.

* refactor: update runtime configuration file location and script reference

- Changed the directory for the runtime configuration file from /config to /assets in startup.sh.
- Updated index.html to reference the new location of the runtime configuration script.
diff --git a/Dockerfile b/Dockerfile
@@ -41,5 +41,9 @@ ENV PYTHONUNBUFFERED=1
 # Document the port number the container will expose
 EXPOSE 8000
 
-# Run the application
-CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]
+# Copy startup script
+COPY scripts/startup.sh /app/
+RUN chmod +x /app/startup.sh
+
+# Run the startup script
+CMD ["/app/startup.sh"]
diff --git a/scripts/startup.sh b/scripts/startup.sh
@@ -0,0 +1,13 @@
+#!/bin/bash
+set -e
+
+# Create runtime config with environment variables
+mkdir -p /app/frontend/dist/assets
+cat > /app/frontend/dist/assets/runtime-config.js <<EOL
+window.RUNTIME_CONFIG = {
+  CODER_URL: "${CODER_URL}"
+};
+EOL
+
+# Start the application
+exec uvicorn main:app --host 0.0.0.0 --port 8000
diff --git a/src/frontend/index.html b/src/frontend/index.html
@@ -10,6 +10,7 @@
 
     <title>Pad.ws</title>
     <link rel="icon" type="image/x-icon" href="/assets/images/favicon.png" />
+    <script src="/assets/runtime-config.js"></script>
   </head>
 
   <body>
diff --git a/src/frontend/src/AuthGate.tsx b/src/frontend/src/AuthGate.tsx
@@ -21,7 +21,8 @@ export default function AuthGate({ children }: { children: React.ReactNode }) {
     if (isAuthenticated === true && !coderAuthDone) {
       const iframe = document.createElement("iframe");
       iframe.style.display = "none";
-      const coderUrl = import.meta.env.CODER_URL;
+      // Use runtime config if available, fall back to import.meta.env
+      const coderUrl = window.RUNTIME_CONFIG?.CODER_URL || import.meta.env.CODER_URL;
       iframe.src = `${coderUrl}/api/v2/users/oidc/callback`;
       console.debug(`[pad.ws] (Silently) Priming Coder OIDC session for ${coderUrl}`);
 
diff --git a/src/frontend/src/global.d.ts b/src/frontend/src/global.d.ts
@@ -0,0 +1,6 @@
+interface Window {
+  RUNTIME_CONFIG?: {
+    CODER_URL: string;
+  };
+  ExcalidrawLib: any;
+}
