Angular Deployment using Azure Devops doesn't load -- shows "hey node developers!" page

Question

I'm trying to deploy an angular app to Azure, the deployment seems to work, the artifacts look correct, however when I go to the website I am shown the default Azure "hey node developers" page. See (http://testss-123.azurewebsites.net/)

My build pipeline is as follows:

trigger:
- master

pool:
  vmImage: 'ubuntu-latest'

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

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod
  displayName: 'npm install and build'
  workingDirectory: '$(Build.SourcesDirectory)'

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist'
    includeRootFolder: true
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'drop'
    publishLocation: 'Container'

and my deployment pipeline is the default "Deploy a Node.js app to Azure App Service" see here

I have tried this both with an actual app, and also with the default app built buy "ng new"

Answer 1

I was unable to solve this problem, however as a workaround I deployed the app in a docker container, with the following dockerfile

FROM node:latest AS node

WORKDIR /app

COPY . .

RUN npm install && \
    npm run build-prod

FROM nginx:alpine
COPY --from=node /app/dist/superselection/nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=node /app/dist/* /usr/share/nginx/html

the following nginx conf file in my src folder:

server {
  listen 80;
  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

and finally the following build pipeline:

pool:
  name: Azure Pipelines
steps:
- task: Docker@0
  displayName: 'Build an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    defaultContext: false
    context: '$(System.DefaultWorkingDirectory)'

- task: Docker@0
  displayName: 'Push an image'
  inputs:
    azureSubscription: XXXXXXXX
    azureContainerRegistry: XXXXXXXX
    action: 'Push an image'

Answer 2

Your Azure WebApp is running on an IIS instance by default. If you want to handle the Html5 Mode(without the hashbang) then you have to create a Web.Config file and define a rewrite.

<configuration>
   <system.webServer>
      <defaultDocument enabled="true">
         <files>
            <add value="index.html" />
         </files>
      </defaultDocument>
   </system.webServer>
</configuration>

Answer 3

If you login http://testss-123.scm.azurewebsites.net/. You will probably find your code was deployed to folder site/wwwroot/dist/yourapp, install of site/wwwroot. It might cause this issue.

You can modify your archiveFiles task as below. Point the rootFolderOrFile to the app-name folder under dist folder. And set includeRootFolder to false.

so that the output zip file only contain your ready-to-deploy code.

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(Build.SourcesDirectory)/dist/<yourapp>'
    includeRootFolder: false
    archiveType: 'zip'
    archiveFile: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
    replaceExistingArchive: true