Comparing Azure Static Web Apps and Azure CDN/Storage
Recently Microsoft announced a new Azure service: Static Web Apps. This is a competitor service to Netlify, but it also might replace traditional static site hosting with Azure CDN and Azure Storage. But let’s begin with: What is Azure Static Web Apps?
Azure Static Web Apps is a service that automatically builds and deploys full-stack web apps to Azure from a GitHub repository.
As this quote says, the service is not only for static sites, but also for static web apps. This not only includes HTML, but also an API backend! So basically it is a service for building and hosting JAM stack application.
So, now let’s compare the key features of Azure Static Web App with traditional Azure CDN & Azure Storage hosting. At the moment of writing, Static Web Apps is in public preview, so things might change!
Free web hosting
Azure Static Web Apps claims to have free web hosting for static content like HTML, CSS, JavaScript, and images. While this is true, it has a quota of 100 GB per month.
Compared to Azure CDN 100 GB cost around 8 dollars for traffic in the cheapest zone. This does not include costs for Azure Storage.
Integrated API
Azure Static Web App offers an integrated API backend for the static web app. The API support is provided by Azure Functions. The functions have to be written in JavaScript. It only supports HTTP triggers. All other triggers and binding, except for output bindings are restricted.
With traditional CDN & Storage hosting there is no integrated API backend. This must be created and hosted separately. Of course in this case the API is not limited.
First-party GitHub integration
The Static Web Apps service uses GitHub repositories and actions to host and build the source of the application. It integrates automatically with the configured repository and also integrated with Pull Requests and builds a staging version for the pull request. But, GitHub is not only a first-party, it is the “only-party”. Meaning there is currently no option to use Azure Dev Ops or other CI/CD systems.
With the CDN/Storage solution build and deployment has to be configured/implemented “manually”. Of course in this case there is no limitation.
Globally distributed
Azure Static Web Apps globally distributes static content. It is not clear/documented how the content is distributed or if Azure CDN is used for this. Tweets from the team only say “several global points of presence”.
Currently using several global points of presence on servers distributed around the world. @DariaGrigoriu can explain more details.
— John Papa (@John_Papa) May 20, 2020
Static Web Apps handles global distribution of the static content and cache invalidation for every deployment to production.
— Daria Grigoriu (@DariaGrigoriu) May 20, 2020
Overall I guess Microsoft will do a good job and performance will be good. Azure CDN provides 130 pop locations which is more than “several”.
Free SSL certificates & Custom Domains
Both Azure Static Web Apps and Azure CDN offer free SSL certificates and custom domains.
Authentication provider integrations
Azure Static Web Apps integrates authentication providers, such as Azure Active Directory, GitHub, Facebook, Twitter and Google. The integration is done via EasyAuth. Also roles can be created and users can be invited and assigned to one or more rules.
Azure CDN and Azure Storage do not support any end-user authentication.
Back-end routing rules
With Azure Static Web Apps routes can be defined in a single JSON file. Routing can be used to rewrite paths and define authorization behavior for static files and APIs.
While Azure CDN supports rewriting of paths, both, Azure CDN and Azure Storage, do not support authentication/authorization. Therefor routes can not be secured.
Generated staging versions
As already mentioned, Azure Static Web Apps can generate a staging version of the web app when a pull request is created. The URL to the staging version is then posted into the pull request. Unfortunately staging environments are currently limited to only one. Existing staging versions will be deleted with new pull requests.
Azure CDN and Azure Storage do not have these features.
Summary
While there are some other quotas/limitations, such as that the size of the Web App (build output, not repository) is limited to 100 MB, Azure Static Web Apps offers a lot of functionality out of the box for free. I am pretty sure it will be the “go-to” service for small to mid-size static sites/web apps in Azure and I will most probably move my blog 😊.