From 10605c67395a607f703c3d740eeea0d902c6fa27 Mon Sep 17 00:00:00 2001
From: paul <paul-nothaft@hotmail.de>
Date: Wed, 23 Jul 2025 14:56:20 +0200
Subject: [PATCH] fix: Resolve frontend API connection issues in Docker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add setupProxy.js to proxy API calls to backend container
- Install http-proxy-middleware for development proxy support
- Update docker-compose.dev.yml to use backend service name
- Add HOST=0.0.0.0 to allow external connections to dev server
- Add empty favicon.ico to prevent 500 errors
- Update proxy configuration to use port 7510

This fixes the ERR_CONNECTION_REFUSED errors when the frontend
tries to connect to the backend API in Docker environment.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docker-compose.dev.yml         |  3 ++-
 docker/Dockerfile.frontend.dev |  3 +++
 frontend/package-lock.json     |  1 +
 frontend/package.json          |  5 +++--
 frontend/public/favicon.ico    |  0
 frontend/src/setupProxy.js     | 16 ++++++++++++++++
 6 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 frontend/public/favicon.ico
 create mode 100644 frontend/src/setupProxy.js

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 5405347..2a67c70 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -41,7 +41,8 @@ services:
     restart: unless-stopped
     environment:
       PORT: 7511
-      REACT_APP_API_URL: http://localhost:7510/api
+      BACKEND_URL: http://backend:7510
+      DANGEROUSLY_DISABLE_HOST_CHECK: 'true'
     ports:
       - "7511:7511"
     volumes:
diff --git a/docker/Dockerfile.frontend.dev b/docker/Dockerfile.frontend.dev
index eb90386..94967ff 100644
--- a/docker/Dockerfile.frontend.dev
+++ b/docker/Dockerfile.frontend.dev
@@ -18,5 +18,8 @@ COPY . .
 # Expose the development server port
 EXPOSE 7511
 
+# Set the host to allow external connections
+ENV HOST=0.0.0.0
+
 # Start the development server
 CMD ["npm", "start"]
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4938566..6ad7d4e 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -40,6 +40,7 @@
         "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "http-proxy-middleware": "^2.0.9",
         "prettier": "^3.1.1"
       }
     },
diff --git a/frontend/package.json b/frontend/package.json
index d6ed397..da79c7f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -61,7 +61,8 @@
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "http-proxy-middleware": "^2.0.9",
     "prettier": "^3.1.1"
   },
-  "proxy": "http://localhost:3000"
-}
\ No newline at end of file
+  "proxy": "http://localhost:7510"
+}
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/setupProxy.js b/frontend/src/setupProxy.js
new file mode 100644
index 0000000..61b49f6
--- /dev/null
+++ b/frontend/src/setupProxy.js
@@ -0,0 +1,16 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: process.env.BACKEND_URL || 'http://backend:7510',
+      changeOrigin: true,
+      logLevel: 'debug',
+      onError: (err, req, res) => {
+        console.error('Proxy Error:', err);
+        res.status(500).json({ error: 'Proxy Error', message: err.message });
+      }
+    })
+  );
+};
\ No newline at end of file