Azure Static Web Apps: quirks & gotchas

By rickvdbosch

- 4 minutes read - 786 words

After playing around with Azure Static Web Apps (ASWA) for some time I found some quirks and gotchas. Of course Static Web Apps are still in preview. Most of these are probably because of that fact. Despite that, it might still be interesting to know about them. That way if you run into any of them, you’ll at least know it’s not you … 😉

🏭 Creating an Azure Static Web App

It all starts when you want to create an ASWA: searching for it in the list of resources in the Azure portal doesn’t show it. 😱

Dude, where’s my Static Web App?

Dude, where’s my Static Web App?

The solution to this one is simple:

  • Open up the menu (if it’s not visible already)
  • Click ‘Create a resource’
    You could also click it on the ‘Home’ screen of the portal
  • Go to the ‘Web’ category OR search for (part of) ‘static web app’
  • Click ‘Static Web App (preview)’
  • Go ahead, create your Azure Static Web App

🔁 Round trip configuration

Most of the things you configure when you create an Azure Static Web App automatically land in a GitHub Actions workflow. When I first created my ASWA I hooked it up to my ASWA-example repository with only the frontend configured, something like the image below.

Configuring a Static Web App

Configuring a Static Web App

The API location is optional, so you can use an ASWA with just a static frontend. After getting that to work I wanted to add an API, too. After going to the ASWA in the Azure Portal there’s no possibility to even see, let alone edit, most of the the configuration you entered upon creation. And it’s understandable, since it would mean interpreting everything (and anything) that people can put in that workflow. Still, the configuration can be found in a very specific part of the workflow file, so it should be possible. We’ll see where it goes in the future.

🔑 API key

In the light of current events I changed the default branch on all of my repositories to be main. I did so after configuring my ASWA and didn’t change anything there except for updating the workflow to be triggered on this new branch name. Just before recording our Betatalks episode on Static Web Apps I created a PR to show off the awesome Environments-functionality of ASWA. Unfortunately, the GitHub Actions workflow failed on deploying with the message:

The content server has rejected the request with: BadRequest
Reason: No matching static site was found or the api key was invalid.

Apparently something of the name of the branch to watch made its way into the key, which was automatically created and put into a GitHub secret (secrets are environment variables that are encrypted and only exposed to selected actions). But the value for the key was nowhere to be found (or regenerated) in the Azure Portal. Not under the ASWA itself, but also not in Azure Active Directory. It’s probably something that’s currently still abstracted away. Because I didn’t want to re-do the changes I made to the workflow I (temporarily) added a branch with the original name to enable me to demo during the video.

⚡ Functions

The Azure Function powered APIs that enable you to “encapsulate compute requirements via reusable API endpoints with dynamic scale based on demand” are shown on the Functions blade. But that’s it. They’re shown there, but there’s nothing more. Clicking them doesn’t do anything. There’s also no Functions App somewhere in the subscription that hosts the Functions. Or at least it’s not visible. I even went into Azure Resource Explorer but that only gave me errors on anything under the resource group. So… there’s no way of seeing anything else about the Functions, not even any monitoring. And speaking about monitoring, …

📊 Monitoring

There’s currently no monitoring available for an ASWA. Nothing. There’s nothing available for the static web app, nor for the Functions that might be behind the frontend. No call history, no metrics or insights, zilch. And although I get ASWA is currently in preview, this feels like basic functionality for this service.

💾 Resources

Do you have anything I need to add here? Don’t hesitate to contact me.

❗ DISCLAIMER

I love Azure Static Web Apps. Or maybe it’s better to say I love the promise of Azure Static Web Apps. And although this post might feel a bit like I’m bashing the service, it’s only meant to give insight into the things you might run into while working with the preview.

Hope this helps!