From 2726ac49811a56807fc05681f6cb024ceeb03bf1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 7 Nov 2025 21:01:51 +0000
Subject: [PATCH] feat: Add development mode for frontend in Kubernetes/Tilt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added ability to run frontend in development mode with Vite dev server
for debugging React Error #306 and seeing unminified error messages.

Changes Made:

1. **New Dockerfile.kubernetes.dev**:
   - Runs Vite dev server instead of production build
   - Sets NODE_ENV=development for unminified React
   - Uses npm run dev with --host 0.0.0.0 for K8s access
   - Port 3000 for consistency with production
   - Enables hot reload and debug logging

2. **Updated Tiltfile**:
   - Changed dockerfile to Dockerfile.kubernetes.dev for dev mode
   - Added live_update for hot reload:
     - Syncs src/, public/, index.html, vite.config.ts
     - Falls back on package.json changes
     - Runs npm ci if dependencies change
   - Added comments for switching between dev/prod

Benefits:
- See all console.log debug messages (🔍, ✅, 🔴)
- Get unminified React error messages with line numbers
- Hot reload on file changes
- Full error stack traces
- Easy to switch back to prod mode

To Use:
1. Run: tilt up
2. Frontend will rebuild with dev server
3. Check browser console for debug logs
4. See ErrorBoundary messages with full details

To Switch Back to Production:
- Change dockerfile line in Tiltfile to:
  dockerfile='./frontend/Dockerfile.kubernetes'
---
 Tiltfile                           | 20 ++++++++++++++------
 frontend/Dockerfile.kubernetes.dev | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 frontend/Dockerfile.kubernetes.dev

diff --git a/Tiltfile b/Tiltfile
index a8334bd8..99d4741c 100644
--- a/Tiltfile
+++ b/Tiltfile
@@ -46,19 +46,27 @@ def python_live_update(service_name, service_path):
     return sync(service_path, '/app')
 
 # =============================================================================
-# FRONTEND (React + Vite + Nginx)
+# FRONTEND (React + Vite)
 # =============================================================================
+# DEV MODE: Uses Vite dev server with hot reload and unminified React
+# PROD MODE: Change dockerfile to './frontend/Dockerfile.kubernetes' for production builds
 docker_build(
     'bakery/dashboard',
     context='./frontend',
-    dockerfile='./frontend/Dockerfile.kubernetes',
-    # Note: Frontend is a multi-stage build with nginx, live updates are limited
-    # For true hot-reload during frontend development, consider running Vite locally
-    # and using Telepresence to connect to the cluster
+    dockerfile='./frontend/Dockerfile.kubernetes.dev',  # DEV: Vite dev server
     live_update=[
-        # Sync source changes (limited usefulness due to nginx serving static files)
+        # Fall back to full rebuild if package.json changes
+        fall_back_on(['./frontend/package.json', './frontend/package-lock.json']),
+
+        # Sync source code changes - Vite will hot reload
         sync('./frontend/src', '/app/src'),
         sync('./frontend/public', '/app/public'),
+        sync('./frontend/index.html', '/app/index.html'),
+        sync('./frontend/vite.config.ts', '/app/vite.config.ts'),
+        sync('./frontend/tsconfig.json', '/app/tsconfig.json'),
+
+        # Reinstall dependencies if package.json changes
+        run('npm ci', trigger=['./frontend/package.json', './frontend/package-lock.json']),
     ]
 )
 
diff --git a/frontend/Dockerfile.kubernetes.dev b/frontend/Dockerfile.kubernetes.dev
new file mode 100644
index 00000000..e8d5e42d
--- /dev/null
+++ b/frontend/Dockerfile.kubernetes.dev
@@ -0,0 +1,25 @@
+# Development Dockerfile for Frontend - Vite Dev Server
+# This runs the Vite dev server with hot reload and unminified React
+
+FROM node:18-alpine
+
+WORKDIR /app
+
+# Install dependencies
+COPY package*.json ./
+RUN npm ci --verbose && \
+    npm cache clean --force
+
+# Copy source code
+COPY . .
+
+# Expose Vite dev server port
+EXPOSE 3000
+
+# Set NODE_ENV to development for unminified React
+ENV NODE_ENV=development
+
+# Start Vite dev server with host binding for Kubernetes
+# --host 0.0.0.0 allows external access from Kubernetes
+# --port 3000 keeps the same port as production
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "3000"]