How to use local json file in swagger-ui documentation

Question

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.

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
– BipinR, Commented Aug 12, 2018 at 22:46

Arnaud Lauret · Accepted Answer · 2016-07-12 19:22:01Z

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: {}
            });
          }

answered Jul 12, 2016 at 19:22

Arnaud Lauret

5,3911 gold badge25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arnaud Lauret Over a year ago

It would be great if the people who downvoted my response explain why it's not useful.

G. Ciardini Over a year ago

Spec is a property, check the following documentation.

Community · Accepted Answer · 2017-05-23 11:54:53Z

2

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

With Node, globally install package http-server npm install -g http-server
Change directories to where json is located, and run the command http-server --cors (CORS has to be enabled for this to work)
Open swagger ui (i.e. dist/index.html)
Type http://localhost:8080/my.json in input field and click "Explore"

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Oct 26, 2016 at 23:42

Philip Kirkbride

23.1k39 gold badges134 silver badges238 bronze badges

Comments

Giles · Accepted Answer · 2018-02-02 15:38:29Z

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>

answered Feb 2, 2018 at 15:38

Giles

211 bronze badge

1 Comment

Jayasuriyan Over a year ago

The approach worked for me and to keep the file name of swagger hidden from view, try using urls

Collectives™ on Stack Overflow

How to use local json file in swagger-ui documentation

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related