I’m trying to deploy a .NET Blazor web assembly application in Azure Static WebApp. I followed the instructions in this document.

https://learn.microsoft.com/en-us/azure/static-web-apps/deploy-blazor.

The web app is deployed and I could see the website, but the API throws a 404 – not found error.

This is my gitlab-ci.yaml file

stages:
  - deploy

variables:
  API_TOKEN: $AZURE_STATIC_WEB_APPS_API_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/ExpenseTracker.Client'
  OUTPUT_PATH: 'wwwroot'
  API_PATH: '$CI_PROJECT_DIR/ExpenseTracker.Server'
  PUBLISH_DIR: '$CI_PROJECT_DIR/publish'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

This is my staticwebapp.config.json file

{
    "routes": [
        {
            "route": "/api/*",
            "serve": "/api"
        }
    ],
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

ExpenseTracker.Server program.cs:

using System.Text.Json.Serialization;
using DinkToPdf;
using DinkToPdf.Contracts;
using ExpenseTracker.Server.AppDbContext;
using ExpenseTracker.Server.Entities;
using ExpenseTracker.Server.Services;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton(typeof(IConverter), new SynchronizedConverter(new PdfTools()));

builder.Services.AddControllers().AddJsonOptions(x =>
                x.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles);

builder.Services.AddRazorPages();  // Combine razor pages and api

// For Entity Framework
builder.Services.AddDbContext<ExpenseTrackerDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"));
});

// For DI registration
builder.Services.AddTransient<IExpenseTrackerService, ExpenseTrackerService>();

builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();

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

app.UseHttpsRedirection();

app.UseStaticFiles(); // to laod wasm static files

app.UseBlazorFrameworkFiles(); //  a special middleware component to serve the client 

app.UseAuthorization();

app.MapRazorPages(); // Combine razor pages and api

app.MapControllers();// handle /api

app.MapFallbackToFile("index.html");  // handle  everything else

app.Run();

ExpenseTracker.Client program.cs:

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using ExpenseTracker.Client;
using MudBlazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMudServices();

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

Why does the API return a 404 error while the web app URL is functioning fine?