Microsoft's cloud gets JAMstacked: Azure Static Web Apps greenlit for production

JAM with a distinct whiff of Redmond, as you would expect


Microsoft's Azure Static Web Apps service, in preview since May 2020, is now generally available, together with extensions for Visual Studio Code to support local development and automatic deployment via GitHub.

The idea behind static websites is that serving fixed content is inherently faster, simpler, and more secure than generating content dynamically on the server with technology like PHP, Python, Java, ASP.NET, or Node.js. One of the advantages is that static pages are easily cached by content delivery networks (CDNs), and Microsoft states that its new service has "globally distributed content for production apps" though the details are sketchy.

Applications in this model, sometimes called JAMstack (JavaScript, API and Markup), retrieve dynamic content via services called from JavaScript running in the web browser so rather than eliminating server side code, it is shifted to APIs.

Unlike the static content, these will not automatically benefit from CDNs, but this approach does mean that the same APIs can be consumed by mobile or desktop applications as well as websites, and fits in with the trend towards microservices. Microsoft is pushing developers towards Azure Functions for this server-side code.

Microsoft's principal PM manager, Daria Grigoriu, said the service is designed to fit with "microservices best practices" and to enable companies to obtain a web presence "with global reach and minimal effort."

Editing an Azure Static Web Site in VS Code, linked to a GitHub repository

Editing an Azure Static Web Site in VS Code, linked to a GitHub repository

Although developers can call any API from a site hosted on Azure Static Web Apps, there is a built-in framework that enables secure connections using Microsoft's framework. This will be the easy path to building sites for the service. In order to do this, the API must be either Node.js 12, .NET Core 3.1, or Python 3.8, and run on Azure functions. There are also some limitations on how the functions are configured, as explained here.

The built-in security is role-based, with all users by default given the anonymous role or, when logged in, the authenticated role. Additional roles can be defined as needed. Login is via one of several providers: Azure Active Directory (Office 365) or AAD, GitHub, Facebook, Twitter or Google. Developers can create invitation links in the Azure portal to give access.

It is also possible to create custom providers if they support OpenID Connect. AAD has some special advantages in that developers can specify a Microsoft 365 tenant and bypass the invitation procedure. This requires a paid-for plan.

Built-in options allow authentication with a range of providers, but Azure Active Directory has special support

Built-in options allow authentication with a range of providers, but Azure Active Directory has special support

The developer workflow is a key part of the product, and is based on VS Code rather than Visual Studio. There is a Static Web Apps extension which will automatically link a GitHub repository to an Azure Static Web App complete with a GitHub Action that deploys the code. The extension will also create an Azure Function and add the code to the project.

All going well, it will be a matter of editing code, pushing to GitHub, and automatically deploying to the site. Staging sites are included so any updates can be reviewed before going live.

Another project provides a local server, called the Static Web Apps CLI, currently in preview and on GitHub. This emulates authentication and authorization, and serves API requests directly or via another local development utility called Azure Functions Core Tools.

The initial pricing for Azure Static Web Apps, including a relatively generous free plan

The initial pricing for Azure Static Web Apps, including a relatively generous free plan

The pricing for Azure Static Web Apps is currently in two tiers, free or standard. The free tier is relatively generous, offering 100GB bandwidth, two custom domains with SSL certificates, 250MB app size, and three staging environments.

The limitations are that there is no custom authentication (making it impractical to manage for corporate applications) and there is no option to increase the bandwidth. There is also no SLA for the free version. The paid edition is $9.00 per app per month, with $0.20 per GB bandwidth once the initial 100GB is used up.

The paid version also supports private link, which removes public access to the application endpoint. Whether free or paid, additional services such as Azure Functions or Azure SQL are extra and likely to cost more than the Azure Static Web App itself.

El Reg takes it for a spin

We tried Azure Static Web Apps, with the first effort being a Gatsby-driven site. This tripped up the generated GitHub deployment action because there was no index.html and rather than troubleshoot the problem we turned to a simple HTML site instead, which worked perfectly. A non-exhaustive list of front-end frameworks which work with Azure Static Web Apps is here and includes Blazor, an ideal choice for developers who want to work with C# and .NET in the browser and on the server, as well as Google's Flutter framework, and of course the popular React JavaScript framework.

Initial observations are that this is a tidy service for putting a simple website online without the configuration hassles of managing a web server. Even the free version looks usable whereas the free plan for the existing Azure App Service, for dynamic web applications, is impractical for any use beyond demonstration and does not support custom domains.

Microsoft may be trying to keep up with the competition: Gatsby cloud, for example, offers 100GB bandwidth, SSL certificates, and custom domains even with its free plan. There is a strong Microsoft flavour for developers who take advantage of the Azure Static Web Apps built-in features, with the hooks to Azure Functions and Azure Active Directory, and extensions for VS Code. ®

Similar topics


Other stories you might like

Biting the hand that feeds IT © 1998–2021