From b0ded58d1e21d12ec6e3fa9dcd470c08ad8a662e Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Mon, 15 May 2023 19:08:49 -0300
Subject: [PATCH] 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          |  2 ++
 src/frontend/dev.Dockerfile |  2 +-
 src/frontend/package.json   |  3 ++-
 src/frontend/vite.config.ts | 54 ++++++++++++++++++-------------------
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index d9ba84030..755d0794d 100644
--- a/docker-compose.yml
+++ b/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:
diff --git a/src/frontend/dev.Dockerfile b/src/frontend/dev.Dockerfile
index 4773fc2b9..8678b02dd 100644
--- a/src/frontend/dev.Dockerfile
+++ b/src/frontend/dev.Dockerfile
@@ -23,4 +23,4 @@ RUN chmod +x set_proxy.sh && \
 USER node
 
 RUN npm install --loglevel warn
-CMD ["npm", "start"]
\ No newline at end of file
+CMD ["npm", "run", "dev:docker"]
\ No newline at end of file
diff --git a/src/frontend/package.json b/src/frontend/package.json
index fd8cc02db..6315deb05 100644
--- a/src/frontend/package.json
+++ b/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"
     }
-}
+}
\ No newline at end of file
diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts
index 1eec534d6..f715e4e5b 100644
--- a/src/frontend/vite.config.ts
+++ b/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
-            }
-        },
-    };
-});
\ No newline at end of file
+  return {
+    build: {
+      outDir: "build",
+    },
+    plugins: [react()],
+    server: {
+      port: 3000,
+      proxy: {
+        ...proxyTargets,
+      },
+    },
+  };
+});