Microsoft Azure Static Web Apps

A service that automatically builds and deploys full-stack web apps.

• Product Page
• Pricing
• Documentation

Recommended Learning Resources

• Learning videos at Microsoft Learn.
• Learning path with three modules for creating and deploying Azure Static Web Apps.
• #30DaysOfSWA

Accelerate your app development with managed global availability for static content hosting and dynamic scale for integrated serverless APIs. Experience high productivity with a tailored local development experience, continuous integration and continuous delivery (CI/CD) workflows to build and deploy your app, and unified hosting and management in the cloud.

Features

The list of features for Azure Static Web Apps is extensive and illustrates the wide range of possibilities with this service. Here is a selection of the most important features with direct links to the product documentation, where they are described in detail:

• Authentication/Authorization with Azure AD, GitHub, or other identity providers and roles

• Dynamic serverless APIs with Azure Functions

• Custom routes and navigation

• Custom HTTP headers and MIME types

• Preview environments

• Built-in support for CI/CD with GitHub Actions or Azure DevOps

• Database connections

• Custom domains and free SSL certificates

• Support for various web frameworks such as Angular, React, Svelte, Hugo

Quickstart

Basically, deploying an Azure Static Web App consists of two steps:

1. Infrastructure setup (provisioning)
2. Publishing the web application (deployment)

In the first step, provisioning, the Azure Static Web App is created, e.g., a new resource of the Azure Static Web App type is added to an Azure resource group. This can be done in various ways:

• ClickOps in the Azure Portal, see tutorial
• ClickOps in Visual Studio Code with the Azure Static Web Apps extension, see Video
• Azure Command Line Interface (Azure CLI), see tutorial
• Terraform, see project examples
• Deployment with a Bicep file, see tutorial
• Deployment with an ARM template, see tutorial

In the second step, deployment, the web application is uploaded to the Azure Static Web App. There are also various options here:

• Manual deployment with the SWA CLI, see tutorial and project examples
• Automated deployment with GitHub Actions, see also GitHub Documentation and project examples

Automated deployment with GitHub Actions is very convenient, as the web application is automatically published with every change to the source code, e.g., when committing to the main branch. The required workflow file is automatically created as a commit in the web application's repository in the above provisioning scenarios, provided the GitHub repository containing the web application is specified in that step. An interactive login to GitHub is performed for this. It is also possible to automate this step with a personal access token (PAT).

Project Examples

The following projects follow official tutorials and demonstrate various options for provisioning and deploying Azure Static Web Apps. The examples can serve as templates for your own projects.