How do I locate my staticwebapp.config.json in Azure Devops release Deploy Azure Static Web App?

Question

I have a pipeline that builds the artificat for my Angular app. Deployment works fine until I try to go to specific URLs. It redirects me to 404. This has to do with the staticwebapp.config.json. It looks like:

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

I have a created a release pipeline in Azure Devops to release it to my Static Web App on Azure. This is how my .yaml looks like:

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/xx/xx/xx-xx-web'
    app_location: /
    output_location: dist
    config_file_location: configuration
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'SOMEVALUE'

The staticwebapp.config.json is located here:

• src
  • app
  • assets
  • configuration
    • staticwebapp.config.json

This is the error I get during the release:

##[error]routes_location: route file 'staticwebapp.config.json/routes.json' could not be found.

or when I fill in the config_file_location:

##[error]config_file_location: config file '/configuration/staticwebapp.config.json' could not be found.

How do I locate the file?

Answer 1

This problem is solved. I did the following:

The staticwebapp.config.json file should be in the built artifact that comes out of the build pipeline. And this file was nowhere to be found. What I did, was putting the config file in the assets folder, because this folder is completely being taken over during the build. This piece of configuration in the angular.json file in your solution takes care of that:

"assets": [
 "src/favicon.ico",
 "src/assets"
]

It takes over everything inside the assets folder. You can also put the exact location in this assets array, but I kept it simple. After a new build, I saw the staticwebapp.config.json appearing in the built artifact in the assets folder.

My .yaml for deploying it to Azure Static Web App now looks like this below:

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/xx/xx/xx-xx-web'
    app_location: /
    output_location: dist
    config_file_location: /assets
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'SOMEVALUE'

Answer 2

Another idea is to add the staticwebapp.config.json anywhere you like within the project folder, and then modify the angular.json file by adding a new entry in the assets section. Here's how mine looks like:

"assets": [
      "src/favicon.ico",
      "src/assets",
      "src/staticwebapp.config.json"
    ],

Answer 3

If you define the working directory as '$(System.DefaultWorkingDirectory)/xx/xx/xx-xx-web' in task: AzureStaticWebApp@0. Then it will try to locate your staticwebapp.config.json in this directory.

I have modified your script. You could have a test.

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    app_location: /
    output_location: 'dist'
    config_file_location: '/src'
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'SOMEVALUE'

Check this link for the arguments: https://learn.microsoft.com/en-us/azure/devops/pipelines/tasks/utility/azure-static-web-app?view=azure-devops#arguments