Azure Devops Copy Task couldn't find the dist/app folder after npm task build

Question

I'm deploying and angular app on Azure App Service. The release pipeline succeeded but the app is not there. I looked into wwwroot and LocalSiteRoot the dist folder is not there. Is my pipeline wrong? based on the app angular.json that the build will be generated in dist/myapp. But the Copy Task couldn't find it.

pool:
  name: Azure Pipelines
steps:
- task: NodeTool@0
  displayName: 'Use Node 6.x'

- task: Npm@1
  displayName: 'Use npm @latest'
  inputs:
    command: custom
    verbose: false
    customCommand: 'install -g npm@latest'

- task: Npm@1
  displayName: 'npm install'
  inputs:
    verbose: false

- task: Npm@0
  displayName: 'npm build'
  inputs:
    cwd: myapp/package.json
    command: custom
    arguments: 'run prod-build-dev'

- task: CopyFiles@2
  displayName: 'Copy Files to: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'
  inputs:
    SourceFolder: '$(agent.builddirectory)/dist/myapp'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip'

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: app'
  inputs:
    ArtifactName: app

Try my solution that I answered for a similar/related question dist folder. — Wesley Masunika

Leo Liu-MSFT Leo Liu-MSFT · Accepted Answer · 2020-02-12T05:53:43

Azure Devops Copy Task couldn't find the dist/app folder after npm task build

To make sure the build will be generated in dist folder, you should set the package.json and angular.json files correctly.

The package.json file like:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "prod-build-dev": "ng build --prod --build-optimizer",
    "prod-build-staging": "ng build --prod --configuration=staging --build-optimizer"
  }

And do not change the default outputPath in the angular.json:

  "options": {
        "outputPath": "dist",
       }

There is a great document about Deploy Angular App Using Azure DevOps Build and Release Pipelines, you could check it for some more details.

If above not help you, you could share your package.json and angular.json files and the build log about npm build task in your question. I will check it.

Hope this helps.

Azure Devops Copy Task couldn't find the dist/app folder after npm task build

1 Answers