updatedApproch

Author: UtkarshMishra-Microsoft

azure_custom.yaml

@@ -23,8 +23,17 @@ hooks:
           azd env set AZURE_CONTAINER_REGISTRY_ENDPOINT "$acrName.azurecr.io"
           azd env set CONTAINER_REGISTRY_HOSTNAME "$acrName.azurecr.io"
         }
+        
+        # Build frontend
+        Write-Host "`nBuilding frontend..."
+        & ".\infra\scripts\package_frontend.ps1"
+        
+        if ($LASTEXITCODE -ne 0) {
+            Write-Host "❌ Failed to build frontend"
+            exit 1
+        }
       shell: pwsh
-      continueOnError: true
+      continueOnError: false
     posix:
       run: |
         echo "Setting up container registry variables..."
@@ -37,8 +46,18 @@ hooks:
           azd env set AZURE_CONTAINER_REGISTRY_ENDPOINT "$ACR_NAME.azurecr.io"
           azd env set CONTAINER_REGISTRY_HOSTNAME "$ACR_NAME.azurecr.io"
         fi
+        
+        # Build frontend
+        echo ""
+        echo "Building frontend..."
+        bash ./infra/scripts/package_frontend.sh
+        
+        if [ $? -ne 0 ]; then
+            echo "❌ Failed to build frontend"
+            exit 1
+        fi
       shell: sh
-      continueOnError: true
+      continueOnError: false
 
   # Pre-deploy hook to build and push containers
   predeploy:

infra/scripts/package_frontend.ps1

@@ -0,0 +1,70 @@
+#!/usr/bin/env pwsh
+
+Write-Host "`n========================================" 
+Write-Host "  Frontend Build Script (PowerShell)"
+Write-Host "  Time: $(Get-Date -Format 'yyyy-MM-dd HH:mm:ss')"
+Write-Host "========================================`n"
+
+# Get the script directory and navigate to frontend
+$scriptDir = Split-Path -Parent $MyInvocation.MyCommand.Path
+$frontendDir = Join-Path $scriptDir "..\..\src\frontend"
+$distDir = Join-Path $scriptDir "..\..\dist"
+
+Write-Host "📂 Frontend directory: $frontendDir"
+Write-Host "📂 Output directory: $distDir`n"
+
+# Check if frontend directory exists
+if (-not (Test-Path $frontendDir)) {
+    Write-Host "❌ Frontend directory not found: $frontendDir"
+    exit 1
+}
+
+# Navigate to frontend directory
+Push-Location $frontendDir
+
+try {
+    # Install dependencies
+    Write-Host "📦 Installing frontend dependencies..."
+    npm ci
+    
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "❌ Failed to install dependencies"
+        exit 1
+    }
+    
+    # Build the frontend
+    Write-Host "`n🏗️  Building frontend application..."
+    npm run build
+    
+    if ($LASTEXITCODE -ne 0) {
+        Write-Host "❌ Failed to build frontend"
+        exit 1
+    }
+    
+    # Create dist directory if it doesn't exist
+    if (-not (Test-Path $distDir)) {
+        New-Item -ItemType Directory -Path $distDir -Force | Out-Null
+    }
+    
+    # Copy build output to dist directory
+    Write-Host "`n📋 Copying build output to dist directory..."
+    # Vite outputs to ../static from frontend directory, which is src/static
+    $buildOutput = Join-Path $scriptDir "..\..\src\static"
+    
+    if (Test-Path $buildOutput) {
+        Copy-Item -Path "$buildOutput\*" -Destination $distDir -Recurse -Force
+        Write-Host "✅ Frontend build completed successfully!"
+        Write-Host "   Build output copied from: $buildOutput"
+    } else {
+        Write-Host "❌ Build output directory not found: $buildOutput"
+        exit 1
+    }
+    
+} finally {
+    # Return to original directory
+    Pop-Location
+}
+
+Write-Host "`n========================================" 
+Write-Host "✅ Frontend packaging completed!"
+Write-Host "========================================`n"

infra/scripts/package_frontend.sh

@@ -0,0 +1,69 @@
+#!/bin/bash
+
+echo ""
+echo "========================================"
+echo "  Frontend Build Script (Bash)"
+echo "  Time: $(date '+%Y-%m-%d %H:%M:%S')"
+echo "========================================"
+echo ""
+
+# Get the script directory and navigate to frontend
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
+FRONTEND_DIR="$SCRIPT_DIR/../../src/frontend"
+DIST_DIR="$SCRIPT_DIR/../../dist"
+
+echo "📂 Frontend directory: $FRONTEND_DIR"
+echo "📂 Output directory: $DIST_DIR"
+echo ""
+
+# Check if frontend directory exists
+if [ ! -d "$FRONTEND_DIR" ]; then
+    echo "❌ Frontend directory not found: $FRONTEND_DIR"
+    exit 1
+fi
+
+# Navigate to frontend directory
+cd "$FRONTEND_DIR" || exit 1
+
+# Install dependencies
+echo "📦 Installing frontend dependencies..."
+npm ci
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to install dependencies"
+    exit 1
+fi
+
+# Build the frontend
+echo ""
+echo "🏗️  Building frontend application..."
+npm run build
+
+if [ $? -ne 0 ]; then
+    echo "❌ Failed to build frontend"
+    exit 1
+fi
+
+# Create dist directory if it doesn't exist
+mkdir -p "$DIST_DIR"
+
+# Copy build output to dist directory
+echo ""
+echo "📋 Copying build output to dist directory..."
+# Vite outputs to ../static from frontend directory, which is src/static
+BUILD_OUTPUT="$SCRIPT_DIR/../../src/static"
+
+if [ -d "$BUILD_OUTPUT" ]; then
+    cp -r "$BUILD_OUTPUT"/* "$DIST_DIR/"
+    echo "✅ Frontend build completed successfully!"
+    echo "   Build output copied from: $BUILD_OUTPUT"
+else
+    echo "❌ Build output directory not found: $BUILD_OUTPUT"
+    exit 1
+fi
+
+echo ""
+echo "========================================"
+echo "✅ Frontend packaging completed!"
+echo "========================================"
+echo ""

src/WebApp.Dockerfile

@@ -2,10 +2,10 @@ FROM node:20-alpine AS frontend
 RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
 
 WORKDIR /home/node/app 
-COPY ./src/frontend/package*.json ./  
+COPY ./frontend/package*.json ./  
 USER node
 RUN npm ci  
-COPY --chown=node:node ./src/frontend/ ./frontend  
+COPY --chown=node:node ./frontend/ ./frontend  
 # COPY --chown=node:node ./static/ ./static  
 WORKDIR /home/node/app/frontend
 RUN npm run build
@@ -19,13 +19,13 @@ RUN apk add --no-cache --virtual .build-deps \
     && apk add --no-cache \  
     libpq
 
-COPY ./src/requirements.txt /usr/src/app/  
+COPY ./requirements.txt /usr/src/app/  
 RUN pip install --upgrade pip setuptools wheel \
     && pip install --no-cache-dir -r /usr/src/app/requirements.txt \  
     && pip install --no-cache-dir uwsgi \ 
     && rm -rf /root/.cache  
 
-COPY ./src/ /usr/src/app/
+COPY ./ /usr/src/app/
 COPY --from=frontend /home/node/app/static  /usr/src/app/static/
 WORKDIR /usr/src/app  
 EXPOSE 80