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"]