For as long as the web has been around, developers have wanted a quick and affordable way to host web pages. This continues with Static website applications. These sites don’t require a server to render the initial HTML and continue to increase in popularity with over 300 different static site generators listed on JamStack.

Azure has two well-established services that can host static pages and website applications; Azure Storage and Azure Static Web Apps. Although both have been around for a little while, and there is an assumed winner, I still see the question of which to pick. In this post, we will take a deep look at both of these and see when we may want, to choose one over the other.

Static Sites on Azure Storage

The Blob Storage service is one of the oldest services in Azure, allowing you to store files either privately or publicly.

When you enable the static site feature, found under data management of your storage account, a special $web container is created. You can then upload your static files to this container for them to be accessed in a browser. This has some advantages over a standard public container such as allowing you to use a custom domain, enabling CORS and setting default documents.

The service is pretty basic, though has been extended with seamless front door integration in August 2023 and can have some advantages over the alternatives depending on your use case.

For a full overview see the Azure Blob Storage Static Website documentation.

Azure Static Web Apps

In May 2021, Azure Static Web Apps went into General Availability and has had many updates since. This is a fully managed service dedicated to hosting static applications alongside Azure functions.

As this service’s only aim is to serve static sites the service is built with features such as easy-to-configure authentication, custom domains, and seamless CI/CD integration.

For a full overview of the service see the Azure Static Web Apps documentation.

Service Similarities

Surprisingly, there are only a few similarities between the two services. Other than serving web pages, the main similarity is setting CORS rules, a common requirement for static sites that need to access resources from other domains. In Static Sites on storage, this is configured in the portal (or via FrontDoor if this is enabled), while in Azure Static Web Apps this is done in the staticwebapp.config.json file.

If you enable the front door option with your Azure Storage account you can also configure custom domains, SSL and CDN, similarly to Azure Static Web Apps.

Key Differences

Azure Static WebApps have many more features than Azure Storage static sites. However, there are a few features of note where Azure storage sites may be a preferred alternative.

Default Docs, Redirects and Rewrites

For Static Sites on Storage, routing is limited to a single document name and single error path. These can be set in the portal UI or via the Azure CLI. This limit can be an issue for certain static site generators that use multiple files for routing. If you have only a few basic pages that are part of an application it may be enough for your scenario.

The settings in an Azure Static WebApp are once again in staticwebapp.config.json. These support navigationFallback, multiple routing, route re-writes, and error pages based on a range of status codes and much more.

Backend APIs

Although these sites are static and are not able to run server-side code directly, we often want to offer rich interaction in our apps. We can do this with an API hosted in another service such as Azure Functions.

Azure Static Web Apps has a built-in feature to host Azure Functions alongside your static site. This is a great feature as it allows you to keep all your code in one place and manage it together. On the free tier, you can use managed functions, while the standard plan allows you to bring your own functions. The static web apps command line tools and VS Code extension make it easy to create, test and deploy these together.

You can also use your Azure Functions from the client on a static site hosted on Azure Storage, however, you will need to deploy the functions separately and set up CORS rules to allow the client to access the functions.

Authentication

Azure Static Web Apps has built-in authentication that can be configured in the staticwebapp.config.json file. This allows you to secure routes based on roles with Microsoft Entra ID or GitHub. It also offers further custom authentication, however, you need to be on the standard plan to take advantage of this.

You are also able to password-protect your Azure static web app, either the production slot and staging environment or just the staging sites. This is done by setting a password in the portal.

Azure Storage does not have any built-in authentication features, however, there are some ways to use the Azure Front Door to add authentication to your site.

Publishing

Publishing and managing files is probably the biggest difference between the two services and the reason you may choose one service over the other.

Static Sites on Azure Storage are just another storage container. This means you can upload files directly via the portal, the Azure CLI, or a CI/CD pipeline. This can work well if you have a handful of sites and minimal or no build process.

Azure Static Web Apps are only built to work with a CI/CD pipeline and you have no access to the files once deployed. It has scripts to build a wide range of static sites and a set of GitHub Actions, Azure DevOps Tasks and more to build then deploy the site. This is great for teams that want to automate the deployment process without having to write their own complex scripts.

One of my favorite features of Azure Static Web Apps is the ability to auto-create preview environments for each pull request. This allows you to test changes before they are merged into the main branch. This feature is not possible with Static Sites on Azure Storage, although you potentially use sub-folders.

Pricing Model

Azure Static WebApps has both a free tier and a standard tier that includes configuring a custom domain, free managed SSL certs and much more. The standard tier is charged per month with a generous amount of included bandwidth, an SLA and other benefits. A new dedicated SKU is also currently in preview that offers an extra set of features.

Azure Storage on the other hand is charged per GB of storage and GB of data transfer. To get the most out of the service however, you may want to use a CDN, custom domain etc which all require the Azure front door adding additional costs.

Regions and Site Avalialbity

For most people the SLA of the service may not be a big concern, however, it is worth noting that with Azure blob storage static website you can reach an SLA of up to 99.99% depending on your configuration. Azure Static Web Apps have no SLA under the free tier and under the Standard tier an SLA of 99.95%. It becomes more complicated as you can add a CDN in front of both of these which could affect the SLA. Therefore it is worth reading the documentation further if this is a topic of interest.

Storage accounts are tied to a location, while Azure Static Web Apps (for free and standard plans) hosting is a global resource. That said while storage accounts are widely available, at this time Azure Static Web Apps are not available in the US Gov cloud and the new preview Dedicated SKU is limited to a few regions.

Storage Space

Azure Static Apps are limited to a maximum size of 500MB or 1GB of storage and 15,000 files per deployment. This should not be a problem for most static sites.

The Azure Storage account has much higher limits. If however, your app has reached such a large size due to large static assets like images you may want to consider using an Azure Storage account with a CDN to separate the website assets from the application.

Preview Features

I last wrote about Azure Static Web Apps in 2021 while they were in preview. and since then the service has had so many updates, many of them written about in this post. However static web apps have still more new preview features. One of these includes Database connection](https://learn.microsoft.com/en-gb/azure/static-web-apps/database-overview). This allows direct access to a database from your static web app without server-side code.

At this time storage accounts have several great preview features however understandably non of them are focused on static websites.

Conclusion

Azure Static Web Apps is a great service for hosting static websites, especially when working with a static site generator or if you need Azure Functions. It is extremely feature-rich and is ever-increasing. With a generous free tier and Azure Functions, it is a great choice for most static sites.

However, there are very few limited scenarios, where if you are looking for a simple way to host a static page and need direct access to the files then Azure Storage may be the better option.

Title Photo by Glenn Carstens-Peters on Unsplash