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. 😱
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.
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
🔑 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.
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, …
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.
Do you have anything I need to add here? Don’t hesitate to contact me.
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.