Add frontend service to Docker setup and configure networking

Introduced a new `frontend` service in `docker-compose.yml`, complete with build, healthchecks, and networking. Added a multi-stage Dockerfile for the frontend, a `.dockerignore` file, and a startup script to wait for the backend. Updated Next.js configuration for Docker compatibility and added API type definitions.

docker-compose.yml

@@ -14,6 +14,8 @@ services:
       interval: 5s
       timeout: 5s
       retries: 5
+    networks:
+      - app-network
 
   backend:
     build:
@@ -32,20 +34,33 @@ services:
     depends_on:
       db:
         condition: service_healthy
+    networks:
+      - app-network
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+      args:
+        - NEXT_PUBLIC_API_URL=http://backend:8000
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - NEXT_PUBLIC_API_URL=http://backend:8000
+    depends_on:
+      - backend
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "http://localhost:3000"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+    networks:
+      - app-network
 
-#  frontend:
-#    build:
-#      context: .
-#      dockerfile: frontend/Dockerfile
-#    volumes:
-#      - ./frontend:/app
-#      - /app/node_modules
-#    ports:
-#      - "3000:3000"
-#    environment:
-#      - NEXT_PUBLIC_API_URL=http://backend:8000
-#    depends_on:
-#      - backend
 
 volumes:
-  postgres_data:
+  postgres_data:
+
+networks:
+  app-network:
+    driver: bridge

frontend/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+*.log
+.git
+.env*
+.dockerignore
+Dockerfile

frontend/Dockerfile

@@ -0,0 +1,36 @@
+# Stage 1: Dependencies
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+
+# Stage 2: Builder
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
+
+# Stage 3: Runner
+FROM node:20-alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

frontend/entrypoint.sh

@@ -0,0 +1,11 @@
+#!/bin/sh
+
+# Wait for backend to be ready
+echo "Waiting for backend..."
+until nc -z backend 8000; do
+    sleep 1
+done
+echo "Backend is up!"
+
+# Start the Next.js application
+exec "$@"

frontend/next.config.ts

@@ -1,7 +1,16 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+    output: 'standalone',
+    // Ensure we can connect to the backend in Docker
+    async rewrites() {
+        return [
+            {
+                source: '/api/:path*',
+                destination: 'http://backend:8000/:path*',
+            },
+        ];
+    },
 };
 
-export default nextConfig;
+export default nextConfig;

frontend/package.json

@@ -6,7 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "docker:build": "docker build -t eventspace-frontend .",
+    "docker:run": "docker run -p 3000:3000 eventspace-frontend"
+
   },
   "dependencies": {
     "react": "^19.0.0",

frontend/src/types/api.d.ts

@@ -0,0 +1,7 @@
+declare namespace API {
+    interface ErrorResponse {
+        detail: string;
+    }
+
+    // Add more types as you develop your API
+}