When building a web application with a frontend and an API, should I use App Service only or Static Web App and App Service ?

Alexandre 346

I am building a web application with a frontend (written in Vue.js) and a backend (an ASP.NET Core API).
I don't know if I should host both the frontend and the backend on an App Service or if I should use a Static Web App for my frontend and an App Service for my backend.

I am aware of the differences between them, I have read the existing Q&A on the topic (https://learn.microsoft.com/en-us/answers/questions/398042/app-service-vs-static-web-app.html) but I don't know what is the recommended way of hosting an API and a front, separately or not.

Thanks for your answers.

1 answer

Cristian SPIRIDON 4,471 Reputation points

2022-01-02T14:26:39.99+00:00

Hi,

The recommanded way to host an web app is to separate static from dynamic content. In Azure you can do that with App Gateway:

https://learn.microsoft.com/en-us/azure/application-gateway/how-application-gateway-works

You can create rules that will route the static content to Static Web App and dynamic content to App Service.

Hope this helps!
Please sign in to rate this answer.
Alexandre 346 Reputation points

2022-01-02T14:53:24.413+00:00

Thank you for your answer. That makes sense, however, it feels a little bit overkill to add a third resource just for a simple web application. Moreover, I thought Application Gateway was for working with IaaS resources like virtual machines. Did you mean Azure Front Door instead? And in this scenario, I am not sure to understand how the Static Web App will communicate with the API.

Cristian SPIRIDON 4,471 Reputation points

2022-01-02T15:18:36.993+00:00

Hi,

App Gateway is for TLS termination, routing different content types and web app firewall among other. Front Door is more or less like App Gateway but at global level. But, if you have a small enough web app you can serve all from App Service.

Hope this helps!

Alexandre 346 Reputation points

2022-01-05T22:23:22.08+00:00

Yes it definitely helps thanks. However I don't understand completely how the Static Web App will be able to communicate with the API in the App Sevice. Indeed the Static Web App documentation says it only supports an Azure Function API and does not say anything about supporting an ASP.NET Core API hosted in an App Service.

Cristian SPIRIDON 4,471 Reputation points

2022-01-06T20:10:28.04+00:00

Hi,

You are right. The Static Web App cannot communicate with App Service. Static Web App have integration with Azure Function to provide a minimum of dynamic content.

I have found a good blog post that provide a good description of Azure hosting options:
https://devblogs.microsoft.com/devops/comparing-azure-static-web-apps-vs-azure-webapps-vs-azure-blob-storage-static-sites/

My take is that you can use App Gateway to glue them together. Or if you have a simpler case you can use only one of those solutions.
Sign in to comment