Azure App Service Mobile + Web

Question

I am in the beginning phases of evaluating and designing the would-be architecture of a Mobile App (via Xamarin) and a Web App (probably via Angular). I think the Azure App Service is definitely an appropriate choice to host these services. I am getting hung up on how to actually implement such a solution in Azure. What I am going for is essentially a mobile app and web app that communicates to a central API that takes full advantage of the Azure App Services.

I understand there is really no difference between the 4 services (mobile, web app, API, and logic). I think that I want to start off creating a Mobile App Service and use the Quickstart options to build an Xamarin.Forms and API starting point. I assume this sets up the App Service to essentially be a Web API configured to work with Mobile App features such as offline mode, push notifications, etc.

The part that is confusing to me, is how to add the Angular (or similar front-end framework) web app to the service. I am not too sure if I am able to add it to that Mobile App service or if I need to create another app service containing a single page application. I could start off with an Web App (ASP.NET MVC) service, but I do not want to maintain separate controllers for the web and mobile apps (or lose out on the Mobile App benefits).

Does anyone have any suggestions or experience on a correct configuration to set up to get what I am going for?

Answer 1

I am not too sure if I am able to add it to that Mobile App service or if I need to create another app service containing a single page application.

You could create a Azure mobile app backend for your Xamarin.Forms app. For SPA or other web application (e.g. ASP.NET MVC,etc.), you could set up the IIS virtual directory under your mobile app, and deploy your SPA to the virtual directory as follows:

Sample: https://bruce-mobile.azurewebsites.net/services/index.html

For more details, you could refer to Deploying multiple virtual directories to a single Azure Website.

Per my understanding, Mobile Apps serve as Web API and provide build-in features (Authentication/Authorization, Offline sync, Push notifications, client SDKs, etc.). For Windows and Xamarin apps, you could using the managed client library for azure app service Mobile Apps, for more details you could refer to here. For javascript/HTML, you could use the javascript client library with your mobile app.

I would use mobile apps as the central API for my client app and web application, since you could define custom APIs under mobile apps, for more details you could refer to adrian hall's book about Custom HTTP Endpoints.