4

I am trying to use local swagger.json file to be displayed in swagger documentation.

My swagger.json file is under /home/user1/swagger-ui/dist/swagger.json and the index.html resides under the same directory. I have modified the index.html as below.

 window.swaggerUi = new SwaggerUi({
    spec: ../swagger.json
    url: url,
    dom_id: "swagger-ui-container",

After starting the docker instance using docker run -p 80:8080 swagger-ui-builder, accessing http://192.168.xx.xx/ does not display the documentation. Attaching the screenshot for reference. Please help me to resolve this.enter image description here

Poppy
  • 2,902
  • 14
  • 51
  • 75
  • did you ever figure this out? – Philip Kirkbride Oct 26 '16 at 23:18
  • Possible duplicate of [How to open local files in Swagger-UI](http://stackoverflow.com/questions/30400477/how-to-open-local-files-in-swagger-ui) – Dheeraj Vepakomma May 10 '17 at 12:26
  • Did the solution work? What did you do? I’m having the same problem, everything work in my local iis but when I move it to remote server it does not work. It throws cannot read file error. – BipinR Aug 12 '18 at 22:46

3 Answers3

2

The sample provided in the question cannot work at all (missing coma and spec is not a SwaggerUI property).

To show your swagger.json file which is in the same folder as index.html you just need to replace url = "http://petstore.swagger.io/v2/swagger.json" by url = "swagger.json"; in index.html.

Original index.html

      var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "http://petstore.swagger.io/v2/swagger.json";
      }

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }

Modified:

      var url = window.location.search.match(/url=([^&]+)/);
      if (url && url.length > 1) {
        url = decodeURIComponent(url[1]);
      } else {
        url = "swagger.json";
      }

      [...]

      window.swaggerUi = new SwaggerUi({
        url: url,
        dom_id: "swagger-ui-container",
        supportedSubmitMethods: ['get', 'post', 'put', 'delete', 'patch'],
        onComplete: function(swaggerApi, swaggerUi){
          if(typeof initOAuth == "function") {
            initOAuth({
              clientId: "your-client-id",
              clientSecret: "your-client-secret-if-required",
              realm: "your-realms",
              appName: "your-app-name",
              scopeSeparator: ",",
              additionalQueryStringParams: {}
            });
          }
Arnaud Lauret
  • 4,961
  • 1
  • 22
  • 28
2

Here was a solution I found here (pretty quick and painless if you have node installed):

  1. With Node, globally install package http-server npm install -g http-server

  2. Change directories to where json is located, and run the command http-server --cors (CORS has to be enabled for this to work)

  3. Open swagger ui (i.e. dist/index.html)

  4. Type http://localhost:8080/my.json in input field and click "Explore"

Community
  • 1
  • 1
Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
2

I have several Swagger files and would like to easily switch between them. So I changed index.html to get the first URL parameter and open swagger-ui with that.

I have bookmarks for the different files:

index.html?file1

index.html?file2

etc..

<script>
window.onload = function() {

  var url = window.location.search.substring(1);

  if (url.length == 0) {
  url = "swagger.json";
  }

  // Build a system
  const ui = SwaggerUIBundle({
    url: url,
    dom_id: '#swagger-ui',
    deepLinking: true,
    presets: [
     SwaggerUIBundle.presets.apis,
     SwaggerUIStandalonePreset
    ],
    plugins: [
     SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
 })
window.ui = ui
}
</script>
Giles
  • 21
  • 1