Integrate frontend UI into backend container and update Dockerfile to multi-stage build

Dockerfile

@@ -1,33 +1,27 @@
-# Step 1: Build Phase | مرحلة البناء
+# Step 1: Build Frontend | مرحلة بناء الواجهة
-FROM node:20-alpine AS builder
+FROM node:20-alpine AS frontend-builder
-
+WORKDIR /usr/src/app/frontend
-WORKDIR /usr/src/app
+COPY frontend/package*.json ./
-
-# Copy package files | نسخ ملفات الحزم
-COPY package*.json ./
-
-# Install dependencies | تثبيت الاعتماديات
 RUN npm install
-
+COPY frontend/ ./
-# Copy source code | نسخ كود المصدر
-COPY . .
-
-# Build the app | بناء التطبيق
 RUN npm run build
 
-# Step 2: Production Phase | مرحلة الإنتاج
+# Step 2: Build Backend | مرحلة بناء الخلفية
-FROM node:20-alpine
+FROM node:20-alpine AS builder
-
 WORKDIR /usr/src/app
-
-# Copy package files | نسخ ملفات الحزم
 COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
 
-# Install only production dependencies | تثبيت اعتماديات الإنتاج فقط
+# Step 3: Production Phase | مرحلة الإنتاج
+FROM node:20-alpine
+WORKDIR /usr/src/app
+COPY package*.json ./
 RUN npm install --only=production
-
-# Copy built files from builder | نسخ الملفات المبنية من مرحلة البناء
 COPY --from=builder /usr/src/app/dist ./dist
+# Copy frontend build to backend public folder | نسخ واجهة المستخدم إلى الملفات العامة
+COPY --from=frontend-builder /usr/src/app/frontend/dist ./public
 
 # Expose port | فتح المنفذ
 EXPOSE 3660

docker-compose.yml

@@ -32,7 +32,7 @@ services:
     image: redis:alpine
     container_name: ads-analytics-redis
     ports:
-      - "6379:6379"
+      - "6380:6379"
     restart: always
 
 volumes:

frontend/src/api.js

@@ -1,6 +1,6 @@
 import { auth } from './auth.js';
 
-export const BASE_URL = 'http://localhost:3001/api';
+export const BASE_URL = '/api';
 
 /**
  * API Wrapper for SaaS Meta Backend

src/app.controller.ts

@@ -4,15 +4,14 @@ import { ApiOperation, ApiResponse, ApiTags } from '@nestjs/swagger';
 @ApiTags('root')
 @Controller()
 export class AppController {
-  @Get()
+  @Get('status')
-  @ApiOperation({ summary: 'Welcome to the API | الترحيب بالـ API' })
+  @ApiOperation({ summary: 'API Status | حالة الـ API' })
   @ApiResponse({ status: 200, description: 'API is running | الـ API يعمل بنجاح' })
   getHello() {
     return {
-      message: 'Welcome to Ads Analytics SaaS API',
+      message: 'Ads Analytics SaaS API',
-      version: '1.0',
-      docs: '/api/docs',
       status: 'active',
+      docs: '/api/docs',
     };
   }
 }

src/main.ts

@@ -23,9 +23,7 @@ async function bootstrap() {
 
   // Serve Static Assets | تقديم الملفات الثابتة
   // This allows us to share ad images for analysis
-  app.useStaticAssets(join(__dirname, '..', 'public'), {
+  app.useStaticAssets(join(__dirname, '..', 'public'));
-    prefix: '/api',
-  });
 
   // Get ConfigService for port | الحصول على خدمة الإعدادات للمنفذ
   const configService = app.get(ConfigService);