Replace Swashbuckle UI completely

I am currently developing the ASP.Net Web API and am using Swashbuckle to document it. I know that Swashbuckle uses Swagger-UI internally, I know that we can change the layout by entering our css or javascript file, even changing the index.html layout.

I found good themes for Swagger-UI https://github.com/jensoleg/swagger-ui and tried to implement it, but could not get it to work. Especially when I want to add bootstrap.js. Is there anyway I can completely change the Swagbuck Swagger UI implementation so that I can use the solution from this repo?

+7
asp.net-web-api swagger swashbuckle
source share
3 answers

Of course, you can - in two stages.

1) Include the Index.html file as an embedded resource in the assembly. For example, suppose your web api project is called "Contosco.Api" and Index.html will be under "/Content/Index.html" in this project.

2) Redefine the html UI front 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"); }); } } 
+7
source share

You just download the .zip folder, extract and include in your project. In SwaggerConfigre.cs you no longer need to configure. Just put the template in the Swagger folder, and when you access {domain}/swagger it will hit index.html . (No need to change the build action for the embedded resource, the content is fine)

+2
source share

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

  • Download swagger-ui from github
  • Extract and copy the dist folder (rename the folder to swagger) and include it in the project
  • Change index.html in the dist folder to point to your swagger database path (which does not work with Swashbuckle)
+1
source share

All Articles