feat(docker): update Dockerfiles to use npm instead of yarn and restructure docker-compose files

Author: md-asharaf

Dockerfile.dev

@@ -1,21 +1,14 @@
-# Stage 1: Build the frontend
 FROM node:20-alpine
 
-# Set the working directory
 WORKDIR /app
 
-# Copy package.json 
 
 COPY package.json .
 
-# Install all dependencies
-RUN yarn install
+RUN npm install
 
-# Copy the rest of the application files
 COPY . .
 
-# Expose the port for the application
-EXPOSE 3000
+EXPOSE 5173
 
-# Start Nginx
-CMD ["yarn","dev", "--port", "3000","--host"]
+CMD ["npm","run","dev"]

Dockerfile Dockerfile.prodDockerfile renamed to Dockerfile.prod

@@ -8,12 +8,12 @@ WORKDIR /app
 COPY package.json .
 
 # Install production dependencies using Yarn
-RUN yarn install --production
+RUN npm install --production
 # Copy the rest of the application files
 COPY . .
 
 # Build the frontend using Yarn
-RUN yarn run build
+RUN npm run build
 
 # Stage 2: Serve the application with Nginx
 FROM nginx:alpine

backend/Dockerfile.dev

@@ -8,7 +8,7 @@ WORKDIR /app
 COPY package.json ./
 
 # Install all dependencies using Yarn
-RUN yarn install
+RUN npm install
 
 # Copy the rest of the application files
 COPY . .
@@ -17,4 +17,4 @@ COPY . .
 EXPOSE 5000
 
 # Start the server in dev mode using Yarn
-CMD ["yarn", "dev"]
+CMD ["npm","run", "dev"]

backend/Dockerfile backend/Dockerfile.prodbackend/Dockerfile renamed to backend/Dockerfile.prod

@@ -8,7 +8,7 @@ WORKDIR /app
 COPY package.json ./
 
 # Install production dependencies using Yarn
-RUN yarn install --production
+RUN npm install --production
 
 # Copy the rest of the application files
 COPY . .
@@ -17,4 +17,4 @@ COPY . .
 EXPOSE 5000
 
 # Start the server in production mode using Yarn
-CMD ["yarn", "start"]
+CMD ["npm","run", "start"]

docker-compose.dev.yml

@@ -0,0 +1,70 @@
+services:
+  frontend:
+    image: frontend
+    container_name: frontend-container
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "5173:5173"
+    env_file:
+      - .env
+    volumes:
+      - .:/app
+      - /app/node_modules
+    depends_on:
+      - backend
+    networks:
+      - app-network-1
+    profiles:
+      - dev
+  backend:
+    image: backend
+    container_name: backend-container
+    build:
+      context: ./backend
+      dockerfile: Dockerfile.dev
+    ports:
+      - "5000:5000"
+    env_file:
+      - ./backend/.env
+    volumes:
+      - ./backend:/app
+      - /app/node_modules
+    networks:
+      - app-network-1
+    profiles:
+      - dev
+  frontend-prod:
+    image: frontend-prod
+    container_name: frontend-prod-container
+    build:
+      context: .
+      dockerfile: Dockerfile.prod
+    ports:
+      - "3000:3000"
+    env_file:
+      - .env
+    depends_on:
+      - backend-prod
+    networks:
+      - app-network-2
+    profiles:
+      - prod
+  backend-prod:
+    image: backend-prod
+    container_name: backend-prod-container
+    build:
+      context: backend
+      dockerfile: Dockerfile.prod
+    ports:
+      - "5000:5000"
+    env_file:
+      - backend/.env
+    networks:
+      - app-network-2
+    profiles:
+      - prod
+networks:
+  app-network-1:
+  app-network-2:

docker-compose.prod.yml

@@ -4,10 +4,12 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "docker:dev":"docker compose --profile dev up --build",
+    "docker:prod":"docker compose --profile prod up -d --build"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",