Merge pull request 'micro-svc' (#17) from micro-svc into master

Reviewed-on: #17

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
+# Runtime env injection
-# COPY nginx.conf /etc/nginx/conf.d/default.conf
+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 ["/docker-entrypoint.sh"]
-
-CMD ["nginx", "-g", "daemon off;"]

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

@@ -12,9 +12,33 @@ spec:
       labels:
         app: navix-frontend
     spec:
+      initContainers:
+        - name: copy-env
+          image: busybox
+          command: ["sh", "-c", "cp /config/env.js /env/env.js"]
+          volumeMounts:
+            - name: env-config
+              mountPath: /config
+            - name: env-volume
+              mountPath: /env
+
       containers:
         - name: frontend
           image: "{{ .Values.frontend.image.repository }}:{{ .Values.frontend.image.tag }}"
           imagePullPolicy: {{ .Values.frontend.image.pullPolicy }}
           ports:
-            - containerPort: 80
+            - containerPort: 80
+          volumeMounts:
+            - name: env-volume
+              mountPath: /usr/share/nginx/html/env.js
+              subPath: env.js
+
+      volumes:
+        - name: env-volume
+          emptyDir: {}
+        - name: env-config
+          configMap:
+            name: navix-frontend-env
+            items:
+              - key: env.js
+                path: env.js

navix-helm/templates/frontend-env-configmap.yaml

@@ -0,0 +1,9 @@
+apiVersion: v1
+kind: ConfigMap
+metadata:
+  name: navix-frontend-env
+data:
+  env.js: |
+    window.env = {
+      VITE_API_URL: "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 }}
+          {{- range .paths }}
-            pathType: {{ .Values.frontend.ingress.hosts[0].paths[0].pathType }}
+          - path: {{ .path }}
+            pathType: {{ .pathType }}
             backend:
               service:
                 name: navix-frontend
                 port:
-                  number: {{ .Values.frontend.service.port }}
+                  number: {{ $.Values.frontend.service.port }}
-{{- end }}
+          {{- end }}
+    {{- end }}
+{{- end }}