best way to tell swaggerui where the host is

43.6k Views Asked by At

When I build my swagger.json file I do not know which host to use. However I can work it out when my page that hosts swaggerui loads (in fact I might want to offer the user a choice). I hoped to see an options.host on the config for the swaggerUI object - I dont see one. Is there an existing way of doing this that I cant find or do I simply have to hack my way through the code and add this capability (pointers to the best place to do it would be welcome)

10

There are 10 best solutions below

2
On BEST ANSWER

two ways

One modify swagger.js so that it accepts host option. swagger-UI passes options to swagger-js so that works. I submitted a pull to swagger-js with this fix

Second choice is that swagger-UI accepts a 'spec' parameter. This means that the hosting page can load the swagger.json file, JSON.parse it , set 'host' in it and then pass to swaggerUi constructor. This is harder for the caller but doesn't require code changes to swagger

2
On

Swagger has a built-in json definition for host config, or can accept multiple inputs.

{
    "swagger": "2.0",
    "info": {
        "title": "Why API",
        "description": "Don't make that mistake again",
        "version": "0.0.1"
    },

    "host": "127.0.0.1:3000",
    "schemes": [
        "https"
    ]
}

Or

"host": "test.mydomain.com:3000",
"schemes": [
    "https"
],

Or you can have a dynamic host by defining a var and calling a hostname or machine name or other environment variables.

dynamic example

if (typeof this.host === 'undefined' || this.host === '') {
  this.host = location.host;
}
if (location.port) {
  this.host = this.host + ':' + location.port;
}
0
On

Swagger UI express itself is giving the following snippet it's getting the current host and publish dynamic with host

app.use('/api-docs', function(req, res, next){
    swaggerDocument.host = req.get('host');
    req.swaggerDoc = swaggerDocument;
    next();
}, swaggerUi.serve, swaggerUi.setup());
0
On

if you use OpenApi 3.0

Variables can have arbitrary values, or may be restricted to an enum. In any case, a default value is required, which will be used if the client does not supply a value.

swagger doc

In the swagger-ui there will be the default value but the field is an input field so it is possible to customize it at runtime.

enter image description here

0
On

There are 2 ways which you can follow:

  1. Load the index.html and replace the https://petstore.swagger.io/v2/swagger.json with the url where your swagger.json is hosting.
    you can expose the local swagger.json on the same server.
    When you follow this approach make sure you include static files in the end of above steps.
    If you don't want to expose swagger.json as an API, copy the sawgger.json in the dist folder of swagger. The index.html and swagger.json must be in same repository for this. It is inside the index.html of dist folder of swagger-ui-dist.
const ui = SwaggerUIBundle({
          spec: location.host,
          url: "swagger.json",
          dom_id: "#swagger-ui",
          deepLinking: true,
          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
          plugins: [SwaggerUIBundle.plugins.DownloadUrl],
          layout: "StandaloneLayout"
        });
        // End Swagger UI call region

        window.ui = ui;
      };
  1. Second way, host parameter in the swagger.yaml/swagger.json either make it empty
    "host":""
    or omit host parameter.
    Swagger take the server's host as host where the swagger ui is hosted.
2
On

In recent versions of Swagger UI it's possible to do this, for example in onComplete:

window.swaggerUi.api.setHost("your.host:4242");

0
On

If you are using version > 3, the following code will work

  "servers": [{ "url": "https://api.example.com" }],
0
On

Here is what I do, since the loaded in document is just a JSON object:

var swaggerDoc = require('./api/swagger.json');
if (process.env.NODE_ENV === 'development') {
  swaggerDoc.host="localhost:" + process.env.PORT
}

// Initialize the Swagger middleware
swaggerTools.initializeMiddleware(swaggerDoc, function (middleware) {
  // Other initialization
}

This way you don't pollute your API specification with development environment configuration.

0
On

If you are hosting it on same app server, just remove the host key from the json and provide relative path in key "basePath". as - "basePath": "/rest/createcampaign".

0
On

This is how I did this using the Java client:

DefaultApi api = new DefaultApi();
api.getApiClient().setBasePath("http://localhost:8080");
//call the API