Fix connections between pods

frontend/.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8000

frontend/Dockerfile

@@ -1,26 +1,20 @@
 # Stage 1: Build
 FROM node:20-alpine AS builder
-
 WORKDIR /app
-
 COPY package*.json ./
 RUN npm install --legacy-peer-deps
-
 COPY . .
 RUN npm run build
 
-# Stage 2: Serve with nginx
+# Stage 2: NGINX
 FROM nginx:alpine
 
-# Remove default nginx static files
 RUN rm -rf /usr/share/nginx/html/*
-
-# Copy built assets from the builder stage
 COPY --from=builder /app/dist /usr/share/nginx/html
 
-# Copy custom nginx config if needed
-# COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Runtime env injection
+COPY docker-entrypoint.sh /docker-entrypoint.sh
+RUN chmod +x /docker-entrypoint.sh
+RUN echo "window.env = {}" > /usr/share/nginx/html/env.js
 
-EXPOSE 80
-
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["/docker-entrypoint.sh"]

frontend/docker-entrypoint.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+set -e
+
+# Generate env.js at runtime
+cat <<EOF > /usr/share/nginx/html/env.js
+window.env = {
+  VITE_API_URL: "${VITE_API_URL}"
+}
+EOF
+
+exec nginx -g "daemon off;"

frontend/src/services/api.js

@@ -1,11 +1,13 @@
+const API_BASE = window?.env?.VITE_API_URL || '';
+
 export async function fetchSections() {
-  const res = await fetch('/apps');
+  const res = await fetch(`${API_BASE}/apps`);
   if (!res.ok) throw new Error('Failed to fetch sections');
   return res.json();
 }
 
 export async function addAppToSection({ section, app }) {
-  const res = await fetch('/add_app', {
+  const res = await fetch(`${API_BASE}/add_app`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ section, app })
@@ -15,8 +17,8 @@ export async function addAppToSection({ section, app }) {
 }
 
 export async function getIconUrl(filename) {
-  const res = await fetch(`/icon/${filename}`);
+  const res = await fetch(`${API_BASE}/icon/${filename}`);
   if (!res.ok) throw new Error(`Failed to fetch icon for ${filename}`);
   const data = await res.json();
-  return data.url; // ✅ must return the actual URL string
+  return data.url;
 }

frontend/vite.config.js

@@ -1,14 +1,6 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: {
-    proxy: {
-      '/apps': 'http://localhost:8000',
-      '/add_app': 'http://localhost:8000',
-      '/icon': 'http://localhost:8000',
-    }
-  }
 });

navix-helm/templates/frontend-deployment.yaml

@@ -18,3 +18,6 @@ spec:
           imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
           ports:
             - containerPort: 80
+          env:
+            - name: VITE_API_URL
+              value: "http://navix-backend.{{ .Release.Namespace }}.svc.cluster.local:8000"

navix-helm/templates/frontend-ingress.yaml

@@ -10,14 +10,18 @@ metadata:
 spec:
   ingressClassName: {{ .Values.frontend.ingress.className }}
   rules:
-    - host: {{ .Values.frontend.ingress.hosts[0].host }}
+    {{- range .Values.frontend.ingress.hosts }}
+    - host: {{ .host }}
       http:
         paths:
-          - path: {{ .Values.frontend.ingress.hosts[0].paths[0].path }}
-            pathType: {{ .Values.frontend.ingress.hosts[0].paths[0].pathType }}
+          {{- range .paths }}
+          - path: {{ .path }}
+            pathType: {{ .pathType }}
             backend:
               service:
                 name: navix-frontend
                 port:
-                  number: {{ .Values.frontend.service.port }}
+                  number: {{ $.Values.frontend.service.port }}
+          {{- end }}
+    {{- end }}
 {{- end }}