Question 348133 in Azure Question posted in
The official documentation to get you started can be found here.

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    searching for an answer I came upon this post. Though the suggested answer was for a react application. I tried it myself, by putting the following command in my startup

    npx serve -s

    This didn't give me my desired result, BUT it did show my file directories. this allowed me to find my where my index.html was located. In return I could edit the PM2 command and my application was served as desired. Most like likely there is a different command that doest the same and maybe is even better suited. if so please just comment on my answer improve my answer


  2. 0

    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

    enter image description here

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search