5

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.

enter image description here

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

Improve this question

5 Answers 5

Reset to default
6

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.

enter image description here

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.

enter image description here

enter image description here

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.

enter image description here

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

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.

Improve this answer

1 Comment

Yours is the only working solution for me. THANKS!
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

Improve this answer

Comments

1

I was also facing the same problem while deploying my angular 19 app (Not using SSR) on AZURE.

updating

output_location - "dist/my-app-name/browser"

in .yml file helped me out. It wanted the location of index.html file in your build.

I suggest to build locally, find out where is your index.html file is in dist folder. Update path in .yml file present in your github repsository in ".github/workflows" folder.

# You can also set this path while creating a new "static web app" in AZURE

enter image description here

Improve this answer

Comments

-1

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!!!!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.