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

Previous concepts:

Architecture of Static Website
Architecture of Dynamic Website

Static website on Azure

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

Benefits of Azure CDN/Storage Static Hosting

  • 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

  • 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

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

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.
  • 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

--

--

--

Software Developer in Plain Concepts 👨🏻‍💻 In love with learn something new every day.⚡

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Easiest Way to Access Your Windows Desktop Through Apple Devices

GO-vatar series: Common code with Golang part 2

Calculating Production Delivery Date using “Agile” methodology — A flavor of…

Code Quality & Swift Style

Create a 3D Image Slideshow using HTML, CSS & JS

We’re currently experiencing some website issues

We're currently experiencing some website issues

Get Started With Linux: A Beginner’s Guide

Tighten up Your CORS Policy

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amin Chouaibi El Azaar

Amin Chouaibi El Azaar

Software Developer in Plain Concepts 👨🏻‍💻 In love with learn something new every day.⚡

More from Medium

Easy way to capture tcpdump in kubernetes

Generate Unit Test Coverage Reports and set a minimum coverage percentage limit with Jenkins and…

Keyed Dependency Injection using .NET

How to build a dotnet application in jenkins