{
  "$type": "site.standard.document",
  "canonicalUrl": "https://johnnyreilly.com/posts/bicep-static-web-apps-linked-backends",
  "description": "Azure Static Web Apps can be linked to Azure Functions, Azure Container Apps etc to provide the linked backend for a site. This post provisions with Bicep.",
  "path": "/posts/bicep-static-web-apps-linked-backends",
  "publishedAt": "2022-10-14T00:00:00.000Z",
  "site": "at://did:plc:yy3apqjlms24kso7ahn7lbmb/site.standard.publication/3mova7c4nho2b",
  "tags": [
    "bicep",
    "azure",
    "azure static web apps"
  ],
  "textContent": "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.\n\n\n\nIntroduction\n\nAzure 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.\n\nThe Function App Bicep\n\nYou'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:\n\nIt 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.\n\nThe Static Web App Bicep\n\nIn 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:\n\nThe crucial bit above is this:\n\nThis 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.\n\nThe Deployment\n\nOnce 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:",
  "title": "Bicep: Static Web Apps and Linked Backends"
}