agstack
diff --git a/‎index.html‎
Lines changed: 1 addition & 0 deletions b/‎index.html‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎nginx/nginx.conf‎
Lines changed: 9 additions & 0 deletions b/‎nginx/nginx.conf‎
Lines changed: 9 additions & 0 deletions
diff --git a/‎src/hooks/useFetch.ts‎
Lines changed: 1 addition & 1 deletion b/‎src/hooks/useFetch.ts‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎src/vite-env.d.ts‎
Lines changed: 10 additions & 2 deletions b/‎src/vite-env.d.ts‎
Lines changed: 10 additions & 2 deletions
diff --git a/‎vite.config.ts‎
Lines changed: 10 additions & 0 deletions b/‎vite.config.ts‎
Lines changed: 10 additions & 0 deletions
@@ -7,6 +7,7 @@
     <title>OpenAgri-UserDashboard + TS</title>
   </head>
   <body>
+    <script src="/env-config.js"></script>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 
@@ -28,6 +28,15 @@ server {
     add_header                  Access-Control-Allow-Origin *;
     add_header                  Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PATCH";
 
+    # This location block will serve the dynamic JavaScript file.
+    # We are using Nginx's `return` directive to dynamically serve
+    # the content with the environment variables replaced at runtime.
+    location = /env-config.js {
+        default_type application/javascript;
+        add_header Cache-Control "no-store";
+        return 200 'window.env = { "VITE_API_URL": "${VITE_API_URL}" };';
+    }
+
 
     # --------------------------------------------------------------------
     # Core SPA Routing:
 
@@ -17,7 +17,7 @@ const useFetch = <FetchResponse = any>(
     const [error, setError] = useState<Error | null>(null);
 
     const { session, setSession } = useSession();
-    const apiUrl = import.meta.env.VITE_API_URL;
+    const apiUrl = window.env?.VITE_API_URL;
 
     const fetchData = async (dynamicBody = {}, dynamicHeader = {}) => {
         setLoading(true);
 
@@ -3,7 +3,15 @@
 interface ImportMetaEnv {
     readonly VITE_API_URL: string;
   }
-  
+
   interface ImportMeta {
     readonly env: ImportMetaEnv;
-  }
+  }
+
+  interface Window {
+    // This is the custom object we're adding to the window object at runtime
+    // It contains the variables we're dynamically injecting.
+    env: {
+        VITE_API_URL: string;
+    }
+}
@@ -25,6 +25,16 @@ export default defineConfig({
       globPatterns: ['**/*.{js,css,html,svg,png,ico}'],
       cleanupOutdatedCaches: true,
       clientsClaim: true,
+      // also make sure it's not pre-cached
+      globIgnores: ['**/env-config.js'],
+      // NEVER cache the runtime env file
+      runtimeCaching: [
+        {
+          urlPattern: /\/env-config\.js$/,
+          handler: 'NetworkOnly', // or 'NetworkFirst' with low cache
+        },
+      ],
+
     },
 
     devOptions: {