Trying to deploy Angluar web app in Azure Web App service (Linux-based)

I am trying to deploy my angular web app to a free tier azure web app service for testing purposes. My angular app is deployed by an azure pipeline and completes successfully. Which I can confirm in the Deployment Center in the azure portal as well. Though when visiting the page I end up on a 404 page.

As suggested in this post by the second answer. I added this command to the StartUp section in the configuration

pm2 serve /home/site/wwwroot --spa --no-daemon

in the logs I can see the following;

2024-02-26T12:01:08.928889037Z: [INFO]  12:01:08 0|static-page-server-8080  | [2024-02-26T12:01:08.907Z] Error while serving /home/site/wwwroot/index.html with content-type text/html : ENOENT: no such file or directory, open '/home/site/wwwroot/index.html'

Which says it can't find set files. to serve my application. I, however, don't know where my files would be or how I can find out where azure stores these files so I can adjust the given path for the pm2 command.

Can anyone help with this issue?

Solution

In order to deploy the Angular app successfully you need to build the Angular app in Azure devops pipeline and deploy its dist folder via YAML or Release pipeline. Refer my SO answer1 and SO answer2 where I have deployed the Angular app via Release and yaml azure devops pipelines.

Go to Pipelines > New Pipelines > Azure Repos git > Select your Angular project's repository > Starter pipeline > Add the yaml code below > Replace WebAppName with your Web app> Save and run the pipeline:-

My YAML pipeline code:-

trigger:
- master

pool:
  vmImage: ubuntu-latest

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

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: 'dist'
    ArtifactName: 'dist'
- task: AzureRmWebAppDeployment@4
  displayName: 'Deploy Azure App Service'
  inputs:
    ConnectionType: 'AzureRM'
    azureSubscription: 'SID subscription (0151c365-f598-44d6-b4fd-e2b6e97cb2a7)'
    appType: 'webAppLinux'
    WebAppName: 'siliconwebapp989'
    packageForLinux: 'dist'
    StartupCommand: 'pm2 serve /home/site/wwwroot/my-appangular --no-daemon --spa'

Output:-

enter image description here

Connected to Azure Repos directly after the deployment in Deployment Center:-

enter image description here