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

@@ -98,3 +98,6 @@ LANGFLOW_STORE_ENVIRONMENT_VARIABLES=
 # 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,13 +1,19 @@
 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";
+
+export default defineConfig(({ mode }) => {
+  dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+
   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";
 
   // Use environment variable to determine the UI server port
-const port = Number(process.env.VITE_PORT) || 3000;
+  const port = Number(process.env.VITE_PORT) || 3002;
 
   const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
     proxyObj[route] = {
@@ -18,10 +24,14 @@ const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
     };
     return proxyObj;
   }, {});
-export default defineConfig({
+
+  return {
     build: {
       outDir: "build",
     },
+    define: {
+      "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL),
+    },
     plugins: [react(), svgr()],
     server: {
       port: port,
@@ -29,4 +39,5 @@ export default defineConfig({
         ...proxyTargets,
       },
     },
+  };
 });