docker implementation

frontend/Dockerfile

@@ -0,0 +1,45 @@
+# Frontend Dockerfile for Placebo.mk TanStack React App
+
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Create non-root user
+RUN addgroup -g 1001 -S nginx && \
+    adduser -S nginx -u 1001 -G nginx
+
+# Copy built application from builder stage
+COPY --from=builder --chown=nginx:nginx /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Switch to non-root user
+USER nginx
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/Dockerfile.dev

@@ -0,0 +1,28 @@
+# Frontend Development Dockerfile for Placebo.mk TanStack React App
+
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install dependencies with better error handling
+COPY package*.json ./
+COPY package-lock.json* ./
+
+# Clear npm cache and install dependencies
+RUN npm cache clean --force && \
+    npm install
+
+# Copy source code
+COPY . .
+
+# Fix permissions - use node user that exists in base image
+RUN chown -R node:node /app
+
+# Switch to non-root user that exists in base image
+USER node
+
+# Expose port
+EXPOSE 5173
+
+# Start development server with host flag
+CMD ["npm", "run", "dev", "--", "--host"]

frontend/nginx.conf

@@ -0,0 +1,107 @@
+worker_processes auto;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+    
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log warn;
+
+    # Basic settings
+    sendfile on;
+    tcp_nopush on;
+    tcp_nodelay on;
+    keepalive_timeout 65;
+    types_hash_max_size 2048;
+    client_max_body_size 100M;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
+    gzip_disable "MSIE [1-6]\.";
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+
+    # Frontend server
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Security headers for frontend
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self' http://localhost:3000 http://localhost:1337;" always;
+
+        # Handle React Router
+        location / {
+            try_files $uri $uri/ /index.html;
+            expires -1;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # API proxy
+        location /api/ {
+            proxy_pass http://backend:3000/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache_bypass $http_upgrade;
+            proxy_read_timeout 300;
+            proxy_connect_timeout 300;
+        }
+
+        # CMS proxy
+        location /cms/ {
+            proxy_pass http://cms:1337/;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection 'upgrade';
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_cache_bypass $http_upgrade;
+            proxy_read_timeout 300;
+            proxy_connect_timeout 300;
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+
+        # Error pages
+        error_page 404 /index.html;
+        error_page 500 502 503 504 /50x.html;
+        location = /50x.html {
+            root /usr/share/nginx/html;
+        }
+    }
+}

frontend/src/hooks/useLiveBlogStream.ts

@@ -16,6 +16,13 @@ export function useLiveBlogStream(
   liveBlogId: string,
   options: LiveBlogStreamOptions = {}
 ) {
+  const defaultOptions: LiveBlogStreamOptions = {
+    autoReconnect: true,
+    reconnectInterval: 3000,
+    maxReconnectAttempts: 10,
+  };
+  
+  const mergedOptions = { ...defaultOptions, ...options };
   const [isConnected, setIsConnected] = useState(false);
   const [lastEvent, setLastEvent] = useState<LiveBlogStreamEvent | null>(null);
   const [connectionError, setConnectionError] = useState<string | null>(null);
@@ -24,13 +31,13 @@ export function useLiveBlogStream(
   const eventSourceRef = useRef<EventSource | null>(null);
   const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastEventIdRef = useRef<string | null>(null);
-  const optionsRef = useRef(options);
+  const optionsRef = useRef(mergedOptions);
   const reconnectAttemptsRef = useRef(reconnectAttempts);
 
   // Update refs when props change
   useEffect(() => {
-    optionsRef.current = options;
-  }, [options]);
+    optionsRef.current = mergedOptions;
+  }, [mergedOptions]);
 
   useEffect(() => {
     reconnectAttemptsRef.current = reconnectAttempts;
@@ -59,7 +66,7 @@ export function useLiveBlogStream(
         eventSourceRef.current.close();
       }
 
-      const url = new URL(`${import.meta.env.VITE_API_URL}/api/v1/live-blogs/${liveBlogId}/stream`, window.location.origin);
+      const url = new URL(`${import.meta.env.VITE_API_URL}/live-blogs/${liveBlogId}/stream`, window.location.origin);
       
       if (lastEventIdRef.current) {
         url.searchParams.set('last-event-id', lastEventIdRef.current);
@@ -117,14 +124,14 @@ export function useLiveBlogStream(
           setConnectionError('Connection to live blog lost');
 
           // Attempt reconnection if enabled and within limits
-          if (optionsRef.current.autoReconnect && reconnectAttemptsRef.current < (optionsRef.current.maxReconnectAttempts || 5)) {
+          if (optionsRef.current.autoReconnect && reconnectAttemptsRef.current < optionsRef.current.maxReconnectAttempts) {
             const nextAttempt = reconnectAttemptsRef.current + 1;
             setReconnectAttempts(nextAttempt);
             reconnectTimeoutRef.current = setTimeout(() => {
-              console.log(`Attempting reconnection (${nextAttempt}/${optionsRef.current.maxReconnectAttempts || 5})`);
+              console.log(`Attempting reconnection (${nextAttempt}/${optionsRef.current.maxReconnectAttempts})`);
               createConnection();
-            }, optionsRef.current.reconnectInterval || 3000);
-          } else if (reconnectAttemptsRef.current >= (optionsRef.current.maxReconnectAttempts || 5)) {
+            }, optionsRef.current.reconnectInterval);
+          } else if (reconnectAttemptsRef.current >= optionsRef.current.maxReconnectAttempts) {
             setConnectionError('Failed to reconnect after multiple attempts');
           }
         };

frontend/src/queries/live-blogs.ts

@@ -32,6 +32,7 @@ export function useLiveBlogUpdates(liveBlogId: string, page = 1, limit = 50) {
     queryKey: ['liveBlogUpdates', liveBlogId, page, limit],
     queryFn: () => api.fetchLiveBlogUpdates(liveBlogId, page, limit),
     enabled: !!liveBlogId,
+    refetchInterval: 10000, // Poll every 10 seconds as fallback
   });
 }
 

frontend/vite.config.ts

@@ -14,4 +14,9 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
+  server: {
+    host: true, // Listen on all addresses
+    port: 5173,
+    strictPort: true,
+  },
 })