Edit

API support in Azure Static Web Apps with Azure App Service

  • Article

Azure App Service is a managed platform for hosting web applications that execute code on servers. Azure App Service supports many runtimes and frameworks including Node.js, ASP.NET Core, PHP, Java, and Python.

When you link your Azure App Service web app to your static web app, any requests to your static web app with a route that starts with /api are proxied to the same route on the Azure App Service app.

By default, when an App Service app is linked to a static web app, the App Service app only accepts requests that are proxied through the linked static web app. An Azure App Service app can only be linked to a single static web app at a time.

All Azure App Service hosting plans are available for use with Azure Static Web Apps.

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

See the APIs overview for more information.

Note

The integration with Azure App Service requires the Static Web Apps Standard plan.

Backend integration is not supported on Static Web Apps pull request environments.

Prerequisites

To link an App Service to your static web app, you need to have an existing App Service resource and a static web app.

Resource Description
Azure App Service If you don't already have one, follow the steps in the Create a web app in Azure guide.
Existing static web app If you don't already have one, follow the steps in the getting started guide to create a No Framework static web app.

Example

Consider an existing Azure App Service instance that exposes an endpoint via the following location.

https://my-web-app.azurewebsites.net/api/getProducts

Once linked, you can access that same endpoint through the api path from your static web app, as shown in this example URL.

https://red-sea-123.azurestaticapps.net/api/getProducts

Both URLs point to the same API endpoint. The endpoint on the App Service must have the /api prefix, since Static Web Apps matches requests made to /api and proxies the entire path to the linked resource.

To link a web app as the API backend for a static web app, follow these steps:

  1. In the Azure portal, go to the static web app.

  2. Select APIs from the navigation menu.

  3. Locate the environment you want to link the API Management instance to. Select Link.

  4. In Backend resource type, select Web App.

  5. In Subscription, select the subscription containing the Azure App Service app you want to link.

  6. In Resource name, select the Azure App Service app.

  7. Select Link.

When the linking process is complete, requests to routes beginning with /api are proxied to the linked App Service app.

Manage access to Azure App Service

Your App Service app is configured with an identity provider named Azure Static Web Apps (Linked) that permits only traffic that is proxied through the static web app. To make your App Service app accessible to other applications, update its authentication configuration to add another identity provider or change the security settings to allow unauthenticated access.

To unlink a web app from a static web app, follow these steps:

  1. In the Azure portal, go to the static web app.

  2. Select APIs from the navigation menu.

  3. Locate the environment that you want to unlink and select the web app name.

  4. Select Unlink.

When the unlinking process is complete, requests to routes beginning with /api are no longer proxied to your App Service app.

Note

To prevent accidentally exposing your App Service app to anonymous traffic, the identity provider created by the linking process is not automatically deleted. You can delete the identity provider named Azure Static Web Apps (Linked) from the App Service app's authentication settings.

Remove authentication from the App Service resource

To enable your App Service resource to receive anonymous traffic, follow these steps to remove the identity provider:

  1. In the Azure portal, navigate to the App Service resource.

  2. Select Authentication from the navigation menu.

  3. From the list of Identity providers, delete the identity provider related to the Static Web Apps resource.

  4. Select Remove authentication to remove authentication and allow anonymous traffic to your App Service resource.

Your App Service resource is now able to receive anonymous traffic.

Next steps

API overview