Asp.Net Core Web Api and Vue.js client with IIS

Question

I'm trying to create an app with Asp.Net Core (.NET 6.0) as backend and Vue.js as frontend. I've created the .NET project inside Visual Studio 2022, added SPA Extensions and finally my Program.cs file look like this:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// Used by single page application requirements.
builder.Services.AddSpaStaticFiles(options =>
{
    options.RootPath = "wwwroot";
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseAuthorization();

app.MapControllers();

app.UseStaticFiles();
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

app.UseSpa(configuration =>
{
    configuration.Options.SourcePath = "wwwroot";
    if (app.Environment.IsDevelopment())
    {
        configuration.UseProxyToSpaDevelopmentServer("http://localhost:5002");
    }
});

app.Run();

Deploying code with setttings:

• Delete existing files
• Configuration Release
• Target net6.0 Framework
• Target win-x64 Runtime

Produce me a folder containing wwwroot folder with frontend files and many files for my backend application. I put them in an application inside iis server with an application pool configured as:

• .NET CLR Version 4.0
• Integrated pipeline mode

But my application can only load index.html file but not any.js or.css.

My application has a binding like this: https://app.domain.it/app-name and she try to open https://app.domain.it/filename.ext file each time, failing, since file is in a https://app.domain.it/app-name/wwwroot/file.ext and he's searching for https://app.domain.it/file.ext

Anyone could help me?

Edit 1: since I've selected Self-contained mode, I don't need the .NET 6 runtime installed on server host, right?

Answer 1

My recommendation is to create two different Application Pools and then deploy the .net core solution as your API (a) and the vue-app as your UI (b) separately.

(a) Standard Deployment with neither a project reference to UI-project nor a configuration of the pipeline regarding Static and default Files ( app.UseStaticFiles(); app.UseDefaultFiles(); not necessary )

(b) right click on vue project in VS and "Open in Terminal" -> then npm run build -> then go to dist folder and copy content to physical path for respective application pool on IIS

Solution worked for me. Let me know if it is a solution for you as well and if you have any questions. Hope I could help you.