swagger-tools on node: How to load swaggerUi?

Question

When I hit http://localhost:3001/api-docs loads the swagger json docs.

{
swagger: "2.0",
info: {
version: "1.0.0",
title: "Auth-gateway services",
contact: {
name: "swagger docs",
url: "https://www.google.com"
}
},
host: "127.0.0.1:3001",
basePath: "/",
...
}

But how do I load UI like http://petstore.swagger.io/ for my APIs.

Answer 1

To view you api through swagger-ui, do one of the following.

Option 1: Using online swagger-ui

1. Go to this.
2. On the dialog-box on the top of the page, provide the url for swagger-json. In your case, insert http://localhost:3001/api-docs instead of http://petstore.swagger.io/v2/swagger.json (which can be seen in default) and click Explore.
3. Now you can see swagger-ui generated for your api.

Option 2: Setting up swagger-ui project locally

You have to set up swagger-ui. You can clone the project set up that with the below instructions provided.

Windows Users: Please install Python before follow below guidelines
for node-gyp rebuild to run.

1. npm install
2. npm run build
3. You should see the distribution under the dist folder. Open ./dist/index.html to launch Swagger UI in a browser

Development

Use npm run serve to make a new build, watch for changes, and serve the result at http://localhost:8080/.

Now you should be able to see something exactly like online swagger-ui.

Do the same as option 1 to provide swagger-json url and see swagger-ui generated.