fix: update frontend image names and improve Dockerfile formatting

Author: Wcoder547

.github/workflows/deploy.yml

@@ -6,21 +6,25 @@ on:
 
 env:
   BACKEND_IMAGE: ${{ secrets.DOCKERHUB_USERNAME }}/mern-chat-app-backend
-  FRONTEND_IMAGE: ${{ secrets.DOCKERHUB_USERNAME }}/mern-chat-app-frontend
+  FRONTEND_STAGING_IMAGE: ${{ secrets.DOCKERHUB_USERNAME }}/mern-chat-app-frontend-staging
+  FRONTEND_PROD_IMAGE: ${{ secrets.DOCKERHUB_USERNAME }}/mern-chat-app-frontend-prod
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
+
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
+
       - name: Build and push backend
         uses: docker/build-push-action@v5
         with:
@@ -29,12 +33,26 @@ jobs:
           tags: ${{ env.BACKEND_IMAGE }}:latest
           cache-from: type=gha
           cache-to: type=gha,mode=max
-      - name: Build and push frontend
+
+      - name: Build and push frontend (staging)
+        uses: docker/build-push-action@v5
+        with:
+          context: ./Front-end
+          push: true
+          tags: ${{ env.FRONTEND_STAGING_IMAGE }}:latest
+          build-args: |
+            VITE_SERVER=${{ secrets.STG_VITE_SERVER }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Build and push frontend (prod)
         uses: docker/build-push-action@v5
         with:
           context: ./Front-end
           push: true
-          tags: ${{ env.FRONTEND_IMAGE }}:latest
+          tags: ${{ env.FRONTEND_PROD_IMAGE }}:latest
+          build-args: |
+            VITE_SERVER=${{ secrets.PROD_VITE_SERVER }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
@@ -52,9 +70,9 @@ jobs:
           timeout: 60s
           script: |
             cd ~/MERN-CHAT-APP
-            docker-compose pull
+            docker compose pull
             sleep 5
-            docker-compose up -d --remove-orphans
+            docker compose up -d --remove-orphans
             docker image prune -f
             echo "Staging deployed"
 
@@ -72,8 +90,8 @@ jobs:
           timeout: 60s
           script: |
             cd ~/MERN-CHAT-APP
-            docker-compose pull
+            docker compose pull
             sleep 5
-            docker-compose up -d --remove-orphans
+            docker compose up -d --remove-orphans
             docker image prune -f
             echo "Production deployed"

Front-end/Dockerfile

@@ -1,31 +1,23 @@
 # ---- Build Stage ----
 FROM node:24-slim AS build
-
 WORKDIR /app
-
 # pnpm setup
 ENV PNPM_HOME="/pnpm"
 ENV PATH="$PNPM_HOME:$PATH"
 RUN corepack enable
-
 # Copy dependency files first (cache optimization)
 COPY package.json pnpm-lock.yaml ./
-
 RUN pnpm install --frozen-lockfile
-
 # Copy source code
 COPY . .
-
+# Inject build-time env var
+ARG VITE_SERVER
+ENV VITE_SERVER=$VITE_SERVER
 # Build (Vite to /dist)
 RUN pnpm build
-
 # ---- Production Stage ----
 FROM nginx:alpine
-
 COPY --from=build /app/dist /usr/share/nginx/html
-
 COPY nginx.conf /etc/nginx/conf.d/default.conf
-
 EXPOSE 80
-
 CMD ["nginx", "-g", "daemon off;"]