CODEWITHSUNDEEP
angularazureasp.net-web-api
Mouna
Mouna

Reputation: 326

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

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:

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.

Upvotes: 7

Views: 6385

Answers (4)

Venkatesh Muniyandi
Venkatesh Muniyandi

Reputation: 5640

In Visual Studio 2022 and with .NET 6, there is an Angular project type where API and Angular as bundled within a single solution. Directly out of the box, you can publish the root solution to Azure so that both get deployed into a single App Service.

Upvotes: 0

Azure-Techno
Azure-Techno

Reputation: 106

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
        }

Upvotes: 9

Arvind
Arvind

Reputation: 70

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

Upvotes: 1

Santy
Santy

Reputation: 11

In the App Service on Azure Portal, launch Cmd and run dir command to check what files are deployed to wwwroot.

And, has API been set up as separate virtual directory?

Upvotes: 0

Related Questions