When deploying an Angular app to Azure App Service (Windows) via ZIP, a web.config
file is required to properly serve static files like index.html
. Without it, Azure may throw errors ( dwasmod.dll
).
To resolve the issue, I created a sample Angular application and added a web.config file to the root directory of the project.
Thanks to @Martin Brandl for clear explanation I've referred this blog and created a web.config
file in my project.
Web.config file:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/index.html" />
</rule>
</rules>
</rewrite>
<staticContent>
<mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>
</system.webServer>
</configuration>
Pipeline.yaml file:
trigger:
branches:
include:
- main
pool:
vmImage: 'windows-latest'
variables:
buildOutput: '$(Build.SourcesDirectory)/dist/angular-app/browser'
stages:
- stage: Build
jobs:
- job: BuildAngularApp
steps:
- task: NodeTool@0
inputs:
versionSpec: '20.x'
displayName: 'Install Node.js'
- script: |
echo Installing Angular CLI and dependencies...
npm install -g @angular/cli
npm ci
echo Building Angular App...
ng build --configuration production
displayName: 'Install and Build Angular App'
- task: CopyFiles@2
displayName: 'Copy web.config to build output'
inputs:
SourceFolder: '$(Build.SourcesDirectory)'
Contents: 'web.config'
TargetFolder: '$(buildOutput)'
- task: ArchiveFiles@2
displayName: 'Create deployment ZIP'
inputs:
rootFolderOrFile: '$(buildOutput)'
includeRootFolder: false
archiveType: 'zip'
archiveFile: '$(Build.ArtifactStagingDirectory)/deployment.zip'
replaceExistingArchive: true
- task: PublishBuildArtifacts@1
displayName: 'Publish ZIP Artifact'
inputs:
PathtoPublish: '$(Build.ArtifactStagingDirectory)/deployment.zip'
ArtifactName: 'drop'
- stage: Deploy
dependsOn: Build
condition: succeeded()
jobs:
- deployment: DeployToAzure
environment: 'production'
strategy:
runOnce:
deploy:
steps:
- download: current
artifact: drop
- task: AzureWebApp@1
displayName: 'Deploy to Azure App Service'
inputs:
azureSubscription: '<azure-subscription>'
appType: 'webApp'
appName: '<azure-app>'
package: '$(Pipeline.Workspace)/drop/deployment.zip'
I've successfully deployed application to Azure App Service (Windows) via Azure DevOps.
Set WEBSITE_RUN_FROM_PACKAGE
to 0
in environment variables section of your App service.
Go to Configuration
section of you web app -> Path mappings - > open virtual path and add below path
site\wwwroot\angular-app\browser
Prouction output: