API support in Azure Static Web Apps with Azure Functions

  • Article

Front end web applications often callback end APIs for data and services. By default, Azure Static Web Apps provides built-in serverless API endpoints via Azure Functions.

Azure Functions APIs in Static Web Apps are available in two possible configurations depending on the hosting plan:

  • Managed functions: By default, the API of a static web app is an Azure Functions application managed and deployed by Azure Static Web Apps associated with some restrictions.

  • Bring your own functions: Optionally, you can provide an existing Azure Functions application of any plan type, which includes all the features of Azure Functions. With this configuration, you're responsible to handle a separate deployment for the Functions app.

The following table contrasts the differences between using managed and existing functions.

Feature Managed Functions Bring your own Functions
Access to Azure Functions triggers and bindings HTTP only All
Supported Azure Functions runtimes1 See supported languages and runtimes. All
Supported Azure Functions hosting plans Consumption Consumption
Premium
Dedicated
Integrated security with direct access to user authentication and role-based authorization data ✔ ✔
Routing integration that makes the /api route available to the web app securely without requiring custom CORS rules. ✔ ✔
Distributed functions (preview) for dynamic global distribution of backend compute. ✔ ✕
Durable Functions programming model ✕ ✔
Managed identity ✕ ✔
Azure App Service Authentication and Authorization token management ✕ ✔
API functions available outside Azure Static Web Apps ✕ ✔
Key Vault references ✕ ✔

1 To specify the runtime version in managed functions, add a configuration file to your frontend app and set the apiRuntime property. Support is subject to the Azure Functions language runtime support policy.

API options for Static Web Apps include the following Azure services:

See the APIs overview for more information.

Note

Distributed functions is available with managed functions. Distributed functions automatically distribute your managed functions to regions of high request loads.

Configuration

API endpoints are available to the web app through the api route.

Managed functions Bring your own functions
While the /api route is fixed, you have control over the source code folder location of the managed functions app. You can change this location by editing the workflow YAML file located in your repository's .github/workflows folder. Requests to the /api route are sent to your existing Azure Functions app.

Troubleshooting and logs

Logs are only available if you add Application Insights.

Managed functions Bring your own functions
Turn on logging by enabling Application Insights on your static web app. Turn on logging by enabling Application Insights on your Azure Functions app.

Constraints

In addition to the Static Web Apps API constraints, the following restrictions are also applicable to Azure Functions APIs:

Managed functions Bring your own functions
  • Triggers and bindings are limited to HTTP.
  • The Azure Functions app must either be in Node.js 12, Node.js 14, Node.js 16, Node.js 18 (public preview), .NET Core 3.1, .NET 6.0, Python 3.8, Python 3.9, or Python 3.10.
  • Some application settings are managed by the service, therefore the following prefixes are reserved by the runtime:
    • APPSETTING_, AZUREBLOBSTORAGE_, AZUREFILESSTORAGE_, AZURE_FUNCTION_, CONTAINER_, DIAGNOSTICS_, DOCKER_, FUNCTIONS_, IDENTITY_, MACHINEKEY_, MAINSITE_, MSDEPLOY_, SCMSITE_, SCM_, WEBSITES_, WEBSITE_, WEBSOCKET_, AzureWeb
  • Some application tags are internally used by the service. Therefore, the following tags are reserved:
    • AccountId, EnvironmentId, FunctionAppId.
  • You're responsible to manage the Functions app deployment.

Next steps

Add an API