Where the Swagger pretty HTML code?

2019-02-19 05:56发布

问题:

There are only ugly HTML pages as download (HTML, HTML2 and dynamic all ugly), but the site, eg. edited https://app.swaggerhub.com/apis/{user}/{project}/{version} (and many others!) offers pretty HTML interface... How to download this pretty HTML?

Complete and autonomous HTML code (file or zip of files).

I have a good and valid swagger.yaml or swagger.json file of my API, so another solution is to run a open sourse (plug and play!) tool with my API-description file.


The pretty:

The ugly:

回答1:

The "pretty interface" on your screenshot is Swagger UI. It's free and open-source. There's a demo at http://petstore.swagger.io, where you can load your own .json/.yaml files from an URL and see how they would be rendered.

To use Swagger UI locally:

  1. Go to https://github.com/swagger-api/swagger-ui and download the repository as ZIP:

  2. Edit the dist\index.html file and change the line

    url: "http://petstore.swagger.io/v2/swagger.json",
    

    to the URL of your Swagger .json or .yaml file, e.g.

    url: "http://api.mysite.com/swagger.json",
    
  3. (Optional) Add/change other configuration parameters in the SwaggerUIBundle initialization code in dist\index.html.

  4. Open the dist\index.html file in your browser to preview your API docs.

    Note: If the spec does not load or "try it out" does not work, you probably need to enable CORS on the your server. See https://github.com/swagger-api/swagger-ui#cors-support and https://enable-cors.org.

  5. Upload the files from the dist folder somewhere to your server - and now you have pretty API docs too!


Alternativey, SwaggerHub (which you mentioned) provides cloud hosting for Swagger specs among other things, and has Swagger UI integrated. You can import your Swagger .json/.yaml files there and have your API docs hosted on SwaggerHub. A free plan is available.



回答2:

Thanks to @tleyden at swagger-ui/issues for good clues!

Use the index and assets folder of this project, https://github.com/okfn-brasil/swagger-ui-html



标签: html5 swagger