What is the difference between Azure Static Web App and Azure blob storage static website?

Question

What is the difference between Azure blob storage static website and Azure Static Web Apps

Dialogize

Answer 1

There are lot of other benefits that comes with Azure static web apps that don't come with the static website which is hosted on blob storage.

• Functions in the same repo.
• TLS cert management (free!)
• Automated preview environments
• APIs that are scaled and hosted with your static content
• Content and corresponding APIs logically versioned together
• Simplified build and deployment process

UPDATE : Azure static web apps went GA since May 2021

Here is a great blog on the same.

Aggrade

thanks for the info, but I see that Azure static web apps are still in preview is it safe to assume it will be out of preview soon? (I understand you may nt have inside knowledge just thinking there may be a roadmap posted somewhere), also I'm currently using Blob storage static website and Azure CDN for TLS cert management, How would that compare in pricing? – Dialogize

As of now there is no information regarding GA and pricing , – Aggrade

@ShmiliBreuer It's in GA now – Aggrade

Answer 2

I have been working on a nextjs based static web app which I am hosting on Azure wep apps. Azure static web app has lot of benefits as everyone mentioned above. I will try to list out some limitations. I hope these limitations will be addressed in future.

• It supports only GitHub. I extensively use Azure Devops so, know I have tomaintain 2 repository hostings.
• No way to configure CORS settings so, I cannot use the backend Azure functions from other client based web apps easily.
• I couldn't figure out a way to access the deployed content on the server.

Phare

You can set CORS (meanwhile?), see learn.microsoft.com/en-us/azure/static-web-apps/… – Harsh

Thank you @MarkusSchulte – Phare

What did you mean by "it supports only GitHub"? I got a static web app hosted in Azure DevOps, deployed from DevOps, see dotnetthoughts.net/… – Harsh

Github was the only option available to host your code when Azure Static web apps were introduced in 2020, when it was in preview stage. Not sure but I think AzureDevops support was added when the service was available generally. – Phare

Microsoft has handled 2 limitations (first and second) I have mentioned in my answer. But I still believe that my last limitation is still valid. At least I couldn't figure out a way to access the deployed content. Please let me know if that is not correct. – Phare

@RameshKanjinghat for nextjs why deploy to azure static web app instead on app service? – Papaverine

@SangeetAgarwal This is based on my experience building and maintaining my own personal blog site, blogs.dhrutara.com. In my case I am generating the content while building so I only have static content. One advantage is the pricing. Check the pricing here. azure.microsoft.com/en-us/pricing/details/app-service/static and azure.microsoft.com/en-us/pricing/details/app-service/windows. Free tier of App service is not even recommended for production sites. But Azure Static free tier is a lot for my simple blog site. I have paid $0 for last 6 months on the hosting. – Phare

@SangeetAgarwal Azure static web apps free tier gives you free SSL certificates, custom domain support etc. Setting up ci/cd pipeline with github and Azure devops is breeze. Supports Azure functions for back end services. – Phare

@RameshKanjinghat thanks for the answers, much appreciated. So, what are the use cases for using an app service over a static web app? Just trying to wrap my head around why one would ever use an app service for a nextjs app. Thanks – Papaverine

@SangeetAgarwal if you have a nextjs application with server side rendering then you cannot use static web app. Because the html will be generated at the server when user makes a request. So, you need something to execute the code that generates the html. Azure static web apps cannot run such such rendering logic. It only serves static content, i.e files that are pre rendered as html files. You can still have JavaScript or web assemblies on these html pages though. – Phare

@RameshKanjinghat Thank you for explaining this. Much appreciated. – Papaverine

Answer 3

Another point is the SLA. With Azure blob storage static website you can reach 99.99% of SLA but with Azure Static Web Apps you can only reach 99.95% of SLA

Melanous

Answer 4

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a GitHub repository.

Key features

• Web hosting for static content like HTML, CSS, JavaScript, and images. Integrated API support provided by Azure Functions.

• First-party GitHub 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, Facebook, Google, 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. Static Web Apps is free during preview. for more info about static web apps visit: https://learn.microsoft.com/en-gb/azure/static-web-apps/

Azure blob storage for static web site Since its uses blob storage you only pay for storage account. But Azure recommends using an App service with a general purpose V2 standard storage account.

IMO the cost for static web app might be slightly higher that the cost for storage account. Since you get additional benefits like Github, Authorization etc.

Romina