0

How can we deploy both angular and api projects(6.0) in single solution to single azure web app? In Visual studio 2022, we have stand alone angular template option to create an angular project. If I am adding a .net 6 api also to this same solution, how can we deploy both in single web app?

benz
  • 21
  • 4

1 Answers1

2

Check the below steps to deploy .NETCORE 6 Web API and Angular Application into the same Azure App Service.

  • In VS, Create a blank project and name it as AngularAPI. enter image description here

  • In the blank project, Add the new Project .Net CORE Web API and name it as CoreAPI. enter image description here

  • Add another project with name Angular and delete all the folders except Dependencies and Connected Services. enter image description here

  • Now in the project named Angular we need to add and configure the Angular components.

  • Open the command prompt, navigate to the Angular folder and run the below command to create new angular app.

ng new angapp

enter image description here

  • Navigate to the newly created angapp folder and run the below command.
ng serve --open

  • Open angular.json file and change the output path to "outputPath": "../../CoreAPI/wwwroot".

  • In command prompt, Run ng build. enter image description here

  • wwwroot folder will be created in CoreAPI project folder. enter image description here

  • In .NetCore WebAPI App, add the below lines of code in Program.cs file.

app.Use(async (context, next) =>
{
    await next();
    if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});
app.UseDefaultFiles();
app.UseStaticFiles();

  • Set CoreAPI as Startup project. Run the app locally. Able to run both Angular and .Net Core API in the same port. enter image description here enter image description here

  • Right click on the CoreAPI (.NetCore Web API App) folder and click on Publish to deploy the Application to Azure App Service. enter image description here

Output of Deployed Azure App :

enter image description here

Harshitha
  • 3,784
  • 2
  • 4
  • 9