Combine app settings from portal with those defined in bicep template for Static Web App

Question

So I have been following instructions from this Stackoverflow post and have successfully been able to merge app settings specified in the Azure Portal with the ones that is pushed through the bicep template, for an Azure Function App.

I am now trying to do the same for an Azure Static Web App, but I can't get it to work. Here is my code:

resources.bicep

(...)
param staticWebAppName string
param staticWebAppCdnLocation string
param staticWebAppSku string

param applicationInsightsName string
param applicationInsightsLocation string = resourceGroup().location

resource applicationInsights 'Microsoft.Insights/components@2020-02-02' = {
  name: applicationInsightsName
  location: applicationInsightsLocation
  kind: 'web'
  properties: {
    Application_Type: 'web'
    WorkspaceResourceId: logAnalyticsWorkspace.id
    RetentionInDays: 90
    IngestionMode: 'LogAnalytics'
    publicNetworkAccessForIngestion: 'Enabled'
    publicNetworkAccessForQuery: 'Enabled'
  }
  tags: tags
}

module staticWebAppMod 'staticWebApp.bicep' = {
  name: '${staticWebAppName}-deployment'
  scope: resourceGroup()
  params: {
    name: staticWebAppName
    cdnLocation: staticWebAppCdnLocation
    sku: staticWebAppSku
    applicationInsightsId: applicationInsights.id
    applicationInsightsInstrumentationKey: applicationInsights.properties.InstrumentationKey
    applicationInsightsConnectionString: applicationInsights.properties.ConnectionString
    tags: tags
  }
}

(...)

staticWebApp.bicep

param name string
param cdnLocation string
param sku string
param applicationInsightsId string
param applicationInsightsInstrumentationKey string
param applicationInsightsConnectionString string
param tags object

resource staticWebApp 'Microsoft.Web/staticSites@2023-01-01' = {
  name: name
  location: cdnLocation
  sku: {
    name: sku
    size: sku
  }
  properties: {}
  identity: {
    type: 'SystemAssigned'
  }
  tags: staticWebAppTags
}

var currentAppSettings = list(resourceId('Microsoft.Web/staticSites', staticWebApp.name, 'config', 'appsettings'), '2022-09-01').properties

module staticWebAppSettingsMod 'staticWebAppSettings.bicep' = {
  name: 'staticWebAppSettings-deployment}'
  params: {
    staticWebAppName: staticWebApp.name
    currentAppSettings: currentAppSettings
    newAppSettings: {
      APPINSIGHTS_INSTRUMENTATIONKEY: applicationInsightsInstrumentationKey
      APPLICATIONINSIGHTS_CONNECTION_STRING: applicationInsightsConnectionString
    }
  }
}

staticWebAppSettings.bicep

param staticWebAppName string
param currentAppSettings object
param newAppSettings object

resource staticWebAppSettings 'Microsoft.Web/staticSites/config@2022-09-01' = {
  name: '${staticWebAppName}/appsettings'
  properties: union(currentAppSettings, newAppSettings)
}

When I attempt to deploy the code above, I get the following error in my CD pipeline:

{"status":"Failed","error":{"code":"DeploymentFailed","target":"/subscriptions/***/providers/Microsoft.Resources/deployments/main","message":"At least one resource deployment operation failed. Please list deployment operations for details. Please see https://aka.ms/arm-deployment-operations for usage details.","details":[{"code":"ResourceDeploymentFailure","target":"/subscriptions/***/resourceGroups/***/providers/Microsoft.Resources/deployments/resource-deployment","message":"The resource write operation failed to complete successfully, because it reached terminal provisioning state 'Failed'.","details":[{"code":"DeploymentFailed","target":"/subscriptions/***/resourceGroups/***/providers/Microsoft.Resources/deployments/resource-deployment","message":"At least one resource deployment operation failed. Please list deployment operations for details. Please see https://aka.ms/arm-deployment-operations for usage details.","details":[{"code":"ResourceDeploymentFailure","target":"/subscriptions/***/resourceGroups/***/providers/Microsoft.Resources/deployments/***","message":"The resource write operation failed to complete successfully, because it reached terminal provisioning state 'Failed'.","details":[{"code":"DeploymentFailed","target":"/subscriptions/***/resourceGroups/***/providers/Microsoft.Resources/deployments/***","message":"At least one resource deployment operation failed. Please list deployment operations for details. Please see https://aka.ms/arm-deployment-operations for usage details.","details":[{"code":"BadRequest","message":""}]}]}]}]}]}}

Please note that the main.bicep and some other irrelevant stuff were omitted for readability.

What am I missing?

Answer 1

You can use the listAppSettings function.

appsettings.bicep file:

param appName string
param appSettings object
param currentAppSettings object

resource app 'Microsoft.Web/staticSites@2023-01-01' existing = {
  name: appName
}

resource appsettings 'Microsoft.Web/staticSites/config@2023-01-01' = {
  parent: app
  name: 'appsettings'
  properties: union(currentAppSettings, appSettings)
}

and from the main template:

param location string = 'East Asia'
param appName string = 'thomasteststatic002'
param skuName string = 'Free'
param skuTier string = 'Free'

// Create the webapp
resource app 'Microsoft.Web/staticSites@2023-01-01' = {
  name: appName
  location: location
  sku: {
    name: skuName
    tier: skuTier
  }
  properties: {}
}

// Create-Update the webapp app settings.
module appSettings 'appsettings.bicep' = {
  name: '${appName}-appsettings'
  params: {
    appName: app.name
    // Get the current appsettings
    currentAppSettings: app.listAppSettings().properties
    appSettings: {
      Foo: 'Bar'
    }
  }
}