For today’s Learning Azure adventure, I want to talk about an Azure offering that hosts sites where server rendering isn’t required. Think about sites where HTML, CSS, and JavaScript work without server rendering. Think about Blazor. Imagine those apps calling lightweight APIs hosted in the serverless Azure Functions. (More on those later this week!) Let’s talk about Azure Static Web Apps.
Note: If you need server rendering, come back here tomorrow to learn about Azure App Service!
How do Azure Static Web Apps work?
Azure Static Web Apps allow you to build and deploy apps from repositories to the Azure hosted environments. They currently support GitHub and Azure DevOps repositories. They have a free tier for hobbies and personal projects as well as a standard tier for general purpose apps.
Once you have a repository, then you can create an Azure Static Web App in the portal, in Visual Studio Code, or via the CLI.
When creating an Azure Static Web App, you will need to know the location of your source code. Optionally, you can also specify the app’s build output – such as a dist folder – as well as the location of an API – such as a folder named api.
Note: APIs are optional, not required. If you do not have an API, your app will still be published to Azure Static Web Apps.
When you create the Static Web App, it will add a GitHub Actions workflow to build and publish your application. The app location, build output, and API location are specified in the Build and Deploy step in the GitHub workflow.
Supported Frameworks and Tools
Azure Static Apps support a variety of frameworks – including popular frameworks such as Angular, Blazor, Next.js, React, Svelte, and Vue. It also works with static website generators such as Hugo and Gatsby.
The list of frameworks is not a complete list. If you are working with static website or front-end technologies that don’t require server rendering, consider spinning up an Azure Static Web App and trying it out. For example, I recently decided to try PyScript and created an Azure Static Web App to see if it works.
Note: If you are working with technologies that don’t need to be built, look into setting skip_app_build to true in the GitHub Actions workflow.
Additional Resources
If you want to learn more about Static Web Apps and get started using them today, check out the following resources:
- Azure Tips and Tricks: Static Web Apps
- Azure Friday: Getting started with Azure Static Web Apps
- Azure Friday: Accelerate your Azure Static Web Apps with enterprise-grade edge
- Microsoft Learn: Azure Static Web Apps learning path
[…] Talking about Azure Static Web Apps (Sarah Dutkiewicz) […]
[…] I talked about the hosting option for front-end apps that don’t require server rendering. Azure Static Web Apps takes care of that. Today, […]