Using .net core + Angular template, how to access API once deployed to Azure?

Question

I started a new application using the template for Angular and .netcore, created a web app, installed swagger, and deployed it to Azure, the application isn't much different from the template as I have just started adding my HTML to it. I am now trying to access the APIs but I get redirected to index.html, on localhost I am able to access it on a different port, the one SPAproxy starts before redirecting me, is there a way to expose this port on an Azure Web App? or even better can I expose it on the same port so I just use /swagger to access it?

Answer 1

Check the below steps to create .NET Core Web API and Angular Application to run within the same Port.

Here instead of Angular + .NET Core Template, I have added the 2 projects in the new folder and running the App.

• Create a new folder.
• In Visual Studio,Create a .NET CORE Web API within the newly created folder.
• Add another project ASP.Net CORE Web App with in the same project.
• Open the command prompt with newly created Core Web App root folder(to create angular).
• Create an angular application by running the below command.

ng n mynewAng

• In command prompt navigate to the newly created angular root folder(mynewAng).

cd mynewAng

• Run ng serve --open to launch the angular Application.

• In Angular project => angular.json, change the outputPath to "../../Your.NetCoreAPIFolderName/wwwroot"

• Deploy the Application to Azure App Service.

• In Azure Portal => Your API Management service => API's => click on your API under All API's = Test

My Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}
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();
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

OutPut