Azure Static Web Apps Comparison

Azure Static Web Apps became generally available (GA) in May 2021, and there has been so much excitement around them, rightly so!

With Azure Static Web Apps now as its own service, now might be a good time to go through related Azure services and see how they compare.

Azure Static Web Apps

As part of the Azure Static Web App service launch, the team has put together a good amount of documentation. If you are looking to getting started with Static Web Apps, look no further than the documentation. There are also some great quickstart tutorials that you can reference when building your first Static Web App.

Azure Static Web Apps are more than just a hosting option for your static site, the service itself comes packed with a ton of built-in features: – Web hosting for static content like HTML, CSS, JavaScript, and images. – Integrated API support provided by Azure Functions with the option to link an existing Azure Functions app using a standard account. – First-class GitHub and Azure DevOps integration where repository changes trigger builds and deployments. – Globally distributed static content, putting content closer to your users. – Free SSL certificates, which are automatically renewed. – Custom domains to provide branded customizations to your app. – Seamless security model with a reverse-proxy when calling APIs, which requires no CORS configuration. – Authentication provider integrations with Azure Active Directory, GitHub, and Twitter. – Customizable authorization role definition and assignments. – Back-end routing rules enabling full control over the content and routes you serve. – Generated staging versions powered by pull requests enabling preview versions of your site before publishing.

One of the biggest differentiators of Azure Static Web Apps is the ability to integrate them into Azure DevOps or GitHub, meaning you can have an ‘out of the box’ fully automated system, incorporating CI/CD from day 1. Getting started with deploying your Azure Static Web App with Azure DevOps is easy to follow, or if your code resides in GitHub, you can build your first static site using the Azure Portal and connect to your GitHub account.

If you want get started learning via an interactive tutorial, check out one of the Microsoft Learn modules for Azure Static Web Apps.

Azure Web Apps

Azure Web Apps are a Platform-as-a-Service offering that remove the requirement for you to have to deploy, configure and maintain your own Azure VMs. You can build websites using ASP.NET, PHP, Node.js, and Python. Web Apps integrate easily into your development environment, using tools like Visual Studio, GitHub and Azure DevOps.

If you’re running a virtual machine (or physical server) for your application server, and you require features that go beyond what Azure Static Web Apps offer (i.e. Database services, .NET apps, etc), then Azure Web Apps could be your best bet. For any kind of application server that needs more than just a front end (and needs to deliver more than just static content), this could be your best option.

If you’re looking to getting started with Azure Web Apps you can look at the documentation here. You can find great documentation on quickstart guides, deployment best practices, or complete the Microsoft Learn module on Azure App Service to help you get started.

Azure Blob Storage Static Website

Azure blob storage offers the ability to host your static site directly from an Azure Storage account. If you would like to get started setting up a static website with this option, follow the getting started tutorial.

While this is an easy way to host your static site in a few minutes, this option lacks many of the built in features of Azure Static Web Apps. There is not an option to scale your site (unless you deploy a CDN or Azure Front Door — Adding overhead and costs — as well as complexity with certain apps), no inherent/simplified CI/CD process built in or deployment slots, and cert management becomes more of an operational burden. You can read about configuring a blob storage static website here.

Whatever option you choose that is best for your web site, hopefully this reference can make that decision a bit easier. Happy coding!