Swagger UI on '.net Core hosted' Blazor WASM solution Web API project

Question

I'm using the '.net Core hosted' option on a Blazor WebAssembly solution.

This creates a .net Core Web API project for you as part of the solution.

If I created this myself and launch the project it will launch a Swagger UI interface to the API. If I launch the Server project in the '.net Core hosted' Blazor app, it launches the client app (as expected).

How can I get a Swagger UI for the Web API server app? (to test the API with).

I can find nothing on Google about this - this link didn't help: Can I use Swashbuckle to generate Swagger UI from Blazor project c#

thx.

Answer 1

I got it working with .NET 8 using below structure:

Here's my Program.cs. Note that we don't need to use Startup class anymore. Both Blazor and Swagger can be initialized and set up in Program.cs.

using BlazorApp.Components;
using BlazorApp.Data;
using BlazorApp.Models;
namespace BlazorApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddServerSideBlazor();
            builder.Services.AddHttpContextAccessor();
            builder.Services.AddResponseCaching();
            builder.Services.AddResponseCompression();

            // Add Raozr services to the container.
            builder.Services.AddRazorComponents()
                .AddInteractiveServerComponents()
                .AddInteractiveWebAssemblyComponents();

            // Database Contexts
            builder.Services.AddDbContextFactory<LendingContext>();
            builder.Services.AddDbContextFactory<ReportCenterContext>();

            // Services
            builder.Services.AddSingleton<PortfolioService>();
            builder.Services.AddSingleton<ReportService>();
            builder.Services.AddSingleton<CollateralService>();

            builder.Services.AddQuickGridEntityFrameworkAdapter();

            // Swagger
            builder.Services.AddEndpointsApiExplorer();
            builder.Services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new Microsoft.OpenApi.Models.OpenApiInfo
                {
                    Title = "API",
                    Version = "v1",
                });
            });

            builder.Services.AddRazorPages();
            // Add Controllers
            builder.Services.AddControllers();
            builder.Services.AddControllersWithViews();

            var app = builder.Build();

            // Configure the HTTP request pipeline.
            if (app.Environment.IsDevelopment())
            {
                app.UseWebAssemblyDebugging();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error", createScopeForErrors: true);                
                app.UseHsts();
            }

            app.UseSwagger();
            app.UseSwaggerUI();

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            //app.UseAntiforgery();

            app.MapRazorComponents<App>()
                .AddInteractiveServerRenderMode()
                .AddInteractiveWebAssemblyRenderMode()
                .AddAdditionalAssemblies(typeof(Client._Imports).Assembly);

            // Configure the HTTP request pipeline.
            app.UseRouting();
            app.UseAntiforgery();
            app.MapControllers();

            app.MapRazorPages();
            app.MapDefaultControllerRoute();
            app.Run();
        }
    }
}

Answer 2

When you launch your Blazor app, manually go to /swagger/index.html and you will see the standard Swagger UI.

If you want the SwaggerUI to show up when you run your app, instead of the Blazor Client, edit your launchSettings.json and set the "launchUrl" value of your startup profile to /swagger/index.html

If you would like to add a link to it in your MainLayout.razor, and make sure the link only displays in the Development Environment.

EDIT: You need to make sure Swagger is set up on the server in your program.cs file. (Assuming Asp.NET Core 6, if using 5, there should be similar initialization code in your Startup.cs file)

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "MyBlazor", Version = "v1" });
});
...
var app = builder.Build();
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
    app.UseSwagger();
    app.UseSwaggerUI(c => 
         c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyBlazor v1"));
}