Bicep: Static Web Apps and Linked Backends

Azure Static Web Apps can be linked to Azure Functions, Azure Container Apps etc to provide the linked backend for a site. This post will demonstrate how to do this with Bicep. Introduction Azure Static Web Apps ship with their own slightly restricted Azure Functions backend; it does not have all of the triggers of the standard offering. If you should need that wider featureset, you can link to an existing Azure Functions instance instead. This is known as the "bring your own functions" approach and is documented here. The back end doesn't have to be Azure Functions; it could be Azure Container Apps also. This post will demonstrate how to do this with Azure Functions and with Bicep. The Function App Bicep You're going to need to create an Azure Function in your Bicep template. We'll do this here with a Bicep module called function.bicep: It also creates a storage account and a server farm to support the function app. You'll note it exports the resource name of the function app. We'll use this in the next step. The Static Web App Bicep In our main Bicep template we'll create a static web app and link it to the function app we created in the previous step. We'll do this with a Bicep module called main.bicep: The crucial bit above is this: This links the static web app to the function app we created in the previous step. We use the functionApp.outputs.functionAppResourceId to get the resource ID of the function app from our module. The Deployment Once this is deployed to Azure, if you click on the APIs section of the static web app you'll see the function app is now linked: