From b9c61d3573443a48078132e3a8f5deca84893d40 Mon Sep 17 00:00:00 2001
From: tcsenpai <dev@tcsenpai.com>
Date: Fri, 2 May 2025 11:05:16 +0200
Subject: [PATCH] proper backend url ingestion in frontend

---
 docker-compose.yml                     |  2 +-
 frontend/agentic-seek-front/src/App.js | 11 +++++++----
 start_services.sh                      |  1 -
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 94ee4a3..b2ac074 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -62,7 +62,7 @@ services:
     environment:
       - NODE_ENV=development
       - CHOKIDAR_USEPOLLING=true
-      - BACKEND_URL=http://backend:${BACKEND_PORT:-8000}
+      - REACT_APP_BACKEND_URL=http://0.0.0.0:${BACKEND_PORT:-8000}
     networks:
       - agentic-seek-net
   
diff --git a/frontend/agentic-seek-front/src/App.js b/frontend/agentic-seek-front/src/App.js
index a5bcfdc..dfa4b59 100644
--- a/frontend/agentic-seek-front/src/App.js
+++ b/frontend/agentic-seek-front/src/App.js
@@ -3,6 +3,9 @@ import axios from 'axios';
 import './App.css';
 import { colors } from './colors';
 
+// Get backend URL from environment variable, fallback to default if not set
+const BACKEND_URL = process.env.REACT_APP_BACKEND_URL || 'http://0.0.0.0:8000';
+
 function App() {
     const [query, setQuery] = useState('');
     const [messages, setMessages] = useState([]);
@@ -25,7 +28,7 @@ function App() {
 
     const checkHealth = async () => {
         try {
-            await axios.get('http://0.0.0.0:8000/health');
+            await axios.get(`${BACKEND_URL}/health`);
             setIsOnline(true);
             console.log('System is online');
         } catch {
@@ -37,7 +40,7 @@ function App() {
     const fetchScreenshot = async () => {
         try {
             const timestamp = new Date().getTime();
-            const res = await axios.get(`http://0.0.0.0:8000/screenshots/updated_screen.png?timestamp=${timestamp}`, {
+            const res = await axios.get(`${BACKEND_URL}/screenshots/updated_screen.png?timestamp=${timestamp}`, {
                 responseType: 'blob'
             });
             console.log('Screenshot fetched successfully');
@@ -76,7 +79,7 @@ function App() {
 
     const fetchLatestAnswer = async () => {
         try {
-            const res = await axios.get('http://0.0.0.0:8000/latest_answer');
+            const res = await axios.get(`${BACKEND_URL}/latest_answer`);
             const data = res.data;
 
             updateData(data);
@@ -134,7 +137,7 @@ function App() {
         try {
             console.log('Sending query:', query);
             setQuery('waiting for response...');
-            const res = await axios.post('http://0.0.0.0:8000/query', {
+            const res = await axios.post(`${BACKEND_URL}/query`, {
                 query,
                 tts_enabled: false
             });
diff --git a/start_services.sh b/start_services.sh
index a4629e7..3833fa0 100755
--- a/start_services.sh
+++ b/start_services.sh
@@ -75,6 +75,5 @@ if ! $COMPOSE_CMD up; then
     exit 1
 fi
 
-echo "Backend is expected to be running on port ${BACKEND_PORT:-8000}"
 
 sleep 10
\ No newline at end of file