The app build failed to produce artifact folder Angular Azure Static Web App Deployment Issue

Question

When i try to build angular app using azure devops and deploy to azure static web app i'm receiving below error

The app build failed to produce artifact folder: 'dist/harmony-front'. Please ensure this property is configured correctly in your deployment configuration file.

I tried by changing output_location to / , dist, /dist , dist/harmony-front,

nothing seems to work

here's the yaml code for the deployment section

- task: AzureStaticWebApp@0
  inputs:
      app_location: "/"
      api_location: "api"
      output_location: "./dist/harmony-front"
      app_build_command: 'npm run build:prod'
      skip_api_build: true
      verbose: true

  env:
      continueOnError: true
      CUSTOM_BUILD_COMMAND: "npm install --force"
      azure_static_web_apps_api_token: $(deployment_token)

What was the mistake i made

Thanks

Glorification

Answer 1

Actually I found the issue and will post for future reference. if someone had the same issue.

issue start when you override build command using CUSTOM_BUILD_COMMAND will overwrite the RUN_BUILD_COMMAND so based on the comment of the issue posted on Github instead of npm install --force command combined with build like npm install --force && npm run build works like charm

Glorification

Answer 2

I have tried to repro the same and got positive results after following the below steps.

Step 1: Create a simple angular project and build the project on a local machine and inspect the dist folder.

Step 2: Push the code to Azure Repos.

Step 3: Create azure pipeline as shown below.

trigger: none
pool:
  vmImage: ubuntu-latest
steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.x'
  displayName: 'Install Node.js'
- script: |
    npm install -g @angular/cli
  displayName: 'install angular cli'
- task: Npm@1
  inputs:
    command: 'install'
  displayName: 'npm install'
- task: Npm@1
  inputs:
    command: 'custom'
    customCommand: 'run build'
  displayName: 'npm build'
- task: Bash@3
  inputs:
    targetType: 'inline'
    script: |
      pwd
      ls -l
      ls -l dist/
- task: AzureStaticWebApp@0
  displayName: 'Deploy Azure static webapp'
  inputs:
    app_location: '/'
    output_location: 'dist/my-app'
  env:
    azure_static_web_apps_api_token: $(static-webapp-token)

Step 4: Verify the result.

If you are still facing that issue, verify the AzureStaticWebApp@0 output location path in angular.json file as below. Both paths must be exact.

Erhard

Answer 3

In my case, i have my angular app named "front-end";

The file angular.json had -> "outputPath" : "dist/front-end"

The .yml had -> output_location: "dist/front-end"

The configuration above gived me the same error. I have builded the app locally using "ng build" command and I found that the build was generated in the path: "dist/front-end/browser" (With that extra browser file). After I changed the output_location in the .yml file with:

output_location: "dist/front-end/browser"

The issue was fixed.

So, my advice is to try to generate the build locally and check the right path for you.

Apparent

Yours is the only working solution for me. THANKS! – Tapioca

Answer 4

This issue just happened to me while working on a ready VUEJS3 NUXT3 template,the only solution :

go to -> Gitignore Delete : .dist Re upload your project

THINGS WILL WORK LIKE CHARM!!!!

Basal