Make swagger-ui configurable with a separate js/json file

[ikitommi]

Swagger-ui is mostly great already by default but would be great if there was an easy way to modify some of it's parameters without needing to copy-paste the whole index.html (with lots of dependencies, custom copies get easily out of sync with the master).

Suggestion: separate swagger-ui-config.js file read in the index.html, which has good/current defaults, easily overridable in the client project. Parameters like:

• base-href (known by the server)
• authorization (oauth2 confs etc)
• do-not-put-link-to-the-sample-petstore

... or some other way to externalize the swagger configuration into a separate minimalistic javascript-file.

[mingfang]

+1

[cyberwolf]

I'm entirely new to Gulp but I attempted to read out some configuration from config.json (or, if not present, the default config.dist.json) and replace the petstore URL in the source files with the defaultUrl specified in the configuration file. You can check it out in my configurable-default-url branch at https://github.com/2dotstwice/swagger-ui/tree/configurable-default-url. Probably it's better to inject the defaultUrl into index.html another way, I'm willing to contribute a bit more if someone can tell me what's considered best practice for doing these kind of things.

[mohsen1]

index.html is just an example of how you can use SwaggerUI. The header (which defaults to petstore) is not part of SwaggerUI.

In general you usually load SwaggerUI JavaScript and CSS dependencies in your page, and use SwaggerUi constructor function to initialize your UI. You can pass the URL from there.

[mohsen1]

I am trying to get rid of dependencies to global swaggerUi instance of SwaggerUi so yo don't have to append your instance as swaggerUi to window.

[mohsen1]

With recent changes to code now we have flexible configurability. If you want to load your configs you can do it as following:

$.get('./swagger-ui-config.json').then(function(result) {
  var swaggerUi = new SwaggerUi(result.data.uiConfig);

  var apiKeyAuth = new SwaggerClient.ApiKeyAuthorization(
    result.data.keyName,
    result.data.key,
    result.data.keyType
  );

  swaggerUi.api.clientAuthorizations.add('api_key', apiKeyAuth);
});

Here is how that JSON should look like:

{
  uiConfig: {
    url: '<URL HERE>',
    dom_id: "<ID HERE>",
    supportedSubmitMethods: [ ... ]
  },

  keyName: ...,
  key: ...,
  keyType: 'query'
}