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

Answer 1

After a bit of struggle, I found a better solution.

1. create a directory with name: swagger

   mkdir C:\swagger
   

If you are in Linux, try:

    mkdir /opt/swagger

2. get swagger-editor with below command:

   git clone https://github.com/swagger-api/swagger-editor.git
   

3. go into swagger-editor directory that is created now

   cd swagger-editor
   

4. now get swagger-ui with below command:

   git clone https://github.com/swagger-api/swagger-ui.git
   

5. now, copy your swagger file, I copied to below path:

   ./swagger-editor/api/swagger/swagger.json
   

6. all setup is done, run the swagger-edit with below commands

   npm install
   npm run build
   npm start
   

7. You will be prompted 2 URLs, one of them might look like:

   http://127.0.0.1:3001/
   

   Above is swagger-editor URL

8. Now browse to:

   http://127.0.0.1:3001/swagger-ui/dist/
   

   Above is swagger-ui URL

Thats all.

You can now browse files from either of swagger-ui or swagger-editor

It will take time to install/build, but once done, you will see great results.

It took roughly 2 days of struggle for me, one-time installation took only about 5 minutes.

Now, on top-right, you can browse to your local file.

best of luck.

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",

Answer 3

With Firefox, I:

1. Downloaded and unpacked a version of Swagger.IO to C:\Swagger\
2. Created a folder called Definitions in C:\Swagger\dist
3. Copied my swagger.json definition file there, and
4. Entered "Definitions/MyDef.swagger.json" in the Explore box

Be careful of your slash directions!!

It seems you can drill down in folder structure but not up, annoyingly.

Answer 4

If all you want is just too see the the swagger doc file (say swagger.json) in swagger UI, try open-swagger-ui (is essentially, open "in" swagger ui).

open-swagger-ui ./swagger.json --open

Answer 5

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 6

This is how I worked with local swagger JSON

1. Have tomcat running in local machine
2. Download Swagger UI application and unzip it into tomcat's /webapps/swagger folder
3. Drop local swagger json file inside /webapps/swagger folder of tomcat
4. Start up tomcat (/bin/sh startup.sh)
5. Open a browser and navigate to http://localhost:8080/swagger/
6. type your swagger json file in the Swagger Explore test box and this should render the APIs.

Hope this works for you