add hot reloading with docker compose

Author: Kurtyjlee

docker-compose.prod.yml

@@ -0,0 +1,43 @@
+services:
+  frontend:
+    image: asia-southeast1-docker.pkg.dev/cs3219-g11-peerprep/cs3219-g11-repo/peerprep-fe:latest
+    platform: linux/amd64
+    build:
+      context: ./peerprep-fe
+      dockerfile: Dockerfile
+      target: production
+    ports:
+      - "3000:3000"
+    networks:
+      - peerprep-network
+    env_file:
+      - ./peerprep-fe/.env.production
+  question-service:
+    image: asia-southeast1-docker.pkg.dev/cs3219-g11-peerprep/cs3219-g11-repo/question-svc:latest
+    platform: linux/amd64
+    build:
+      context: ./question-service
+      dockerfile: Dockerfile
+      target: production
+    ports:
+      - "4001:4001"
+    networks:
+      - peerprep-network
+    env_file:
+      - ./question-service/.env.dev
+  user-service:
+    image: asia-southeast1-docker.pkg.dev/cs3219-g11-peerprep/cs3219-g11-repo/user-svc:latest
+    platform: linux/amd64
+    build:
+      context: ./user-service
+      dockerfile: Dockerfile
+      target: production
+    ports:
+      - "3001:3001"
+    networks:
+      - peerprep-network
+    env_file:
+      - ./user-service/.env
+networks:
+  peerprep-network:
+    driver: bridge

docker-compose.yml

@@ -4,14 +4,12 @@ services:
     build:
       context: ./peerprep-fe
       dockerfile: Dockerfile
-    # volumes:
-    #   - ./peerprep-fe:/app  # Mount src directory for hot reloading
-    #   - /app/node_modules  # Prevent overwriting node_modules
-    #   - /app/.next
+      target: development
+    volumes:
+      - ./peerprep-fe:/app
+      - ./peerprep-fe/node_modules:/app/node_modules
     ports:
       - "3000:3000"
-    environment:
-      - NODE_ENV=production
     networks:
       - peerprep-network
     env_file:
@@ -21,14 +19,12 @@ services:
     build:
       context: ./question-service
       dockerfile: Dockerfile
+      target: development
     volumes:
-      - ./question-service:/app  # Mount src directory for hot reloading
+      - ./question-service:/app
       - ./question-service/node_modules:/app/node_modules
     ports:
       - "4001:4001"
-    environment:
-      - NODE_ENV=production
-      - PORT=4001
     networks:
       - peerprep-network
     env_file:
@@ -38,10 +34,12 @@ services:
     build:
       context: ./user-service
       dockerfile: Dockerfile
+      target: development
+    volumes:
+      - ./user-service:/app
+      - ./user-service/node_modules:/app/node_modules
     ports:
       - "3001:3001"
-    environment:
-      - NODE_ENV=production
     networks:
       - peerprep-network
     env_file:

peerprep-fe/Dockerfile

@@ -1,29 +1,39 @@
-# Use an official Node runtime as the base image
-FROM node:18-alpine
+FROM node:18-alpine AS base
 
-# Install pnpm globally
 RUN npm install -g pnpm
 
-# Set the working directory in the container
 WORKDIR /app
 
 # Copy package.json and pnpm-lock.yaml
 COPY package*.json pnpm-lock.yaml ./
 
-# Install dependencies using pnpm
-RUN pnpm install
+RUN pnpm install --frozen-lockfile
 
-# Install zustand explicitly (in case it's still not included)
+# Install zustand explicitly
 RUN pnpm add zustand
 
+# Development stage
+FROM base AS development
+ENV NODE_ENV=development
+
 # Copy the rest of the application code
 COPY . .
 
-# Build the Next.js application
-RUN pnpm run build
+# Note: Don't expose ports here, Compose will handle that for us
+
+# Start the app in dev mode with hot-reloading
+CMD ["pnpm", "dev"]
+
+
+# Production stage
+FROM base AS production
+ENV NODE_ENV=production
+ENV PORT=3000
+
+COPY . .
+RUN pnpm build
 
-# Expose the port the app runs on
-EXPOSE 3000
+EXPOSE ${PORT}
 
-# Start the application
-CMD ["pnpm", "start"]
+# Start the app in production mode
+CMD ["pnpm", "start"]