Getting Started With Serverless Azure Static WebApps (React, Angular, Vue, .. + Backend)

Azure Static WebApps is a fairly new Azure service, currently in preview. Azure WebApps is a managed, serverless service that allows us to quickly deploy and publicly expose a static web application (from a global content delivery network) — such as single page applications as created using Angular, React, Vue and others with client side resources such as CSS, images, JavaScript and HTML and using backend APIs implemented using Azure Functions.

The code for web app lives in a GitHub repository. The repository is configured with a GitHub Actions workflow that builds the application and deploys it to the Azure service. Under the hood, a Docker container image is built and handed to the “serverless” framework. Before this can be done, a Static WebApp instance is created in Azure Portal and associated with the GitHub repository. At the time of association, Azure creates a Secret in the GitHub Repo that is used in the deployment workflow to perform the handshake from GitHub to Azure.

Upon deployment, a public URL is assigned to the web app. Through this URL, the application can be accessed from the public internet.

Authentication/authorization can be configured for the Static WebApp, using popular authentication providers (Azure Active Directory…