Replace Swashbuckle UI completely

Question

Right now I'm developing an ASP.Net Web API and using Swashbuckle for its documentation. I know that Swashbuckle use Swagger-UI internally, I know that we can modify the layout by injecting our css or javascript file, even change the layout of index.html.

I found a good themes for Swagger-UI https://github.com/jensoleg/swagger-ui and trying to implement it but can't make it works. Especially when I want to inject bootstrap.js. Is there anyway I can completely change Swashbuckle Swagger UI implementation so I can use the solution from that repo?

Answer 1

Sure you can - in two steps.

1) Include file Index.html as Embedded resource in your assembly. For example let's say your web api project is named "Contosco.Api" and Index.html will be located under "/Content/Index.html" in this project.

2) Override swagger UI main html page with your own

[assembly: PreApplicationStartMethod(typeof(SwaggerConfig), "Register")]
public class SwaggerConfig 
{
  public static void Register()
  {
    var thisAssembly = typeof(SwaggerConfig).Assembly;
    GlobalConfiguration.Configuration.EnableSwagger(c => {
     // configure swagger
    })
    .EnableSwaggerUi(c => {
      // beware - the Contosco.Api.Content.Index.html has to match your project paths :)
      c.CustomAsset("index", thisAssembly, "Contosco.Api.Content.Index.html");
    });
  }
}

Answer 2

You just download .zip folder, extract and include to your project. In SwaggerConfigre.cs you don't need configure any more. Just put template into folder Swagger and when you access {domain}/swagger it will hit index.html. (Don't need change Build action to Embedded Resource, Content is fine)

Answer 3

I was able to use the latest swagger-ui by following the simple steps here ,https://swagger.io/docs/swagger-tools/#swagger-ui-documentation-29

1. Download the swagger-ui from GitHub
2. Extract and copy the dist (rename folder to swagger) folder and include it in the project
3. Modify index.html in the dist folder to point to your swagger doc path (which off course is generated by Swashbuckle)

Answer 4

For .NET Core projects the solution differs a bit from the (correct) answer of @OndrejSvejdar:

After adding index.html as an embedded resource, you have to add the following line to app.UseSwaggerUI() in your Startup.cs...

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        //...

        app.UseSwaggerUI(c =>
        {
            c.IndexStream = () => GetType().GetTypeInfo().Assembly.GetManifestResourceStream("Your.Default.Namespace.Subfolder.Swagger_Custom_index.html");
        });

        //...
    }

All details of the process can be found here: https://stackoverflow.com/a/51043251/430742