Two edges (#2249)

* 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

@@ -97,4 +97,7 @@ LANGFLOW_STORE_ENVIRONMENT_VARIABLES=
 
 # LIKE_WEBHOOK_URL
 #
-# LANGFLOW_LIKE_WEBHOOK_URL=
+# LANGFLOW_LIKE_WEBHOOK_URL=
+
+#BACKEND_URL=http://localhost:7860/
+BACKEND_URL=

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.

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") });
   }
 

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") });
   }
 

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") });
   }
 

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,
+      },
+    },
+  };
 });