Swagger UI - How to pass environment based URIs?

Question

I have included the [dist] folder for Swagger UI in my Web API project.

But when I go to this location http://localhost:1234/swagger it does not direct to http://localhost:1234/swagger/index.html automatically.

So, when I access http://localhost:1234/swagger/index.html directly I am getting this page with an empty textbox:----

1. I want the the text box to be populated with http://localhost:1234/swagger/docs/v1

2. I want this to happen dynamically based on environments. for example if I access http://test.abc.com/swagger the text should be populated as http://test.abc.com/swagger/docs/v1 automatically.

Answer 1

To answer your first question:

In your index.html page, you can have the following:

<script type="text/javascript">

  $(function() {
    window.swaggerUi = new SwaggerUi({
      url: "http://localhost:1234/swagger/docs/v1",
      ...
  });

</script>

As far as dynamically generating the url depending on the website you visited, you could do the following:

<script type="text/javascript">

  // Initialize the url variable
  if (!window.location.origin) {
    window.location.origin = window.location.protocol + "//" +
      window.location.hostname + (window.location.port ? ':' +
        window.location.port : '');
  }

  $(function() {
    // Create the generated url
    var myUrl = window.location.origin + '/docs/v1';

    // Initialize the Swagger object
    window.swaggerUi = new SwaggerUi({
      url: myUrl,
      ...
    });
  });

</script>