How to deploy angular app and web API in same azure app service?

Question

I have two separate projects, ASP.net Web API and Angular 8.
I was able to publish both on the same App Service.

So assuming the url is: http://someurl.azurewebsites.net:

• The API is accessed through http://someurl.azurewebsites.net/api
• The angular app is accessed through http://someurl.azurewebsites.net/index.html.

But when I access the link, it opens the default ASP.Net home page. After adding /index.html to the link, it opens the website, however if I refresh the page it takes me back to the ASP.Net home page

I tried changing the default documents in the App Service and setting it to index.html but that didn't work.

I want the angular app to be the default page for the app service.

Answer 1

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

Solution contains

i) sampleApp.API(.Net Core Web API)

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

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
        }

Answer 2

You can create sub application for api and set path API Application and IIS configuration set startup page for index.html

Its working fine!

Please follow following step:

1. First create web application and set angular app path and domain
2. Then select this web application and right click to create another sub application like api