Cutomize Swagger UI ASP.NET Core Web API

Question

I'm trying to customize swagger UI on my ASP.NET Core Web API.

I want the UI like this:

I'm following these tutorials:

• https://docs.microsoft.com/en-us/aspnet/core/tutorials/web-api-help-pages-using-swagger?tabs=visual-studio
• https://github.com/swagger-api/swagger-ui

This is the Startup.cs configuration:

// Add the detail information for the API.
services.ConfigureSwaggerGen(options =>
{
    // Determine base path for the application.
    var basePath = _env.WebRootPath;

    // Complete path
    var xmlPath = Path.Combine(basePath, "myapi.xml");

    // Set the comments path for the swagger json and ui.
    options.IncludeXmlComments(xmlPath);
});

app.UseStaticFiles();

// Enable middleware to serve generated Swagger as a JSON endpoint
app.UseSwagger();

// Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
app.UseSwaggerUI(c =>
{                
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");
});  

I already downloaded swagger ui files from the git repository and put on my project like this:

I don't know if this is the right thing to do, but I'm not able to see any changes to the swagger UI.

Solution 1

The tutorial you are following is using: Swashbuckle.AspNetCore unfortunately in that project they still using the Swagger-UI version 2.x, your Screenshot shows version 3.x

There are a few Pull Requests to update to latest Swagger-UI:

• https://github.com/domaindrivendev/Swashbuckle.AspNetCore/pull/453
• https://github.com/domaindrivendev/Swashbuckle.AspNetCore/pull/543

But unfortunately there is not much progress towards merging those.

I see that you know how to download files from a git repository...
My recommendation:
Instead of downloading the swagger-ui files, download the entire project Swashbuckle.AspNetCore from a fork that is using the version you need (such as: alexvaluyskiy/Swashbuckle.AspNetCore), then in your project add a reference to that project instead of the nuget package.

Another option could be creating your own fork of Swashbuckle.AspNetCore merge the fixes you need and then publish your own Nuget package with a different name.

Solution 2

I ran into a similar issue, and I needed to inject my style sheet:

c.InjectStylesheet("/Swagger/Ui/custom.css")

This was added to app.UseSwaggerUI in the Startup.cs file.

The following articles helped, but I had to merge information from both to find my answer:

• https://cpratt.co/customizing-swagger-ui-in-asp-net-core/
• https://docs.microsoft.com/en-us/aspnet/core/tutorials/getting-started-with-swashbuckle?view=aspnetcore-2.1&tabs=visual-studio%2Cvisual-studio-xml

Solution 3

//I hope this will help you , you can get //https://localhost:44x22/docs/index.html

        app.UseSwagger(o =>
        {
            o.RouteTemplate = "docs/{documentName}/docs.json";
        });
        // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.), 
        // specifying the Swagger JSON endpoint.
        //This line enables Swagger UI, which provides us with a nice, simple UI with which we can view our API calls.
        app.UseSwaggerUI(c =>
        {

            c.IndexStream = () => GetType().Assembly
   .GetManifestResourceStream("CustomUIIndex.Swagger.index.html"); // requires file to be added as an embedded resource
            c.InjectStylesheet("/css/swagger-ui/custom.css");// css path
            c.InjectJavascript("../css/swagger-ui/custom.js"); javascript path
            c.RoutePrefix = "docs";
            c.SwaggerEndpoint("../docs/v1/docs.json", "API v1");
            c.SwaggerEndpoint("../docs/v2/docs.json", "API V2");
        });
        app.UseStaticFiles();

Comments

[Joe Phillips]

looks like those issues have been closed