node.js - How to organise/build a Swagger UI interface for a directory which contains many Swagger definition .json/.yml files

Question

I am trying to document, via Swagger UI, for internal company consumption, existing API services which are developed in a vendor product (WSO2 ESB). The vendor product does not support swagger. I plan to programmatically inspect/process the source code for my API services (written in the vendor product) and generate a directory/folder/library of swagger definition files in .json or .yml format. That is fine, I can do that.

Each of these api defintion files will render nicely in swagger UI, I am looking at using https://www.npmjs.com/package/swagger-ui.

My issue is I will end up with around 100 of these API definition files, I would like to provide some overarching interface/page which lists all of the API's and then takes the user to Swagger UI with the particular API definition loaded when the user clicks on one of the links. This is equivalent to opening my local swagger-ui and manually typing/copying in the path to the relevant API definition. This works fine if I do it manually, I just don't want the user to have to do this manually. How would they know what API definition url's exist and why make them manually type/copy them in.

I can't see how to pass a "apiDefintionToLoad" parameter into Swagger-ui, I guess I will either find one or change the source to support that. Does this exist?

Is there a better solution, either to develop myself or using an existing package or solution? I prefer node based solutions, java is also ok.

Am I going at this wrong?

Thanks, Matt.

Answer 1

Swagger UI 3.0.19 natively supports multiple specs via the urls parameter. When urls is used, the top bar displays a drop-down list of specs instead of an input box.

Usage

Edit distindex.html and change

url: "http://petstore.swagger.io/v2/swagger.json",

to

urls: [
   {name: "petstore",  url: "http://petstore.swagger.io/v2/swagger.json"},
   {name: "instagram", url: "https://api.apis.guru/v2/specs/instagram.com/1.0.0/swagger.yaml"}
],
"urls.primaryName": "petstore",  // default spec

Now your Swagger UI top bar looks like this: