Cannot link backend with a preexisting Azure Static Web Apps configuration.

[bzbetty]

We have multiple static webapps that we want to point at the same Azure Functions backend, primarily because the logic behind the apps is the same and needs to be able to clear the cache from the other frontends, but the frontend differs significantly (otherwise we'd try do it in one SWA).

When trying to link the second SWA with the same func we get the error "Cannot link backend with a preexisting Azure Static Web Apps configuration. "

Is there some reason for this limitation and any known work arounds?

[thomasgauvin]

This is because one Azure Function can only trust one Static Web Apps and its authentication headers (you'll notice that an Azure Function is secured/locked-down to the Static Web App when linked with the linked backends feature). If multiple SWAs had the same backend, one would not be able to differentiate between the requests coming in.

If you have a universal backend API, you could treat it as a downstream service and proxy to that service from a SWA-specific function (following the backend for frontend pattern). You could even do so with SWA's managed functions.

Would love to better understand your use case of multiple SWAs with the same backend if you are free to elaborate

[bzbetty]

Does this only occur for Azure Funcs? Wondering what would happen if I used APIM as a backend?

Usecase is that we having existing react apps that we're migrating to a new backend. The first was redeveloped in SWA/Func as it used to be a desktop app, but there's a series of existing apps that we were hoping just to tweak to point at the new backend and host in SWA.

After this failed we brainstormed a bunch of options:

• Rewrite the apps into one monolith
• Try host multiple separate react apps in one SWA (eg folders + multiple index.htmls)
• Proxy via APIM or similar to bypass the issue.
• Deploy the func multiple times and do something fancy for cache invalidation
• Bypass the /api endpoint for the other SWA and make the func publically accessable

you'll notice that an Azure Function is secured/locked-down to the Static Web App when linked with the linked backends feature

we actually disabled this locked down thing for other reasons.

[celsocoutinho-tangany]

I have two frontend apps deployed in Azure Static Apps. These apps are completely different, are meant for different users, and are making the exact same API calls, to a backend API deployed in a App Service (Web App, instead of a Function App). Hence applying the backend for frontend pattern makes no sense here.

The reason I want to link both static apps to the backend Web App is simply to connect them to the App Insights instance. I couldn't find a way to do so without linking the Static Web App to the API, deployed in an App Service (Web App). And now I'm stuck because I can't link the two Static Web Apps to the same Web App.

Any suggestion?

[mbores]

I have a similar situation. I have two static web apps as my front end, one for internal use by my company and allowing access to proprietary extra data, and one for external use by customers with limited functionality. They have the same code base but different configurations and routing protections. They should also use the same backend API.

@thomasgauvin, can you expand on your solution, please?

[grbspltt]

@thomasgauvin We are using Named Preview Environments with static web apps, and deployment slots for my serverless function. It makes sense for our workflow to have our production environment communicate with the serverless function's production deployment slot, and Test preview environment communicate with the test deployment slot. I am somewhat surprised that this does not work.