Fix API with vite proxy (#454)

* fix: use vite proxy for API and ws

* feat: add env var BACKEND_HOST

* feat: mock api for /litellm-models

frontend/src/services/settingsService.ts

@@ -3,14 +3,13 @@ import { appendAssistantMessage } from "../state/chatSlice";
 import { setInitialized } from "../state/taskSlice";
 import store from "../store";
 
-const { VITE_URL } = import.meta.env;
 export async function fetchModels() {
-  const response = await fetch(`${VITE_URL}/litellm-models`);
+  const response = await fetch(`/api/litellm-models`);
   return response.json();
 }
 
 export async function fetchAgents() {
-  const response = await fetch(`${VITE_URL}/litellm-agents`);
+  const response = await fetch(`/api/litellm-agents`);
   return response.json();
 }
 

frontend/src/socket/socket.ts

@@ -6,12 +6,7 @@ import { handleObservationMessage } from "./observations";
 
 type SocketMessage = ActionMessage | ObservationMessage;
 
-const WS_URL = import.meta.env.VITE_WS_URL;
-if (!WS_URL) {
-  throw new Error(
-    "The environment variable VITE_WS_URL is not set. Please set it to the WebSocket URL of the terminal server.",
-  );
-}
+const WS_URL = `ws://${window.location.host}/ws`;
 
 const socket = new WebSocket(WS_URL);
 

frontend/vite.config.ts

@@ -2,11 +2,29 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 
+const BACKEND_HOST = process.env.BACKEND_HOST || "localhost:3000";
+
+// check BACKEND_HOST is something like "localhost:3000" or "example.com"
+if (!BACKEND_HOST.match(/^(localhost|[\w\d-]+(\.[\w\d-]+)+(:\d+)?)/)) {
+  throw new Error(`Invalid BACKEND_HOST ${BACKEND_HOST}, example BACKEND_HOST localhost:3000`);
+}
+
 export default defineConfig({
   // depending on your application, base can also be "/"
   base: "",
   plugins: [react(), viteTsconfigPaths()],
   server: {
     port: 3001,
+    proxy: {
+      "/api": {
+        target: `http://${BACKEND_HOST}/`,
+        changeOrigin: true,
+        rewrite: (path: string) => path.replace(/^\/api/, ""),
+      },
+      "/ws": {
+        target: `ws://${BACKEND_HOST}/`,
+        ws: true,
+      },
+    },
   },
 });

opendevin/mock/listen.py

@@ -25,5 +25,9 @@ async def websocket_endpoint(websocket: WebSocket):
 def read_root():
     return {"message": "This is a mock server"}
 
+@app.get("/litellm-models")
+def read_llm_models():
+    return ["model-mock"]
+
 if __name__ == "__main__":
     uvicorn.run(app, host="127.0.0.1", port=3000)