Unable to find the directory while hosting Azure static web app

Question

I want to host my react js using Azure Static web app using Azure pipeline

While deployment the azure pipeline is unable to find the directory

This is my pipeline code

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - new-roles
trigger:
  branches:
    include:
      - new-roles

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-red-moss-0949d6d00-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_RED_MOSS_0949D6D00)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/build" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

How to fix the directory issue

Answer 1

Assuming your were building your first static web app sample with the framework of React following the guidance in this document.

In the Build Details section, add configuration details specific to your preferred front-end framework.

1. Select React from the Build Presets dropdown.
2. Keep the default value in the App location box.
3. Leave the Api location box empty.
4. Type build in the App artifact location box.

Having selected Create operation, it would automatically generate and trigger the pipeline for deployment like the YAML definition below, where we could see the app_location was set as "/", while output_location was "build".

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: Azure-Static-Web-Apps-red-pond-004edaf10-variable-group
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_API_TOKEN_RED_POND_004EDAF10)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

After the pipeline run was completed, we could proceed to visit the site URL.

You may probably need to modify your pipeline for deployment to static web app according to the document and sample above.