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

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

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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

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

Back To Top
Search