static-web-apps VS azure-cli-extensions

Latest issue: https://github.com/Azure/static-web-apps/issues/1404

FYI for 6. it usually means you have to set the fallback page to index.html on your host. Here's an azure static web apps issue referring to that problem https://github.com/Azure/static-web-apps/issues/702.

If you're using Azure Static Web Apps, you're likely to have this problem. Azure Static Web Apps doesn't support deep linking with authentication. When you get redirected you'll find you are (at best) missing the query parameters. If you take a look at the link here you'll see a suggested workaround. We're going to develop that idea in this post.

There is a limitation that affects authorization when you have a linked backend paired with an Azure Static Web App. Let's take the case of having an Azure Function App as the linked backend. Essentially the Azure Function app does not receive the claims that the Static Web App receives. There's an issue tracking this on GitHub, and it seems that this is a general problem with Static Web Apps, Azure AD and linked backends.

More information can be found in this GitHub issue. The workaround is based on this comment in a related pull request.

NOTE: Currently, you can't add configuration settings on a SWA that doesn't have any functions in it, so I also included a dummy HTTP function to allow configuration in production. I believe that it should be a valid scenario to only have proxies on your backend function app, so I created an issue on the Static Web App's GitHub repository. I'll update this post with any info they provide me.

NOTE: If you're really curious to know what the --enable-network-observability flag does in Azure CLI, you can read through the source code here

The portal is handy, but we won’t use it in this article. Instead, let’s install the Azure command-line interface. The most recent version at the moment of writing is 2.30.0.

Azure CLI

With a bit of research I was able to find a very simple solution for this problem, and Azure CLI was again my best friend.

To learn more about Azure CLI, check this documentation.

Azure CLI installed and connected to your subscription

4) All the next steps that we're about to do can be done with the UI in Azure Portal, but we will use Azure CLI as much as possible. Also, I will name my Resource Group and App Service Plan as MyResourceGroup and MyLinuxPlan respectively. If you already have a Resource Group and App Service plan, you can continue using them. Or you can follow next step and substitute with names of your own choosing.

Bicep comes with a CLI that you can install locally on Windows, MacOS, and Linux. That gives you the ability to build and deploy your Bicep files with Azure CLI.

Azure CLI