Angular Universal with Azure App Service not working

Question

I created an Angular universal app which is working fine in local but when I try to deploy it in Azure App Service its deploying successfully but not running the app. Getting 403 forbidden.

`# Node.js with Angular

trigger:

• development

pool: vmImage: "ubuntu-latest"

stages:

• stage: Build displayName: Build stage jobs:

  • job: Build pool: vmImage: "ubuntu-latest" steps:

    • task: NodeTool@0 inputs: versionSpec: "18.x" displayName: "Install Node.js 18.x"

    • script: | cd app/ npm install -g @angular/cli npm install --legacy-peer-deps npm run build:dev:ssr

      displayName: "npm install and build" workingDirectory: "$(Build.SourcesDirectory)"

    • task: CopyFiles@2 inputs: SourceFolder: "$(Build.SourcesDirectory)/dist/app/browser" TargetFolder: "$(Build.ArtifactStagingDirectory)/dist/app" displayName: "Copy dist browser folder to artifact staging directory"

    • task: CopyFiles@2 inputs: SourceFolder: "$(Build.SourcesDirectory)/dist/app/server" Contents: main.js TargetFolder: "$(Build.ArtifactStagingDirectory)/dist/app" displayName: "Copy main.js to artifact staging directory"

    • task: PublishTestResults@2 condition: succeededOrFailed() inputs: testResultsFormat: "JUnit" testResultsFiles: "**/TESTS-*.xml" displayName: "publish unit test results"

    • task: ArchiveFiles@2 displayName: "Archive files" inputs: rootFolderOrFile: "$(System.DefaultWorkingDirectory)" includeRootFolder: false archiveType: zip archiveFile: $(Build.ArtifactStagingDirectory)/drop.zip replaceExistingArchive: true

    • task: PublishBuildArtifacts@1 inputs: PathtoPublish: "$(Build.ArtifactStagingDirectory)/drop.zip" ArtifactName: "drop" publishLocation: "Container"

• stage: Development displayName: "Deploy to Development" dependsOn: Build condition: succeeded() jobs:

  • deployment: DeploymentDevelopment pool: vmImage: "ubuntu-latest" environment: Development strategy: runOnce: deploy: steps: - task: AzureWebApp@1 displayName: "Deploy App Service" inputs: azureSubscription: "xxxxxxxxxxx" appName: "app" package: "$(Pipeline.Workspace)/drop/drop.zip" runtimeStack: "NODE|16-lts" `

this is my pipline and even tried manual deployment using FTP server in azure app service nothing seems to be working.** I think the issue is with the dist directory structure. It would be helpful if someone can help.**

Answer 1

I modified my Azure App service folder structure like this

• wwwroot
  • browser folder
    • browser contents
  • server contents
  • webconfig

this is my webconfig

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <webSocket enabled="false" />
        <handlers>
            <add name="iisnode" path="main.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
            <rules>
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^main.js\/debug[\/]?" />
                </rule>
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}"/>
                </rule>
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
                    </conditions>
                    <action type="Rewrite" url="main.js"/>
                </rule>
                <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>
        <security>
            <requestFiltering>
                <hiddenSegments>
                    <remove segment="bin"/>
                </hiddenSegments>
            </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough" />
    </system.webServer>
</configuration>