feat: vite proxy (#27)

* feat: testing vite proxy config

* fix: docker build

* build: fix health endpoint to be frontend only

* debug docker container

* cont debug docker exit

* more debugging

* and more debugging

* more localhost debugging

* chore: clean up debugging

* fix: allowed hosts

* testing vite config

* testing vite logs

* more testing

* fix: proxy

* testing env var

* fix: auth proxy

* fixing auth verify

* testing redirect on success

* fix company

Author: MSevey

Dockerfile

@@ -22,73 +22,65 @@ COPY . .
 # Build the application
 RUN pnpm run build
 
-# Stage 2: Production server
-FROM nginx:alpine
-
-# Simple nginx config for EasyPanel (no API proxy - EasyPanel handles routing)
-COPY <<EOF /etc/nginx/conf.d/default.conf
-server {
-    listen 80;
-    server_name _;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    # Handle React Router - all routes should serve index.html
-    location / {
-        try_files \$uri \$uri/ /index.html;
-    }
-
-    # Health check for EasyPanel monitoring
-    location /health {
-        access_log off;
-        return 200 "healthy";
-        add_header Content-Type text/plain;
-    }
-
-    # Basic security headers
-    add_header X-Frame-Options "SAMEORIGIN";
-    add_header X-Content-Type-Options "nosniff";
-
-    # Enable gzip compression
-    gzip on;
-    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
-}
-EOF
+# Stage 2: Production server using Vite preview
+FROM node:18-alpine
+
+# Set working directory
+WORKDIR /app
 
-# Copy built application from build stage
-COPY --from=build /app/dist /usr/share/nginx/html
+# Install pnpm globally
+RUN npm install -g pnpm@9.0.0
+
+# Copy built application and necessary files from build stage
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/package.json ./package.json
+COPY --from=build /app/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=build /app/vite.config.ts ./vite.config.ts
+COPY --from=build /app/tsconfig.json ./tsconfig.json
+COPY --from=build /app/tsconfig.node.json ./tsconfig.node.json
+
+# Install all dependencies (needed for Vite preview with config)
+RUN pnpm install --frozen-lockfile
 
 # Copy docker entrypoint script
 COPY <<EOF /docker-entrypoint.sh
 #!/bin/sh
 
 # Simple startup logging
-echo "🚀 Starting Unified Arda Platform"
+echo "🚀 Starting Unified Arda Platform with Vite Preview Server"
 echo "Backend: \${VITE_SERVER_URL:-http://localhost:8080}"
+echo "Chat Agent: \${VITE_CHAT_AGENT_URL:-http://localhost:3002}"
+echo "Environment: \${VITE_SERVER_ENVIRONMENT:-production}"
 
 # Inject environment variables into the built app
-# This allows runtime configuration changes without rebuilding
-cat > /usr/share/nginx/html/env-config.js << EOL
+cat > /app/dist/env-config.js << EOL
 window.__ENV__ = {
-  VITE_SERVER_URL: "\${VITE_SERVER_URL:-http://backend:8080}",
+  VITE_SERVER_URL: "\${VITE_SERVER_URL:-http://arda-credit_server:8080}",
   VITE_SERVER_ENVIRONMENT: "\${VITE_SERVER_ENVIRONMENT:-production}",
-  VITE_CHAT_AGENT_URL: "\${VITE_CHAT_AGENT_URL:-http://chat-agent:3002}",
+  VITE_CHAT_AGENT_URL: "\${VITE_CHAT_AGENT_URL:-http://arda-credit_chat-agent:3002}",
   VITE_ETHEREUM_RPC_URL: "\${VITE_ETHEREUM_RPC_URL:-http://127.0.0.1:8545}"
 };
 EOL
 
-echo "✅ Environment injected, starting nginx..."
-exec nginx -g 'daemon off;'
+echo "✅ Environment injected, starting Vite preview server..."
+echo "Server will be available on http://0.0.0.0:3000"
+
+# Start Vite preview server
+echo "🚀 Starting Vite preview server on http://0.0.0.0:3000"
+echo "✅ Proxy configuration active for all backend services"
+
+# Run Vite preview server in foreground - Docker health check handles verification
+exec pnpm run preview --host 0.0.0.0 --port 3000
 EOF
 
 # Make entrypoint executable
 RUN chmod +x /docker-entrypoint.sh
 
-# Expose port 80
-EXPOSE 80
+# Expose port 3000 (Vite preview default)
+EXPOSE 3000
 
-# Simple health check for EasyPanel
-HEALTHCHECK --interval=30s --timeout=3s --retries=3 CMD wget --no-verbose --tries=1 --spider http://localhost/health || exit 1
+# Health check for container monitoring
+HEALTHCHECK --interval=30s --timeout=10s --retries=3 --start-period=30s CMD wget --quiet --tries=1 --spider http://127.0.0.1:3000/ || exit 1
 
 # Set entrypoint
 ENTRYPOINT ["/docker-entrypoint.sh"]

package.json

@@ -12,9 +12,11 @@
     "check-types": "tsc --noEmit",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
     "docker:build": "docker build -t arda-platform:latest .",
-    "docker:run": "docker run -d -p 3000:80 --name arda-platform arda-platform:latest",
+    "docker:run": "docker run -d -p 3000:3000 --name arda-platform arda-platform:latest",
+    "docker:run:dev": "docker run -d -p 3000:3000 -e VITE_SERVER_URL=http://localhost:8080 -e VITE_CHAT_AGENT_URL=http://localhost:3002 --name arda-platform arda-platform:latest",
     "docker:stop": "docker stop arda-platform && docker rm arda-platform",
     "docker:logs": "docker logs -f arda-platform",
+    "docker:exec": "docker exec -it arda-platform sh",
     "docker:tag": "docker tag arda-platform:latest ghcr.io/ardaglobal/arda-platform:latest",
     "docker:push": "docker push ghcr.io/ardaglobal/arda-platform:latest",
     "docker:deploy": "npm run docker:build && npm run docker:tag && npm run docker:push"
@@ -69,6 +71,7 @@
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.9",
+    "vite": "^5.4.19",
     "zod": "^3.25.76"
   },
   "devDependencies": {
@@ -88,8 +91,7 @@
     "prettier": "^3.6.2",
     "tailwindcss": "^3.4.17",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^5.4.19"
+    "typescript-eslint": "^8.38.0"
   },
   "packageManager": "pnpm@9.0.0",
   "engines": {

pnpm-lock.yaml

@@ -21,9 +21,27 @@ declare global {
 }
 
 export const getConfig = (): RuntimeConfig => {
-  // In production, read from window.__ENV__ (injected at container startup)
-  // In development, fall back to import.meta.env
+  // Check if we're in production (served over HTTPS) - use relative paths to avoid mixed content
+  const isProduction = typeof window !== 'undefined' && window.location.protocol === 'https:';
+  
+  console.log('🔧 Runtime Config:', {
+    isProduction,
+    hasWindowEnv: typeof window !== 'undefined' && !!window.__ENV__,
+    protocol: typeof window !== 'undefined' ? window.location.protocol : 'unknown'
+  });
+  
+  if (isProduction) {
+    console.log('🚀 Production mode detected - using relative URLs for API requests');
+    return {
+      SERVER_URL: '', // Empty string = relative paths like /api/v1/auth/me
+      CREDIT_APP_URL: window.__ENV__?.VITE_CREDIT_APP_URL || 'http://localhost:3000',
+      IDR_URL: window.__ENV__?.VITE_IDR_URL || 'http://localhost:3001',
+    };
+  }
+  
+  // In development or when window.__ENV__ exists but not HTTPS
   if (typeof window !== 'undefined' && window.__ENV__) {
+    console.log('🛠️  Using window.__ENV__ configuration for development/staging');
     return {
       SERVER_URL: window.__ENV__.VITE_SERVER_URL || 'http://localhost:8080',
       CREDIT_APP_URL: window.__ENV__.VITE_CREDIT_APP_URL || 'http://localhost:3000',
@@ -32,6 +50,7 @@ export const getConfig = (): RuntimeConfig => {
   }
 
   // Development fallback - no path prefixes for local dev with pnpm dev
+  console.log('🔨 Using import.meta.env fallback for local development');
   return {
     SERVER_URL: import.meta.env.VITE_SERVER_URL || 'http://localhost:8080',
     CREDIT_APP_URL: import.meta.env.VITE_CREDIT_APP_URL || 'http://localhost:3000',