theoomoregbee / sails-hook-swagger-generator

A tool to help generate Swagger specification documentation based on OAS 3.0 for Sails APIs
MIT License
78 stars 33 forks source link

How do I view the swagger UI? #28

Closed RotemBot closed 4 years ago

RotemBot commented 6 years ago

I have ./swagger/swagger.json and ./config/swaggergeberator.js

How do I view the swagger UI?

theoomoregbee commented 6 years ago

check #27

RotemBot commented 6 years ago

Saw that, but unclear how to extract /dist

theoomoregbee commented 6 years ago

I think I need to add an option to expose a route for swagger UI since it has been asked before. What do you think?

RotemBot commented 6 years ago

Sound good :)

tomsaleeba commented 6 years ago

You can use one of these inline route functions to expose the swagger.json.

An example (defined in config/routes.js):

  'get /swagger.json': (_, res) => {
    const swaggerJson = require('../swagger/swagger.json')
    if (!swaggerJson) {
      res
        .status(404)
        .set('content-type', 'application/json')
        .send({message: 'Cannot find swagger.json, has the server generated it?'})
    }
    return res
      .status(200)
      .set('content-type', 'application/json')
      .send(swaggerJson)
  }

Just note that as of https://github.com/theo4u/sails-hook-swagger-generator/commit/6b38ae3f083cef46d4bdb2b784b168cdd0481d38 defining one of these inline functions will cause this swagger-generator hook to explode on sails lift. I've got a commit that stops the explosion: https://github.com/tomsaleeba/sails-hook-swagger-generator/commit/4036f25082de21fbf6943dfce545c2c471f3c7b8. Hopefully I'll get time to make it actually process the route and produce the correct swagger definition.

theoomoregbee commented 6 years ago

@tomsaleeba with version v2.2.1 you can specify which directory to place the generated swagger JSON in. So putting it in assets folder which sails will automatically expose for you via http://localhost:1337/swagger.json. https://sailsjs.com/documentation/concepts/assets

The other thing is to specify a view to render from config/routes.js then find a way to skip such views when generating the swagger.json

This can be helpful too https://sailsjs.com/documentation/reference/configuration/sails-config-views

bhaveshbheda commented 6 years ago

copy generated json file to .temp/public dir so you can access it by http://localhost:1337/swagger.json

bilal68 commented 5 years ago

to view the swagger file swagger-ui is installed separately? @theo4u

theoomoregbee commented 5 years ago

yeah @bilal68

bilal68 commented 5 years ago

@theo4u can you please guide me through the steps i am new to sails. I installed the swagger-ui...where to set the route?and I am not seeing index.html file in swagger-ui/dist.

theoomoregbee commented 5 years ago

will do an easy toggle config if to allow swagger ui or not, this weekend

ronparrington commented 4 years ago

will do an easy toggle config if to allow swagger ui or not, this weekend

Any updates on integrating swagger-ui?

sercanov commented 4 years ago

I tried to implement Swagger UI by downloading dist folder and copied to sails public folder. Successfully listed the endpoints but when trying to expand route, it freezes and throws errors to console like below.

I suspect it's a Swagger version mismatch or dist configuration. Any idea why @theoomoregbee ?

image

theoomoregbee commented 4 years ago

I tried to implement Swagger UI by downloading dist folder and copied to sails public folder. Successfully listed the endpoints but when trying to expand route, it freezes and throws errors to console like below.

I suspect it's a Swagger version mismatch or dist configuration. Any idea why @theoomoregbee ?

image

Can you share the repo/branch you are working on, so I can easily and take a look and test locally

sercanov commented 4 years ago

Can you share the repo/branch you are working on, so I can easily and take a look and test locally

sorry, I cannot. It's private repository.

But I can share details of the stack; "sails-hook-swagger-generator": "^3.2.3", swagger-ui v3.32.5 from here; https://github.com/swagger-api/swagger-ui/tree/master/dist index.html of swagger-ui;

<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Swagger UI</title>
  <link rel="stylesheet" type="text/css" href="./swagger-ui.css">
  <link rel="icon" type="image/png" href="./favicon-32x32.png" sizes="32x32" />
  <link rel="icon" type="image/png" href="./favicon-16x16.png" sizes="16x16" />
  <style>
    html {
      box-sizing: border-box;
      overflow: -moz-scrollbars-vertical;
      overflow-y: scroll;
    }

    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }

    body {
      margin: 0;
      background: #fafafa;
    }
  </style>
</head>

<body>
  <div id="swagger-ui"></div>

  <script src="./swagger-ui-bundle.js" charset="UTF-8"> </script>
  <script src="./swagger-ui-standalone-preset.js" charset="UTF-8"> </script>
  <script>
    window.onload = function () {
      // Begin Swagger UI call region
      const ui = SwaggerUIBundle({
        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
    }
  </script>
</body>

</html>

Also, when I copy generated swagger.json to editor.swagger.io, it works without problems.

sercanov commented 4 years ago

okay, I found the problem. I needed to give absolute path for swagger url to SwaggerUIBundle.

Like below;

      const ui = SwaggerUIBundle({
//      url: "../swagger.json",
        url: "http://api.example.com/swagger.json",
        dom_id: '#swagger-ui',
        deepLinking: true,
        presets: [
          SwaggerUIBundle.presets.apis,
          SwaggerUIStandalonePreset
        ],
        plugins: [
          SwaggerUIBundle.plugins.DownloadUrl
        ],
        layout: "StandaloneLayout"
      })

Thanks !