From 74b8b98cb269711e2d58150316f2987ce3fbb65e Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Fri, 21 Jun 2024 17:26:58 -0300
Subject: [PATCH] Two edges (#2249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix error on port frontend variable .env

* ✨ (constants.ts, vite.config.mts): add support for configurable LANGFLOW_HOST environment variable to allow dynamic backend URL configuration

* 🔧 (constants.ts, vite.config.mts): consolidate backend URL configuration into a single environment variable
---
 .env.example                                  |  5 +-
 src/frontend/src/constants/constants.ts       |  2 +-
 .../end-to-end/chatInputOutputUser.spec.ts    |  3 -
 .../tests/end-to-end/generalBugs.spec.ts      |  1 -
 .../tests/end-to-end/textInputOutput.spec.ts  |  1 -
 src/frontend/vite.config.mts                  | 59 +++++++++++--------
 6 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/.env.example b/.env.example
index 2725e3b67..dce98eb30 100644
--- a/.env.example
+++ b/.env.example
@@ -97,4 +97,7 @@ LANGFLOW_STORE_ENVIRONMENT_VARIABLES=
 
 # LIKE_WEBHOOK_URL
 #
-# LANGFLOW_LIKE_WEBHOOK_URL=
\ No newline at end of file
+# LANGFLOW_LIKE_WEBHOOK_URL=
+
+#BACKEND_URL=http://localhost:7860/
+BACKEND_URL=
\ No newline at end of file
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 7d95d7415..f10900910 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -568,7 +568,7 @@ export const ADMIN_HEADER_DESCRIPTION =
 
 export const BASE_URL_API = "/api/v1/";
 
-export const BACKEND_URL = "http://localhost:7860/";
+export const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:7860/";
 
 /**
  * URLs excluded from error retries.
diff --git a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
index 012259747..4de3c49e5 100644
--- a/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
+++ b/src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts
@@ -5,7 +5,6 @@ import path from "path";
 
 test("user must interact with chat with Input/Output", async ({ page }) => {
   if (!process.env.CI) {
-    dotenv.config();
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
 
@@ -107,7 +106,6 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
 
 test("user must be able to see output inspection", async ({ page }) => {
   if (!process.env.CI) {
-    dotenv.config();
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
 
@@ -161,7 +159,6 @@ test("user must be able to see output inspection", async ({ page }) => {
 
 test("user must be able to send an image on chat", async ({ page }) => {
   if (!process.env.CI) {
-    dotenv.config();
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
 
diff --git a/src/frontend/tests/end-to-end/generalBugs.spec.ts b/src/frontend/tests/end-to-end/generalBugs.spec.ts
index 104023a38..11ec86af4 100644
--- a/src/frontend/tests/end-to-end/generalBugs.spec.ts
+++ b/src/frontend/tests/end-to-end/generalBugs.spec.ts
@@ -42,7 +42,6 @@ test("should interact with api request", async ({ page }) => {
 
 test("erase button should clear the chat messages", async ({ page }) => {
   if (!process.env.CI) {
-    dotenv.config();
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
 
diff --git a/src/frontend/tests/end-to-end/textInputOutput.spec.ts b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
index 163ee528e..586e1361e 100644
--- a/src/frontend/tests/end-to-end/textInputOutput.spec.ts
+++ b/src/frontend/tests/end-to-end/textInputOutput.spec.ts
@@ -4,7 +4,6 @@ import path from "path";
 
 test("TextInputOutputComponent", async ({ page }) => {
   if (!process.env.CI) {
-    dotenv.config();
     dotenv.config({ path: path.resolve(__dirname, "../../.env") });
   }
 
diff --git a/src/frontend/vite.config.mts b/src/frontend/vite.config.mts
index 8a4a515ed..201d315cb 100644
--- a/src/frontend/vite.config.mts
+++ b/src/frontend/vite.config.mts
@@ -1,32 +1,43 @@
 import react from "@vitejs/plugin-react-swc";
+import dotenv from "dotenv";
+import path from "path";
 import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
-const apiRoutes = ["^/api/v1/", "/health"];
 
-// Use environment variable to determine the target.
-const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
+export default defineConfig(({ mode }) => {
+  dotenv.config({ path: path.resolve(__dirname, "../../.env") });
 
-// Use environment variable to determine the UI server port
-const port = Number(process.env.VITE_PORT) || 3000;
+  const apiRoutes = ["^/api/v1/", "/health"];
 
-const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
-  proxyObj[route] = {
-    target: target,
-    changeOrigin: true,
-    secure: false,
-    ws: true,
-  };
-  return proxyObj;
-}, {});
-export default defineConfig({
-  build: {
-    outDir: "build",
-  },
-  plugins: [react(), svgr()],
-  server: {
-    port: port,
-    proxy: {
-      ...proxyTargets,
+  // Use environment variable to determine the target.
+  const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";
+
+  // Use environment variable to determine the UI server port
+  const port = Number(process.env.VITE_PORT) || 3002;
+
+  const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
+    proxyObj[route] = {
+      target: target,
+      changeOrigin: true,
+      secure: false,
+      ws: true,
+    };
+    return proxyObj;
+  }, {});
+
+  return {
+    build: {
+      outDir: "build",
     },
-  },
+    define: {
+      "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL),
+    },
+    plugins: [react(), svgr()],
+    server: {
+      port: port,
+      proxy: {
+        ...proxyTargets,
+      },
+    },
+  };
 });