Static Website on Azure CDN/Storage vs Azure Static Web App

6 min readJan 19, 2021

Differences between static website hosted on Azure CDN/Storage Account and Azure Static Web App.

Previous concepts:

Static website:
In Static Websites, Web pages are returned by the server which are prebuilt source code files built using simple languages such as HTML, CSS, or JavaScript. There is no processing of content on the server (according to the user) in Static Websites. Web pages are returned by the server with no change therefore, static Websites are fast. There is no interaction with databases. Also, they are less costly as the host does not need to support server-side processing with different languages.

Note: Static does not mean that it will not respond to user actions, These Websites are called static because these cannot be manipulated on the server or interact with databases (which is the case in Dynamic Websites).

Dynamic website:
In Dynamic Websites, Web pages are returned by the server which are processed during runtime means they are not prebuilt web pages, but they are built during runtime according to the user’s demand with the help of server-side scripting languages such as PHP, Node.js, ASP.NET and many more supported by the server. So, they are slower than static websites but updates and interaction with databases are possible.

Dynamic Websites are used over Static Websites as updates can be done very easily as compared to static websites (Where altering in every page is required) but in Dynamic Websites, it is possible to do a common change once, and it will reflect in all the web pages.

Concepts extracted from: Static vs Dynamic Website — GeeksforGeeks

Static website on Azure

Previously if you have static content that needs to be exposed to the public Microsoft Azure gave us the option to use Azure Storage Account to host full static websites and integrating it with Azure CDN in order to get the content closer to the user, improving the experience and the performance of the application.

Nowadays Azure released new service named Azure Static Web App in preview mode.

In this post, we will compare these Azure services.

Benefits of Azure CDN/Storage Static Website
Benefits of Azure Static Web Apps
Comparison between them.

Benefits of Azure CDN/Storage Static Hosting

With Azure Storage Account you don’t have the burden of creating and managing a VM with Windows running IIS, Linux running Apache or even serverless solutions such as App Service and Web App, that it would be a waste of resources.

Azure CDN is an easy and fast way to get the content closer to the user, depending on the requirements presented, it can bring value to the application improving its performance.

The whole process is fast and straightforward and doesn’t take more than a few minutes.
Enabling Azure CDN on Azure Storage to bring the content closer to the end-user is a considerable advantage.

Benefits of Azure Static Web Apps

A competitor service to Netlify, but it also might replace traditional static site hosting with Azure CDN and Azure Storage, and if you are looking for faster development and deployment process with just a git commit you would definitely check this out.

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.

Therefore, the service is not only for static sites, but also for static web apps, so the service not only includes HTML, includes also an API backend.

Managed global availability for static content.
Productivity from local development to GitHub native workflows for CI/CD.
Streamlined management including custom domain configuration and authentication and authorization
Dynamic scale for serverless APIs.

Azure CDN/Storage vs Azure Static Web App

Now we’ll compare the key features of Azure Static Web App with traditional Azure CDN & Azure Storage hosting, at the moment Azure Static Web App is in mode preview, so might change in the future.

Free web hosting

Azure Static Web Apps offers and affirm to have free web hosting for static content, while this is true it has a quota of 100 GB per month.
Azure CDN 100 GB cost around 8 dollars for traffic in the cheapest zone and without including the cost of Azure Storage, we are already having a higher cost.

Backend Integration

Azure Static Web App offers an integrated API backend for the static web app, the API support is provided by Azure Functions v3. The functions are compatible with Node.js 12, .NETCore 3.1 and Python 3.8, and it only supports HTTP triggers with input and output bindings, all other triggers are restricted.
Therefore, we can read/write data in Azure Cosmos DB or Azure Storage Blobs with output bindings.
With Azure 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.

Custom domains & Free SSL Certificates

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.
With Azure 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.

Globally distribution

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.
Azure CDN provides 130 pop locations.

GitHub Integration

Azure Static Web Apps service uses GitHub repositories and actions to host and build the source of the application, and it integrates automatically with the configured repository and also integrated with Pull Requests and builds a staging version for the pull request. 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.

GitHub it is the only option for CI/CD for Static Web App, meaning there is currently no option to use Azure DevOps or other CI/CD systems.

Azure CDN/Storage solution build and deployment has to be configured/implemented “manually” with GitHub workflow with Git Hub Action to Upload Assets to Azure Blob Storage or Azure DevOps in order to upload the static content, of course in this case there is no limitation.

Conclusions

If you want to build a web app and go from local development to production environment within minutes and take advantage of all the production-grade features out of the box. While there are some other quotas/limitations, such as that the size of the Web App (build output, not repository) is limited to 250 MB, Azure Static Web Apps offers a lot of functionality out of the box for free.