Fix new Frontend 1

docker-compose.yml

@@ -588,26 +588,35 @@ services:
   dashboard:
     build:
       context: ./frontend
-      dockerfile: Dockerfile.${ENVIRONMENT}
+      dockerfile: Dockerfile.development  # Use the existing development Dockerfile
       args:
-      - NODE_ENV=development
+        - NODE_ENV=development
-      - VITE_API_URL=http://localhost:8000
+        - VITE_API_URL=http://localhost:${GATEWAY_PORT:-8000}
-    image: bakery/dashboard:${IMAGE_TAG}
+    image: bakery/dashboard:${IMAGE_TAG:-latest}
     container_name: bakery-dashboard
     restart: unless-stopped
+    environment:
+      - NODE_ENV=development
+      - VITE_API_URL=http://localhost:${GATEWAY_PORT:-8000}
+      - VITE_APP_TITLE=PanIA Dashboard
+      - VITE_APP_VERSION=1.0.0
     ports:
-      - "${DASHBOARD_PORT}:3000"
+      - "${DASHBOARD_PORT:-3000}:3000"
     depends_on:
       gateway:
         condition: service_healthy
     networks:
       bakery-network:
         ipv4_address: 172.20.0.110
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules  # Exclude node_modules from bind mount
     healthcheck:
       test: ["CMD", "curl", "-f", "http://localhost:3000/"]
       interval: 30s
       timeout: 10s
       retries: 3
+      start_period: 20s
 
   # ================================================================
   # DEVELOPMENT TOOLS - OPTIONAL

frontend/Dockerfile.development

@@ -1,4 +1,4 @@
-# Development Dockerfile
+# frontend/Dockerfile.development - FIXED VERSION
 FROM node:18-alpine
 
 # Install curl for healthchecks
@@ -7,25 +7,31 @@ RUN apk add --no-cache curl
 # Set working directory
 WORKDIR /app
 
+# Create non-root user for security but don't switch yet
+RUN addgroup -g 1001 -S nodejs && \
+    adduser -S reactjs -u 1001 -G nodejs
+
 # Copy package files first (better caching)
 COPY package*.json ./
 
-# Install all dependencies (including dev dependencies)
+# Install all dependencies (including dev dependencies) as root
-RUN npm ci
+RUN npm ci --verbose && \
+    npm cache clean --force
 
 # Copy source code
 COPY . .
 
-# Create non-root user for security
+# Change ownership of all files to the non-root user
-RUN addgroup -g 1001 -S nodejs
+RUN chown -R reactjs:nodejs /app
-RUN adduser -S reactjs -u 1001
+
+# Now switch to non-root user
 USER reactjs
 
 # Expose port 3000 (Vite default)
 EXPOSE 3000
 
 # Add healthcheck
-HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
   CMD curl -f http://localhost:3000/ || exit 1
 
 # Start development server with host binding

frontend/Dockerfile.production

@@ -0,0 +1,41 @@
+# frontend/Dockerfile.production
+# Multi-stage build for production
+
+# Build stage
+FROM node:18-alpine as builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Install curl for healthchecks
+RUN apk add --no-cache curl
+
+# Copy built app from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Add healthcheck
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD curl -f http://localhost/ || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,70 @@
+# frontend/nginx.conf
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+    
+    # Enable gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/atom+xml
+        image/svg+xml;
+
+    server {
+        listen 80;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # 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;
+
+        # Handle React Router
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # API proxy to backend
+        location /api/ {
+            proxy_pass http://bakery-gateway:8000/api/;
+            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;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Health check endpoint
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+}

frontend/src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

scripts/fix-frontend.sh

@@ -0,0 +1,201 @@
+#!/bin/bash
+# scripts/fix-frontend.sh - Frontend troubleshooting script
+
+set -e
+
+GREEN='\033[0;32m'
+BLUE='\033[0;34m'
+RED='\033[0;31m'
+YELLOW='\033[0;33m'
+NC='\033[0m'
+
+print_step() {
+    echo -e "${BLUE}[FRONTEND-FIX]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+# Check if we're in the right directory
+if [ ! -f "docker-compose.yml" ]; then
+    print_error "docker-compose.yml not found. Please run this script from the project root."
+    exit 1
+fi
+
+print_step "Starting frontend troubleshooting..."
+
+# Step 1: Check frontend directory structure
+print_step "Checking frontend directory structure..."
+if [ ! -d "frontend" ]; then
+    print_error "Frontend directory not found!"
+    exit 1
+fi
+
+cd frontend
+
+# Step 2: Check package.json exists
+if [ ! -f "package.json" ]; then
+    print_error "package.json not found in frontend directory!"
+    exit 1
+fi
+print_success "package.json found"
+
+# Step 3: Generate package-lock.json if missing
+if [ ! -f "package-lock.json" ]; then
+    print_warning "package-lock.json not found. Generating..."
+    npm install
+    print_success "package-lock.json generated"
+else
+    print_success "package-lock.json found"
+fi
+
+# Step 4: Check for missing directories
+print_step "Creating missing directories..."
+mkdir -p src/pages
+mkdir -p src/components
+mkdir -p src/hooks
+mkdir -p src/services
+mkdir -p src/utils
+mkdir -p public
+print_success "Directory structure verified"
+
+# Step 5: Check for App.tsx
+if [ ! -f "src/App.tsx" ]; then
+    print_warning "src/App.tsx not found. Creating basic App.tsx..."
+    
+    cat > src/App.tsx << 'EOF'
+import React from 'react'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+
+function App() {
+  return (
+    <Router>
+      <div className="App min-h-screen bg-gray-50">
+        <div className="container mx-auto px-4 py-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-6">
+            🥖 PanIA Dashboard
+          </h1>
+          <div className="bg-white rounded-lg shadow p-6">
+            <h2 className="text-xl font-semibold mb-4">
+              Bienvenido a PanIA
+            </h2>
+            <p className="text-gray-600">
+              Sistema de predicción de demanda para panaderías en Madrid
+            </p>
+          </div>
+        </div>
+      </div>
+    </Router>
+  )
+}
+
+export default App
+EOF
+    print_success "Basic App.tsx created"
+else
+    print_success "App.tsx found"
+fi
+
+# Step 6: Check for index.css
+if [ ! -f "src/index.css" ]; then
+    print_warning "src/index.css not found. Creating basic CSS..."
+    
+    cat > src/index.css << 'EOF'
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+EOF
+    print_success "Basic index.css created"
+else
+    print_success "index.css found"
+fi
+
+# Step 7: Go back to project root
+cd ..
+
+# Step 8: Stop and remove the frontend container
+print_step "Stopping and removing existing frontend container..."
+docker-compose stop dashboard 2>/dev/null || true
+docker-compose rm -f dashboard 2>/dev/null || true
+
+# Step 9: Remove the image to force rebuild
+print_step "Removing frontend image to force rebuild..."
+docker rmi bakery/dashboard:latest 2>/dev/null || true
+
+# Step 10: Check .env file
+if [ ! -f ".env" ]; then
+    print_warning ".env file not found. Creating from example..."
+    if [ -f ".env.example" ]; then
+        cp .env.example .env
+        print_success ".env created from .env.example"
+    else
+        # Create minimal .env
+        cat > .env << 'EOF'
+ENVIRONMENT=development
+DASHBOARD_PORT=3000
+GATEWAY_PORT=8000
+IMAGE_TAG=latest
+EOF
+        print_success "Minimal .env created"
+    fi
+fi
+
+# Step 11: Rebuild the frontend service
+print_step "Rebuilding frontend service..."
+docker-compose build --no-cache dashboard
+
+# Step 12: Start the frontend service
+print_step "Starting frontend service..."
+docker-compose up -d dashboard
+
+# Step 13: Wait and check status
+print_step "Waiting for frontend to start..."
+sleep 10
+
+# Check if container is running
+if docker-compose ps dashboard | grep -q "Up"; then
+    print_success "Frontend container is running!"
+    print_step "Checking logs..."
+    docker-compose logs --tail=20 dashboard
+    
+    print_step "Testing frontend health..."
+    sleep 5
+    if curl -f http://localhost:3000 >/dev/null 2>&1; then
+        print_success "Frontend is accessible at http://localhost:3000"
+    else
+        print_warning "Frontend is running but not yet accessible. Check logs above."
+    fi
+else
+    print_error "Frontend container failed to start. Check logs:"
+    docker-compose logs dashboard
+fi
+
+print_step "Frontend troubleshooting completed!"
+echo ""
+echo "Next steps:"
+echo "1. Check the frontend at: http://localhost:3000"
+echo "2. View logs with: docker-compose logs dashboard"
+echo "3. Restart if needed: docker-compose restart dashboard"