Modern web applications are shifting more towards a static html/css architecture that leverages RESTful APIs as the backend data services. Previously, in order to host a static web app like this, you would need to use an Azure App Service Web App or even an Azure Storage Account. While these services worked well for hosting static website files, they aren’t really meant specifically for this use case and aren’t built specifically for it. The newer Static Web App service within Azure App Service is built specifically for this use case. In addition to hosting static web app files, it also includes functionality for hosting Azure Functions for adding the RESTful API component to the application as well.

The Static Web App service offers a single service within Azure that’s specifically built for hosting static file based web applications. Such as those built with Vue, React, Angular, or many other client-side web application frameworks. It also includes the ability to deploy RESTful APIs using Azure Functions code to the same Static Web App service that’s hosting the web application. This offers a single service in Azure that can host the static, client-side files for a web application, in addition to the server-side RESTful APIs built with Azure Functions.

Host Static Web Apps in Azure App Service 1 — Static Web App architecture overview – Source: Microsoft

This service even includes integration with GitHub to use as your source code repository for the app, and then publish to the Static Web App service directly from the GitHub repository! This integration utilizes GitHub Actions that can take an approved Pull Request within your GitHub repo and publish the code out to the Static Web App sitting in Microsoft Azure.

When the publish runs, you can perform build actions too. So, your Static Web App doesn’t need to be built solely using static files. You can use something like a static site generator (such as Gatsby, Hugo, or VuePress) and publish to Azure Static Web App service too.

Here’s a “From code to scale! Build a static web app in minutes” session (INT159A) from Microsoft Build 2020 that discusses and explains more information about the Azure Static Web App service:

The Azure Static Web App service offers a number of really great features for hosting static web apps within Azure App Service. Now, go host your static web apps in Microsoft Azure in an entirely new way!

About the Author

Chris Pietschmann

Chris Pietschmann is a Microsoft MVP, HashiCorp Ambassador, and Microsoft Certified Trainer (MCT) with 20+ years of experience designing and building Cloud & Enterprise systems. He has worked with companies of all sizes from startups to large enterprises. He has a passion for technology and sharing what he learns with others to help enable them to learn faster and be more productive.