Deploying an Angular 13 Universal App in Azure web app service

Question

I'm trying to deploy an Angular 13 Universal App in Azure web app service using azure devops pipeline but getting below error when trying to access azure webapp.

You do not have permission to view this directory or page.

Where as I wrote below azure pipeline -

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: windows-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

- script: |
    npm install -g @angular/cli
  displayName: 'npm install cli'

- script: |
   npm install
  displayName: 'npm install'

- script: |
    npm run build:ssr --prod
  displayName: 'npm build'
- task: PowerShell@2
  inputs:
    targetType: 'inline'
    script: 'echo $pwd.Path echo "::set-output name=PWD::$pwd"'

- task: CopyFiles@2
  displayName: 'Copy browser directory from dist directory to the root'
  inputs:
    Contents: '$(Build.SourcesDirectory)/dist/app/browser'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/dist/app/browser'


- task: CopyFiles@2
  displayName: 'Copy main.js to the root'
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)/dist/app/server'
    Contents:  main.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist/app'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

- upload: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
  artifact: drop


- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'appconnection'
    appType: 'webApp'
    WebAppName: 'appwebsite'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

Also tried with this another pipeline which mentioned below -

# Node.js with Angular
# Build a Node.js project that uses Angular.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://learn.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: windows-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

- script: |
    npm install @angular/cli -g
  displayName: 'npm install cli'

- script: |
   npm install
  displayName: 'npm install'


- script: |
    npm run build:ssr
  displayName: 'build the projec'


#- task: PowerShell@2
#  inputs:
#    targetType: 'inline'
#    script: 'echo $pwd.Path echo "::set-output name=PWD::$pwd"'

- task: CopyFiles@2
  displayName: 'Copy browser directory from dist directory to the root'
  inputs:
    SourceFolder: '$(Build.SourcesDirectory)/dist'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app/dist'


- task: CopyFiles@2
  displayName: 'Copy main.js to the root'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'
    Contents:  main.js
    TargetFolder: '$(Build.ArtifactStagingDirectory)/app'

- task: DeleteFiles@1
  displayName: 'Delete the dist/main.js'
  inputs:
    SourceFolder: '$(Build.ArtifactStagingDirectory)/app/dist'
    Contents: 'main.js'


- task: AzureRmWebAppDeployment@4
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'appconnection'
    appType: 'webApp'
    WebAppName: 'appwebsite1'
    deployToSlotOrASE: true
    ResourceGroupName: 'RG-app'
    SlotName: 'production'
    packageForLinux: '$(Build.ArtifactStagingDirectory)/app'
    WebConfigParameters: '-Handler iisnode -NodeStartFile server.js -appType node'
    enableCustomDeployment: true
    DeploymentType: 'webDeploy'
    RemoveAdditionalFilesFlag: true

Where both pipeline are running successfully but web app is not accessible from any of them, Any suggestion here what exactly I am doing wrong here.

Answer 1

The right Answer is as below -

• virtual directory path / in portal under configuration => path mappings is already corrected. There was no change.
• we changed directory structure for dist directory in azure pipeline in CopyFiles@2 task like this -

SourceFolder: '$(Build.SourcesDirectory)/dist' TargetFolder:'$(Build.ArtifactStagingDirectory)/app/dist'

and below changes for WebConfigParameters in AzureRmWebAppDeployment@4 task

packageForLinux: '$(Build.ArtifactStagingDirectory)/app'

WebConfigParameters: '-Handler iisnode -NodeStartFile dist/actual_build_app_directory/server/main.js -appType node'

Answer 2

You do not have permission to view this directory or page.

Posting our discussion as an answer , so that it will be helpful for other community members.

• Verify that all the folders are deployed.
• Make sure the folders/ files/directory structure is in correct format.
• web.config must be in the root directory.
• Check whether the specified default document is there in the deployed folder structure.
• Add virtual directory path / in portal under configuration => path mappings