Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 104 additions & 23 deletions azure-pipeline/build_frontend.yml
Original file line number Diff line number Diff line change
@@ -1,47 +1,128 @@
# =====================================================
# Template: Build Frontend
# =====================================================
# Builds the React frontend application using Vite
# Supports validation builds (PR) and artifact publishing (CD)
# =====================================================

parameters:
- name: environment
type: string
values:
- dev
- qa
- uat
- prod

- name: isValidationBuild
type: boolean
default: false

- name: nodeVersion
type: string
default: "22.x"
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default Node.js version is set to "22.x", but the main pipeline specifies "24.x" in the global variables. Update this default to match "24.x" to ensure consistency across all builds.

Suggested change
default: "22.x"
default: "24.x"

Copilot uses AI. Check for mistakes.

jobs:
- job: Build_Frontend_${{ parameters.environment }}
displayName: "Build Frontend [${{ parameters.environment }}]"
displayName: "🏗️ Build Frontend [${{ parameters.environment }}]"
pool:
vmImage: "ubuntu-latest"
vmImage: ubuntu-latest

variables:
- name: VITE_VERSION_NUMBER
value: $(Build.BuildNumber)
- name: VITE_ENV
value: "${{ parameters.environment }}"
value: ${{ parameters.environment }}
- name: VITE_API_URL
value: "$(api-url-${{ parameters.environment }})"
value: $(api-url-${{ parameters.environment }})
- name: VITE_GA_TRACKING_ID
value: "$(ga-tracking-id-${{ parameters.environment }})"
value: $(ga-tracking-id-${{ parameters.environment }})
- name: VITE_GENERATE_SOURCEMAP
value: false
value: ${{ eq(parameters.environment, 'dev') }}
- name: CI
value: true

steps:
# ---------------------------------------------------
# Setup Node.js Environment
# ---------------------------------------------------
- task: NodeTool@0
displayName: "Node.js Version"
displayName: "📦 Setup Node.js ${{ parameters.nodeVersion }}"
inputs:
versionSpec: "22.x"
versionSpec: ${{ parameters.nodeVersion }}

# ---------------------------------------------------
# Prepare Cache Directory
# ---------------------------------------------------
- script: mkdir -p $(System.DefaultWorkingDirectory)/frontend/.yarn/cache
displayName: "📁 Create cache directory"
workingDirectory: $(System.DefaultWorkingDirectory)

# ---------------------------------------------------
# Cache Dependencies
# ---------------------------------------------------
- task: Cache@2
displayName: "📥 Cache Yarn dependencies"
inputs:
key: 'yarn | "$(Agent.OS)" | frontend/yarn.lock'
restoreKeys: |
yarn | "$(Agent.OS)"
yarn
path: $(System.DefaultWorkingDirectory)/frontend/.yarn/cache
continueOnError: true

# ---------------------------------------------------
# Install Dependencies
# ---------------------------------------------------
- script: |
cd frontend
corepack enable
yarn set version stable
yarn
yarn build
displayName: "Install and Build using Yarn"
yarn install --immutable
displayName: "📥 Install dependencies"
workingDirectory: $(System.DefaultWorkingDirectory)/frontend
env:
YARN_CACHE_FOLDER: $(System.DefaultWorkingDirectory)/frontend/.yarn/cache

- task: CopyFiles@2
displayName: "Copy files to build folder"
inputs:
sourceFolder: "$(System.DefaultWorkingDirectory)/frontend/dist"
targetFolder: "$(Build.ArtifactStagingDirectory)"
cleanTargetFolder: true
# ---------------------------------------------------
# Code Quality Checks (PR only)
# ---------------------------------------------------
- ${{ if eq(parameters.isValidationBuild, true) }}:
- script: yarn lint
displayName: "🔍 Run linting"
workingDirectory: $(System.DefaultWorkingDirectory)/frontend

- task: PublishBuildArtifacts@1
displayName: "Publish artifact"
inputs:
pathtoPublish: "$(Build.ArtifactStagingDirectory)"
artifactName: "build_frontend_${{ parameters.environment }}"
- script: yarn tsc --noEmit
displayName: "🔍 TypeScript type check"
workingDirectory: $(System.DefaultWorkingDirectory)/frontend
continueOnError: false

# ---------------------------------------------------
# Build Application
# ---------------------------------------------------
- script: yarn build
displayName: "🏗️ Build application"
workingDirectory: $(System.DefaultWorkingDirectory)/frontend
env:
VITE_VERSION_NUMBER: $(VITE_VERSION_NUMBER)
VITE_ENV: $(VITE_ENV)
VITE_API_URL: $(VITE_API_URL)
VITE_GA_TRACKING_ID: $(VITE_GA_TRACKING_ID)
VITE_GENERATE_SOURCEMAP: $(VITE_GENERATE_SOURCEMAP)

# ---------------------------------------------------
# Publish Artifacts (CD only)
# ---------------------------------------------------
- ${{ if eq(parameters.isValidationBuild, false) }}:
- task: CopyFiles@2
displayName: "📋 Copy build files"
inputs:
sourceFolder: $(System.DefaultWorkingDirectory)/frontend/dist
targetFolder: $(Build.ArtifactStagingDirectory)/frontend
cleanTargetFolder: true

- task: PublishPipelineArtifact@1
displayName: "📤 Publish build artifact"
inputs:
targetPath: $(Build.ArtifactStagingDirectory)/frontend
artifact: frontend-${{ parameters.environment }}
publishLocation: pipeline
148 changes: 126 additions & 22 deletions azure-pipeline/deploy_frontend.yml
Original file line number Diff line number Diff line change
@@ -1,53 +1,157 @@
# =====================================================
# Template: Deploy Frontend
# =====================================================
# Deploys React frontend to Azure Blob Storage
# with CDN cache purge
# =====================================================

parameters:
- name: environment
type: string
values:
- dev
- qa
- uat
- prod

- name: commandOptions
type: string
- name: depends_on

- name: dependsOn
type: object
default: ""
default: []

- name: terraformVersion
type: string
default: "1.10.3"
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default Terraform version is set to "1.10.3", but the Terraform configuration requires version ">= 1.14.0" in provider.tf, and the main pipeline specifies version "1.14.4". Update this default value to match "1.14.4" to prevent version mismatch issues.

Suggested change
default: "1.10.3"
default: "1.14.4"

Copilot uses AI. Check for mistakes.

jobs:
- deployment: "Deploy_Frontend_${{ parameters.environment }}"
displayName: "Deploy Frontend [${{ parameters.environment }}]"
- deployment: Deploy_Frontend_${{ parameters.environment }}
displayName: "🚀 Deploy Frontend [${{ parameters.environment }}]"
environment: ${{ parameters.environment }}
pool:
vmImage: "windows-latest"
${{ if ne(parameters.depends_on, '')}}:
dependsOn: ${{ parameters.depends_on }}
vmImage: ubuntu-latest
${{ if ne(length(parameters.dependsOn), 0) }}:
dependsOn: ${{ parameters.dependsOn }}
condition: succeeded()

variables:
# Storage account: st + project_short_name + environment (no hyphens, max 24 chars)
- name: storageAccountName
value: st$(PROJECT_SHORT_NAME)${{ parameters.environment }}
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The storage account naming logic in the pipeline (st + PROJECT_SHORT_NAME + environment) doesn't match the Terraform logic which uses substr(replace("st${var.project_short_name}${var.environment}", "-", ""), 0, 24). If PROJECT_SHORT_NAME or the environment contains hyphens, the pipeline variable won't match the actual storage account name created by Terraform, causing deployment failures. The pipeline should use the same logic or reference the Terraform output.

Suggested change
value: st$(PROJECT_SHORT_NAME)${{ parameters.environment }}
value: ${{ substring(replace(format('st{0}{1}', variables['PROJECT_SHORT_NAME'], parameters.environment), '-', ''), 0, 24) }}

Copilot uses AI. Check for mistakes.
- name: resourceGroupName
value: rg-$(PROJECT_SHORT_NAME)-${{ parameters.environment }}
- name: frontdoorProfileName
value: afd-$(PROJECT_SHORT_NAME)-${{ parameters.environment }}
- name: frontdoorEndpointName
value: ep-$(PROJECT_SHORT_NAME)-${{ parameters.environment }}

strategy:
runOnce:
deploy:
steps:
# ---------------------------------------------------
# Checkout Repository
# ---------------------------------------------------
- checkout: self
clean: true
fetchDepth: 1

# ---------------------------------------------------
# Download Build Artifact
# ---------------------------------------------------
- task: DownloadPipelineArtifact@2
displayName: "📥 Download build artifact"
inputs:
artifact: frontend-${{ parameters.environment }}
path: $(Pipeline.Workspace)/frontend

# ---------------------------------------------------
# Apply Terraform Infrastructure
# ---------------------------------------------------
- template: terraform_steps.yml
parameters:
environment: ${{ parameters.environment }}
commandOptions: ${{ parameters.commandOptions }}
lastCommand: "apply"
command: apply
terraformVersion: ${{ parameters.terraformVersion }}

# ---------------------------------------------------
# Deploy to Azure Blob Storage
# ---------------------------------------------------
- task: AzureCLI@2
displayName: "🗑️ Clear existing blobs"
inputs:
azureSubscription: $(ARM_SERVICE_CONNECTION_NAME)
scriptType: bash
scriptLocation: inlineScript
addSpnToEnvironment: true
failOnStandardError: true
inlineScript: |
set -euo pipefail

echo "Clearing existing content from storage..."
az storage blob delete-batch \
--account-name "$(storageAccountName)" \
--source '$web' \
--auth-mode login \
--only-show-errors

- task: AzureCLI@2
displayName: "Empty container and copy React build to blob storage"
displayName: "📤 Upload build to storage"
inputs:
azureSubscription: "$(ARM_SERVICE_CONNECTION_NAME)"
scriptType: ps
scriptLocation: "inlineScript"
azureSubscription: $(ARM_SERVICE_CONNECTION_NAME)
scriptType: bash
scriptLocation: inlineScript
addSpnToEnvironment: true
failOnStandardError: true
inlineScript: |
$storageAccountName = "sa$(PROJECT_SHORT_NAME)${{ parameters.environment }}"
$buildSourcePath = "$(Pipeline.Workspace)/build_frontend_${{ parameters.environment }}"
$containerName = '$web'
set -euo pipefail

az storage blob delete-batch --account-name $storageAccountName --source $containerName
az storage blob upload-batch --account-name $storageAccountName --destination $containerName --source $buildSourcePath
echo "Uploading build to Azure Blob Storage..."
az storage blob upload-batch \
--account-name "$(storageAccountName)" \
--destination '$web' \
--source "$(Pipeline.Workspace)/frontend" \
--auth-mode login \
--overwrite \
--only-show-errors

echo "✅ Upload completed successfully"

# ---------------------------------------------------
# Purge Azure Front Door Cache
# ---------------------------------------------------
- task: AzureCLI@2
displayName: "Purge CDN after React build deployment"
displayName: "🔄 Purge Front Door cache"
inputs:
azureSubscription: "$(ARM_SERVICE_CONNECTION_NAME)"
scriptType: ps
scriptLocation: "inlineScript"
azureSubscription: $(ARM_SERVICE_CONNECTION_NAME)
scriptType: bash
scriptLocation: inlineScript
failOnStandardError: false
Copy link

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cache purge task has failOnStandardError set to false, which means errors during cache purge will be silently ignored. While this prevents deployment failures due to cache purge issues, it could lead to users seeing stale content. Consider setting this to true and handling cache purge failures explicitly, or at least add logging to alert when cache purge fails.

Suggested change
failOnStandardError: false
failOnStandardError: true

Copilot uses AI. Check for mistakes.
inlineScript: |
az cdn endpoint purge -g rg-${{ parameters.environment }}-$(PROJECT_SHORT_NAME) -n cdne-${{ parameters.environment }}-$(PROJECT_SHORT_NAME) --profile-name cdnp-${{ parameters.environment }}-$(PROJECT_SHORT_NAME) --content-paths '/*' --no-wait
set -euo pipefail

echo "Purging Azure Front Door cache..."
az afd endpoint purge \
--resource-group "$(resourceGroupName)" \
--endpoint-name "$(frontdoorEndpointName)" \
--profile-name "$(frontdoorProfileName)" \
--content-paths '/*' \
--no-wait

echo "✅ Front Door cache purge initiated"

# ---------------------------------------------------
# Deployment Summary
# ---------------------------------------------------
- script: |
echo "=============================================="
echo "🎉 Deployment Summary"
echo "=============================================="
echo "Environment: ${{ parameters.environment }}"
echo "Build Version: $(Build.BuildNumber)"
echo "Storage Account: $(storageAccountName)"
echo "Front Door: $(frontdoorEndpointName)"
echo "=============================================="
displayName: "📊 Deployment summary"
Loading
Loading