feat(docker-compose.yml): add VITE_PROXY_TARGET environment variable to frontend service

feat(frontend/dev.Dockerfile): change npm start command to npm run dev:docker
feat(frontend/package.json): add dev:docker script to run vite with host 0.0.0.0
feat(frontend/vite.config.ts): use environment variable to determine the target for proxying requests

docker-compose.yml

@@ -17,6 +17,8 @@ services:
       dockerfile: ./dev.Dockerfile
       args:
         - BACKEND_URL=http://backend:7860
+    environment:
+      - VITE_PROXY_TARGET=http://backend:7860
     ports:
       - "3000:3000"
     volumes:

src/frontend/dev.Dockerfile

@@ -23,4 +23,4 @@ RUN chmod +x set_proxy.sh && \
 USER node
 
 RUN npm install --loglevel warn
-CMD ["npm", "start"]
+CMD ["npm", "run", "dev:docker"]

src/frontend/package.json

@@ -35,6 +35,7 @@
         "web-vitals": "^2.1.4"
     },
     "scripts": {
+        "dev:docker": "vite --host 0.0.0.0",
         "start": "vite",
         "build": "vite build",
         "serve": "vite preview"
@@ -76,4 +77,4 @@
         "typescript": "^5.0.2",
         "vite": "^4.3.5"
     }
-}
+}

src/frontend/vite.config.ts

@@ -1,34 +1,32 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react-swc';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
-const apiRoutes = [
-    '/all',
-    '/predict',
-    '^/validate/*',
-    '^/chat/*',
-];
+const apiRoutes = ["/all", "/predict", "^/validate/*", "^/chat/*"];
+
+// Use environment variable to determine the target.
+const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
 
 const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
-    proxyObj[route] = {
-        target: 'http://127.0.0.1:7860',
-        changeOrigin: true,
-        secure: false,
-        ws: true,
-    };
-    return proxyObj;
+  proxyObj[route] = {
+    target: target,
+    changeOrigin: true,
+    secure: false,
+    ws: true,
+  };
+  return proxyObj;
 }, {});
 
 export default defineConfig(() => {
-    return {
-        build: {
-            outDir: 'build',
-        },
-        plugins: [react()],
-        server: {
-            port: 3000,
-            proxy: {
-                ...proxyTargets
-            }
-        },
-    };
-});
+  return {
+    build: {
+      outDir: "build",
+    },
+    plugins: [react()],
+    server: {
+      port: 3000,
+      proxy: {
+        ...proxyTargets,
+      },
+    },
+  };
+});