During this year's digital Build event, Microsoft announced it had expanded Azure App Service with a new hosting offer explicitly tailored for static web apps. The hosting offering is called Azure Static Web Apps and is currently in preview.
With Azure Static Web Apps, developers can build modern, full-stack JavaScript web apps with static front-ends and optional dynamic back-ends powered by serverless APIs. More specificly, Daria Grigoriu, a program manager at Azure Functions, said in a Microsoft Build session explaining and demonstrating the new service:
Static Web App provides a unified workflow, which takes you from your source code to global availability. Everything is managed entirely for you. And all of the different configuration aspects are available for you at a simple click distance.
Furthermore, according to the announcement blog post by Girgoriu, Azure Static Web Apps provides developers with the following advantages:
- Use frameworks such as Angular, React, Svelte, and Vue or static site generators like Gatsby when looking for a simple interface to deploy the cloud resources.
- Move dynamic logic to serverless APIs unlocking dynamic scale that can adjust to demand in real-time.
- Pre-rendering of static content (including HTML, CSS, JavaScript, and image files) and leverage global content distribution to serve this content – which removes the need for traditional web servers generating the content with every request.
The way Azure Static Web Apps works is that a developer can have an application build in, for instance, JavaScript and push or create a pull request to a repository in GitHub. Subsequently, the push or pull request triggers a GitHub action, which initiates a workflow – building the assets (content and APIs) with NPM run build and deploy them in Azure as a static web app. Furthermore, the deployment of the assets is in at least five servers and regions around the globe.
Source: https://docs.microsoft.com/en-us/learn/modules/publish-app-service-static-web-app-api/1-introduction
Beside easy deployment and integration with GitHub, the service also features authentication and authorization capabilities, routes, preview in pre-production environments and custom domains. Combined Azure Static Web App provides developers with one package that works for static web apps – which Azure manages for them.
Rafael Rivera, Microsoft MVP, said in a tweet:
Don't skip over Azure Static Web Apps. It's like GitHub Pages on steroids. You push your content to GitHub, and it'll handle SSL, wiring up web APIs (az functions!), serve up static content, and even handle auth (AAD, FB, G, TWIT, etc.) for you. Crazy!
And as John Papa, principal developer advocate lead at Microsoft, wrote in his blog post about Azure Static Web Apps:
Oh, there is so much more you can do! You can add a custom domain with an SSL certificate, authentication, and authorization. You can make a change in a new branch, make a pull request, and then have the GitHub Action build and deploy your changes to a staging/preview URL!
Before, developers were able to build and host static web app using several Azure components, such as Azure Storage for static content. However, developers had to do a lot themselves, and managing is hard – as Mitch Webster, senior engineering manager for Apps Service, said in another Microsoft Build session on Azure Static Web Apps:
In the past, when we've used a variety of different services across Azure, it's kind of hard to manage, and it can be hard to get for the first time. A big goal of this project is to streamline that and make things as easy as possible.
Currently, App Service Static Web Apps are available in the Central US, East US 2, West US 2, East Asia, and West Europe Azure regions and as preview starts with a free plan. Furthermore, developers can visit the quickstart to try out and explore Static Web Apps - and a Visual Code extension for Azure Static Web Apps is available in the marketplace.