How to Deploy 2 SPAs on the same Azure Web Service App - azure-web-app-service

I have a a server (.dontet) running on Azure Web Service App. And I have an SPA running on top of that that communicates with the REST APIs of said server. That SPA (JS, HTML, CSS) is being served by accessing the root url of said server. (something like https://my-server.azurewebsites.net)
Now I want to deploy an additional SPA (basically a more modern version) that talks to the same server and to the very same REST APIs as the "old" SPA.
How can I accomplish that?
Thanks for your help

Related

Azure: Publish a separated web API project in the same domain to another web app

When I have an ASP.NET web app with some API controllers that has a route /api for example, I can publish the app to Azure Web App and use the api by accessing someproject.azurewebsites.net/api/controller.
However, when I separate a web API part from the web app project, I have to publish the web API project to new domain like someapiproject.azurewebsites.net. I want to integrate the web API project to the web app just as I did with one combined project.
Is this possible?
If you want to combine multiple APIs, you should take a look at Azure API Management.
I doubt that you can publish multiple APIs into a single Web API since both requires a startup where you configure the host.
What you can do to cleanup your code is to outsource the controller into different assemblies and configure them in the middleware. Here is an example.
Martin Brandl's answer is spot on. But if you want to go the poor man's route, you can create a reverse proxy from your ASP.NET Web App and map app traffic from someproject.azurewebsites.net/apiV2 to someapiproject.azurewebsites.net. This is not a HTTP 30x redirect - the URL will not change for users hitting your /apiV2. I've personally used this approach because the Azure API Management service can get a little pricey. If you don't need the sexy features like throttling, this can be a good way to go.

Azure web and mobile app (shared API)

I'm currently in the planning process for a mobile app I'd like to build, with a companion web app. The Mobile app and the Web app will share common data (for example, users can take a questionnaire in the mobile app or take the same questionnaire on the web app).
I've used Azure a couple of years ago to create and host a web app, but this is my first venture in mobile development. I'm trying to wrap my head around the architecture in Azure for hosting the API.
I've searched high and low, but either can't find a definitive answer to my question, or am not quite understanding what I am reading on the subject.
Basically: Where would my API live in Azure? Would I create a Mobile App in my App Service, which hosts the shared web API? Then create a Web App in the app service, and use something like RESTSharp to access the API from the web app?
AFAIK, Web Apps and Mobile Apps are just different types of Azure App Service Apps which use to host the relevant applications (e.g. WebApps host website,webapi and MobileApps serve as the mobile backend service). Basically, they are the same and the difference between them is the app type and the Quickstart tutorial for them.
For mobile development, you could leverage the relevant SDKs (server-side and client-side) provided by Mobile Apps. You could also deploy your mobile backend application to Azure Web Apps to get the Mobile Functionality.
For Web Apps, you could follow here to build your web application and deploy to web app. For Mobile Apps, you could follow here to build your mobile backend and the tutorials for building your mobile client project.
Basically: Where would my API live in Azure? Would I create a Mobile App in my App Service, which hosts the shared web API? Then create a Web App in the app service, and use something like RESTSharp to access the API from the web app?
AFAIK, for Azure Mobile Apps backend, you could choose Node.js or C#. The relevant server SDKs provide out-of-the-box CRUD operations against the table. I would use the Mobile Apps SDKs to build my backend project and provide the ability to do operations on the specific table and the custom Web API to handle other operations. For your web app, you could use RESTSharp or just leverage the client SDKs provided by Azure Mobile Apps to communicate with your mobile backend endpoint (hosting on a web app or a mobile app).
For C# mobile app backend and mobile client side tutorials, you could follow adrian hall's book here.
For Node.js related mobile backend development, you could follow 30 DAYS OF AZURE MOBILE APPS.

Web API and web application in one project vs separate projects

I am completely new to the concept of servers, web APIs and web applications. I have a project where I need to design a Web API that allows clients to modify a database (hidden from the clients through the API).
And there is also a web application which has some functionalities. The web application also has to interact with the database.
So my question is, should I develop the Web API (Server) and the web application in the same project or two different projects?
I chose to implement the system using Mean stack for learning purposes. Mean stands for MongoDB, ExpressJS, Angular and NodeJS. As the Mean stack contains technologies to develop both the API and the Web app, am I supposed to develop all the code within one project and deploy it in my server or separate the Web API and the web application into two projects?
If it depends on the scenario, then to which kind of scenarios should I choose each and what are their pros and cons?
If shortly, Web API, it's backend, it's service, which you use in web application, and, web application, it's frontend, it's web site, which you see in your browser.
You can create one repo at github but server-side and client-side projects are separated.
You can choose the structure of your server-side and client-side projects depending on the purpose of your project. If you are going to create web application and then to develop mobile application (with ionic, for example) you should create web API separately. If you are going to create only the web application and to deploy your web application and web API to the same service (like heroku) you can make the same structure as in the heroku example (https://devcenter.heroku.com/articles/mean-apps-restful-api , also check the repo of this example https://github.com/chrisckchang/mean-contactlist-angular2 ).

How can I secure a restful web service for consumption by a browser client?

I have a rest service that I need to use in a browser web application using a JS MVC client framework like Backbone or Angular. But I need to ensure that my rest services are not exposed or anyone else may not be able to use my rest service to build apps on any device/client. Earlier I thought of protecting my web service using authentication credentials and hiding it behind a proxy and let the proxy serve html instead of service.
But I would like to know how can I secure my web service if I have to use it directly from front-end using ajax calls.

How to deploy a WebAPI application and an ASP.NET application in one web site on Azure?

I have two projects: an ASP.NET web application and a WebAPI application.
Web application uses the WebAPI application via AJAX.
To avoid cross domain problem, I want to the two projects deployed under one domain on Azure.
For example:
http://www.mycompany.com/api/products is a web api.
http://www.mycompany.com/index.html is the home page of the site, which calls the web api via AJAX.
Is it possible?
Yes, you can host multiple applications on the one site.
Go to Configuration / Virtual Applications and Directories:
Simply host your app under
/ site\wwwroot
And host your API under
/api site\wwwroot\api
And make sure your API is copied to the api sub-directory.
Make sure you tick the Application box.

Resources