From d5cb1ded3e56c61fff8efbe012f14983f1eeefa1 Mon Sep 17 00:00:00 2001
From: MUIS1436 <muhammadusamaintezar@gmail.com>
Date: Sat, 31 Jan 2026 10:03:30 +0500
Subject: [PATCH] chore(docker): add Dockerfiles and docker-compose for
 frontend and backend

- Add frontend Dockerfile with multi-stage build using node and nginx
- Add backend Dockerfile with multi-stage build to compile and serve app
- Add docker-compose.yml to define frontend and backend services with environment variables
- Configure nginx to serve SPA, enable gzip compression and caching for static assets
- Set up nginx reverse proxy for API requests to backend service on /api path
---
 Dockerfile         | 29 +++++++++++++++++++++++++++++
 docker-compose.yml | 28 ++++++++++++++++++++++++++++
 nginx.conf         | 31 +++++++++++++++++++++++++++++++
 server/Dockerfile  | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 120 insertions(+)
 create mode 100644 Dockerfile
 create mode 100644 docker-compose.yml
 create mode 100644 nginx.conf
 create mode 100644 server/Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..2e8f765
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,29 @@
+# Frontend Dockerfile
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built assets
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..2bfc8e7
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,28 @@
+version: '3.8'
+
+services:
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    environment:
+      - VITE_MS_CLIENT_ID=${VITE_MS_CLIENT_ID}
+      - VITE_GOOGLE_CLIENT_ID=${VITE_GOOGLE_CLIENT_ID}
+
+  backend:
+    build:
+      context: ./server
+      dockerfile: Dockerfile
+    ports:
+      - "3001:3001"
+    environment:
+      - PORT=3001
+      - VITE_MS_CLIENT_ID=${VITE_MS_CLIENT_ID}
+      - MS_CLIENT_SECRET=${MS_CLIENT_SECRET}
+      - VITE_GOOGLE_CLIENT_ID=${VITE_GOOGLE_CLIENT_ID}
+      - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
+      - REDIRECT_URI=${REDIRECT_URI}
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..deab397
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,31 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
+
+    # Handle SPA routing
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Proxy API requests to backend
+    location /api {
+        proxy_pass http://backend:3001;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+}
diff --git a/server/Dockerfile b/server/Dockerfile
new file mode 100644
index 0000000..3c129e6
--- /dev/null
+++ b/server/Dockerfile
@@ -0,0 +1,32 @@
+# Backend Dockerfile
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Build TypeScript
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy package files and install production deps only
+COPY package*.json ./
+RUN npm ci --only=production
+
+# Copy built code
+COPY --from=builder /app/dist ./dist
+
+EXPOSE 3001
+
+CMD ["node", "dist/index.js"]