How to open local files in Swagger-UI

Question

I'm trying to open my self generated swagger specification file my.json with swagger-ui on my local computer.

So I downloaded the latest tag v2.1.8-M1 and extracted the zip. Then I went inside the sub folder dist and copied the file my.json into it. Now I opened the index.html and want to explore my.json. And here the problem begins:

If I enter a local path, it always will be prefixed by the current url containing the index.html. And therefor I can't open my file. I tried all following combinations without success:

• my.json leads to file:///D:/swagger-ui/dist/index.html/my.json
• file:///D:/swagger-ui/dist/my.json leads to file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json

Answer 1

I could not get Adam Taras's answer to work (i.e. using the relative path ../my.json).

Here was my solution (pretty quick and painless if you have node installed):

• With Node, globally install package http-server npm install -g http-server
• Change directories to where my.json is located, and run the command http-server --cors (CORS has to be enabled for this to work)
• Open swagger ui (i.e. dist/index.html)
• Type http://localhost:8080/my.json in input field and click "Explore"

Answer 2

Use the spec parameter.

Instructions below.

Create spec.js file containing Swagger JSON

Create a new javascript file in the same directory as index.html (/dist/)

Then insert spec variable declaration:

var spec =  

Then paste in the swagger.json file contents after. It does not have to be on the same line as the = sign.

Example:

var spec =  {     "swagger": "2.0",     "info": {         "title": "I love Tex-Mex API",         "description": "You can barbecue it, boil it, broil it, bake it, sauté it. Dey's uh, Tex-Mex-kabobs, Tex-Mex creole, Tex-Mex gumbo. Pan fried, deep fried, stir-fried. There's pineapple Tex-Mex, lemon Tex-Mex, coconut Tex-Mex, pepper Tex-Mex, Tex-Mex soup, Tex-Mex stew, Tex-Mex salad, Tex-Mex and potatoes, Tex-Mex burger, Tex-Mex sandwich..",         "version": "1.0.0"     },     ...     } } 

Modify Swagger UI index.html

This is a two-step like Ciara.

Include spec.js

Modify the /dist/index.html file to include the external spec.js file.

 <script src='spec.js' type="text/javascript"></script> 

Example:

  <!-- Some basic translations -->   <!-- <script src='lang/translator.js' type='text/javascript'></script> -->   <!-- <script src='lang/ru.js' type='text/javascript'></script> -->   <!-- <script src='lang/en.js' type='text/javascript'></script> -->    <!-- Original file pauses -->   <!-- Insert external modified swagger.json -->   <script src='spec.js' type="text/javascript"></script>   <!-- Original file resumes -->    <script type="text/javascript">      $(function () {       var url = window.location.search.match(/url=([^&]+)/);       if (url && url.length > 1) {         url = decodeURIComponent(url[1]);       } else {         url = "http://petstore.swagger.io/v2/swagger.json";       } 

Add spec parameter

Modify the SwaggerUi instance to include the spec parameter:

  window.swaggerUi = new SwaggerUi({     url: url,     spec: spec,     dom_id: "swagger-ui-container",