Publish WebAPI and MVC projects to same Azure Web Site?

Question

I have two seperate projects in Visual Studio - one with a WebAPI and one with a MVC Web Site...

Can I publish both of these to the same Azure Web Site, so that requests to: - /api/products/ => gives JSON from the WebAPI - /products/ => gives HTML from the MVC web site

Answer 1

Go to Azure portal and create an AzureWebsite -

Then setup an additional application in the settings as follows -

Now create two projects in the Visual studio solution -> 1) MVC and 2) WebApi

Download publishsettings file of above created azure website. Import the publishsettings file to the Visual studio MVC project publish as shown below -

And for WebApi project, import the same publish settings, but create a new path as website/webapi.

Publish both the projects.

Now navigate to http://{yoursite}.azurewebsites.net for the MVC site. And navigate to http://{yoursite}.azurewebsites.net/webapi/api for your WebApi.

Answer 2

Basically this needs following steps to be done to make it working.

Solution contains

i) sampleApp.API(.Net Core Web API) will be deployed in subfolder

ii)sampleApp.UI( Angular App)

Setting up Azure portal for two applications

1) Go to your web app in azure portal -> Settings->configurations

2) Select Path Mappings and here create new mapping entry for subsite .While adding this entry don't select directory checkbox to keep this as virtual application type.Click save

 **Virtual Path:** /{folderName}            **physicalPath:**  /site/wwwroot/{folderName} 

3) Now go to VS2017 right click your API project and click publish

4) In publish settings window make paths as

site name : existing + "/{folderName} "
DestinationUrl : existing + "/{folderName} "

5) Now ng-build --prod your angular app and deploy dist/clientApp folder and publish with root paths.

so now both should work as

angular app https://{AzureAppName}.azurewebsites.net

Web API https://{AzureAppName}.azurewebsites.net/{folderName}/api/{controllerName}/{action}

If still user face "cant read configuration data from web.config" issue while accessing api project or getting error code 502 then

For this in your API project go to startup.cs and change configure function to have following line of code

app.Map('/{folderName}', app1 => Configure1(app1, loggerFactory);

and create in blank copy of configure function with name configure1 and redeploy your API project as mentioned above.

public void Configure1(IApplicationBuilder app, ILoggerFactory loggerFactory)
        {
            //keep it blank
        }