Embedd Swagger UI into Blazor Server Side App

Question

I would like to embed the swagger UI in a page on my blazor app. I am having a hard time finding examples of how to do this with razor pages. Does anyone have any examples doing this? I am usually more of a back end developer so struggling a bit getting this front end up and running.

Answer 1

Although this is quite an old issue, I've decided to try and find the answer as I wanted to embed the Swagger UI into one of my pages myself. It turns out that it is quite easy to do it!
All credits go to this repository - owner 'jsauve'.

He shows that you can do it:

Here are the steps that you need to do in order for it to show on your page:

0. Install Swashbuckle.AspNetCore on your Blazor Server.
1. In Startup.cs, ConfigureServices add:

            services.AddControllers();
            services.AddSwaggerGen(c =>
            {
                c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API", Version = "v1" });
            });

2. In Startup.cs, Configure add:

            app.UseSwagger();
            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
            });

3. Simply, create Razor Component and add:

            @page "/test"

            <iframe src="swagger" style="width:90%;height:1200px;border:none;" />

Navigate to /test from your e.g. MainLayout.razor. I hope it can help somebody because it certainly helped me.