fix front conn

frontend/10-generate-env.sh

@@ -0,0 +1,23 @@
+#!/bin/sh
+set -e
+
+TEMPLATE="/etc/env/env.js.template"
+TARGET="/usr/share/nginx/html/env.js"
+
+if [ -f "$TEMPLATE" ]; then
+  echo "Generating env.js from template with API_BASE=${API_BASE:-/api}"
+  # Default API_BASE to /api if not provided
+  : ${API_BASE:=/api}
+
+  cat > "$TARGET" <<EOF
+window.__ENV__ = {
+  API_BASE: "${API_BASE}"
+};
+EOF
+  echo "✓ env.js generated at $TARGET"
+else
+  echo "No env.js.template found at $TEMPLATE, skipping generation"
+fi
+
+# Ensure ownership/permissions are OK
+chown -R nginx:nginx /usr/share/nginx/html || true

frontend/nginx.conf

@@ -0,0 +1,41 @@
+worker_processes 1;
+events { worker_connections 1024; }
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+  sendfile        on;
+  keepalive_timeout  65;
+
+  server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Proxy API requests to backend service
+    # Frontend calls /api/recipes, nginx removes /api prefix and forwards to backend:8000/recipes
+    location /api/ {
+      proxy_pass http://backend:8000/;
+      proxy_http_version 1.1;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Serve static files and fallback to index.html for SPA
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+
+    # Optional caching for static assets
+    location ~* \.(?:css|js|svg|png|jpg|jpeg|gif|ico)$ {
+      try_files $uri =404;
+      expires 7d;
+      add_header Cache-Control "public";
+    }
+  }
+}

frontend/src/api.js

@@ -1,4 +1,13 @@
-const API_BASE = "http://localhost:8000";
+// Get API base from injected env.js or fallback to /api relative path
+const getApiBase = () => {
+  if (typeof window !== "undefined" && window.__ENV__ && window.__ENV__.API_BASE) {
+    return window.__ENV__.API_BASE;
+  }
+  // Default to relative /api path for local/containerized deployments
+  return "/api";
+};
+
+const API_BASE = getApiBase();
 
 export async function getRecipes() {
   const res = await fetch(`${API_BASE}/recipes`);