Where the Swagger pretty HTML code?

2019-02-19 05:17发布

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:

enter image description here

The ugly:

enter image description here

标签: html5 swagger
2条回答
迷人小祖宗
2楼-- · 2019-02-19 06:04

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

查看更多
smile是对你的礼貌
3楼-- · 2019-02-19 06:21

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:

    Download Swagger UI

  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.

查看更多
登录 后发表回答