Feature request for Swagger UI: view a request as a curl command

[joelparkerhenderson]

Based on #580

In Swagger UI, when I view an API doc, there is a "Try it out" button that runs the request.

The feature request is for a UI feature that enables a way to view a request as a curl command.

For example, imagine a button that says "View as curl". Tap the button, and a div expands (or popup displays) which shows the corresponding curl command line. The user can then copy/paste the curl command into any typical shell.

This feature request is to solve a current pain point for my team: we rely on curl for many of our needs, and the curl commands for each endpoint are in our current API docs, which are not Swagger. This feature implementation will enable us to move completely to Swagger.

My understanding from the above is that the capability to generate the curl command is a recent addition to swagger.js.

Thanks for your consideration.

[amarseillan-zz]

so much 👍

[who]

👍 This would be quite useful!

For a temporary Swagger-to-curl workaround, you could import the spec into Postman, and then view your particular request in curl mode.

[shawngong]

Hey I wrote a hack to show curl in swagger-ui if anyone is interested!

The script is on my github page, and I am going to submit it as a pull request :).

The curl can also be double clicked to select all and supports a user + password input to generate base 64 encrypted basic authorization

[webron]

@shawngong - that would be great, thanks

[shawngong]

Submitted the request, there didn't seem to be any easy way to generate the curl so I just wrote my own function. Only can handle simple GET, POST, and DELETE requests at the moment.

[fehguy]

there is a function inside the swagger-client module. For each operation, you can get curl:

swaggerUi.api.pet.getPetById.asCurl({petId: 3})

"curl -X GET --header "Accept: application/xml" "http://petstore.swagger.io/v2/pet/3""

[shawngong]

Is there any documentation available for the asCurl function parameters(s)?

[fehguy]

I suggest looking at the swagger-client unit tests:

https://github.com/swagger-api/swagger-js/blob/master/test/help.js#L33

[typekpb]

+1

[shawngong]

I rewrote the curl generation function using asCurl, here

[shawngong]

Update, if you want to add curl output using swaggerUi's source files it's really simple. Follow these steps:
Go to src/main/template/operation.handlebars and add

<h4>Curl</h4>
<div class='block curl'></div>

in the div class='response' section.

Then go into src/main/javascript/view/OperationView.js and add the following under var response_body (approximately line 675):

var response_body = pre;
    $('.request_url', $(this.el)).html('<pre></pre>');
    $('.request_url pre', $(this.el)).text(url);
    $('.response_code', $(this.el)).html('<pre>' + response.status + '</pre>');
    $('.response_body', $(this.el)).html(response_body);
    $('.response_headers', $(this.el)).html('<pre>' + _.escape(JSON.stringify(response.headers, null, '  ')).replace(/\n/g, '<br>') + '</pre>');
    $('.response', $(this.el)).slideDown();
    $('.response_hider', $(this.el)).show();
    $('.response_throbber', $(this.el)).hide();


    //adds curloutput
    var curlCommand = swaggerUi.api[this.parentId][this.nickname].asCurl(this.map);
    console.log(curlCommand);
    curlCommand = curlCommand.replace("!", "&#33;");
    $( '.curl', $(this.el)).html('<pre>' + curlCommand + '</pre>');

    var response_body_el = $('.response_body', $(this.el))[0];

Finally insert this.map = map into OperationView.js in the last else statement of the submitOperation function.

if (isFileUpload) {
        return this.handleFileUpload(map, form);
      } else {
        this.map = map
        return this.model.execute(map, opts, this.showCompleteStatus, this.showErrorStatus, this);
      }
}

Then if you run gulp you should be able to get some curl output.