Last week I got the chance to speak at Microsoft Build, and do the first-look demo on their newly announced featured – Azure Static Web Apps. And as I didn’t get access to Static Web Apps until the same time everyone else did (the day before my demo), I got to showcase how easy it was the first time you used it (ok, so maybe it was the second time that I’d used it).
Deploying from GitHub
Using an existing static site, with information about Quokkabot, built with Eleventy, I set up the continuous deployment pipeline which uses a GitHub action to trigger the site to rebuild in Static Web Apps.
From the Azure Portal, create a new resource for Static Web App (currently in preview)
Select your Azure subscription and resource group (for now, Static Web Apps is free), you’ll need to authorise your GitHub account and select the repository and branch you’re deploying from.
Specify the details for the site build, my static site sits in the root folder of the repository, and builds out to a folder called
_site. While I don’t have an API to include there yet, leaving the API location as is is fine (if they can’t find the
api folder, they’ll ignore it.
Next, click Review + create to create the new resource.
This will automatically create a workflow file in your repo, with a GitHub action to build the site and deploy it to Azure.
That’s it. You’re done.
Setting a Custom Domain
In the Azure portal, you can add a custom domain to your application. Click to Add a new domain, and setup the DNS records provided, then wait to verify the DNS changes.
Again, you’re done.
Adding an API back end
I already had a separate repository where I was running the Quokkabot back end on Azure Functions, so as Static Web Apps uses Azure Functions for the back end that was also an easy integration.
I created a new folder in the static site project called
api and copied all the files from the API repository over, then deployed the updates.
Azure Static Web Apps has only been available for a week, is still in preview and therefore not suited to production apps. But so far this is a really great product, great integrations and simple and easy to use. There are just a few gotchas or issues though
During the build process, Azure uses it’s own node_modules folder to install things in,
__oryx_prod_node_modules, which as it wasn’t called
node_modules, my Eleventy site tried to build out the content 🤦♀️. This was an easy fix though, by adding that folder to the
.eleventyignore file, the build ignored it.
While Static Web Apps does use Azure Functions for the API back ends, there’s a layer that sits between the two, which currently stops the API sending custom headers with the response (such as
Content-Type). This has been lodged as an issue though and should be fixed shortly.
You can see the live site at quokkas.amyskapers.dev.
Want to learn more? Check out this post: Create Scalable Vue.js Application with Azure Static Web Apps
About the Author:
I’m a Microsoft MVP. This means I do a lot of work in my community and sharing what I’ve learnt in conference talks and blog posts. I’m a Twilio Champion. This means I help Twilio to build better communities. Find out more about me here: https://amyskapers.dev/
Kapers, A. (2020). Building Quokkabot Part 3: Moving to Azure Static Web Apps. Available at: https://blog.amyskapers.dev/building-quokkabot-part-3-moving-to-azure-static-web-apps/ [Accessed: 28th May 2020].