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

What works, is to enter a relative path or an absolute without the file://-protocol:

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

HINT

This answer works with Firefox on Win7. For Chrome-Browser, see comments below:

Answer 2

Instead of opening swagger ui as a file - you put into browser file:///D:/swagger-ui/dist/index.html you can: create iis virtual directory which enables browsing and points to D:/swagger-ui

1. open mmc, add iis services, expand Default Web Site add virtual directory, put alias: swagger-ui, physical path:(your path...) D:/swagger-ui
2. in mmc in the middle pane double click on "directory browsing"
3. in mmc in the right pane click "enable"
4. after that in browser put url to open your local swagger-ui http://localhost/swagger-ui/dist/
5. now you can use ../my.json if you copied file into dist folder or you can created separate forlder for samples, say D:/swagger-ui/samples and use ../samples/my.json or http://localhost/swagger-ui/samples/my.json

Answer 3

Yet another option is to run swagger using docker, you can use this docker image:

https://hub.docker.com/r/madscientist/swagger-ui/

I made this ghetto little BASH script to kill running containers and rebuild, so basically each time you make a change to your spec and want to see it, just run the script. Make sure to put the name of your application in the APP_NAME variable

#!/bin/bash

# Replace my_app with your application name
APP_NAME="my_app"

# Clean up old containers and images
old_containers=$(docker ps -a | grep $APP_NAME | awk '{ print $1 }')
old_images=$(docker images | grep $APP_NAME | awk '{ print $3 }')

if [[ $old_containers ]];
    then
        echo "Stopping old containers: $old_containers"
        docker stop $old_containers
        echo "Removing old containers: $old_containers"
        docker rm $old_containers
fi

if [[ $old_images ]];
    then
        echo "Removing stale images"
        docker rmi $old_images
fi

# Create new image
echo "Creating new image for $APP_NAME"
docker build . -t $APP_NAME

# Run container
echo "Running container with image $APP_NAME"
docker run -d --name $APP_NAME -p 8888:8888 $APP_NAME
echo "Check out your swaggery goodness here:

http://localhost:8888/swagger-ui/?url=http://localhost:8888/swagger-ui/swagger.yaml"

Answer 4

My environment,
Firefox 45.9 , Windows 7
swagger-ui ie 3.x

I did the unzip and the petstore comes up fine in a Firefox tab. I then opened a new Firefox tab and went to File > Open File and opened my swagger.json file. The file comes up clean, ie as a file.

I then copied the 'file location' from Firefox ( ie the URL location eg: file:///D:/My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json ).

I then went back to the swagger UI tab and pasted the file location text into the swagger UI explore window and my swagger came up clean.

Hope this helps.

Answer 5

I had that issue and here is much simpler solution:

• Make a dir (eg: swagger-ui) in your public dir (static path: no route is required) and copy dist from swagger-ui into that directory and open localhost/swagger-ui
• You will see swagger-ui with default petstore example

• Replace default petstore url in dist/index.html with your localhost/api-docs or to make it more generalized, replace with this:

  location.protocol+'//' + location.hostname+(location.port ? ':' + location.port: '') + "/api-docs";

• Hit again localhost/swagger-ui

Voila! You local swagger implementation is ready

Answer 6

LINUX

I always had issues while trying paths and the spec parameter.

Therefore I went for the online solution that will update automatically the JSON on Swagger without having to reimport.

If you use npm to start your swagger editor you should add a symbolic link of your json file.

cd /path/to/your/swaggerui where index.html is.

ln -s /path/to/your/generated/swagger.json

You may encounter cache problems. The quick way to solve this was to add a token at the end of my url...

window.onload = function() {

var noCache = Math.floor((Math.random() * 1000000) + 1);

// Build a system
const editor = SwaggerEditorBundle({
url: "http://localhost:3001/swagger.json?"+noCache,
  dom_id: '#swagger-editor',
  layout: 'StandaloneLayout',
  presets: [
    SwaggerEditorStandalonePreset
  ]
})

window.editor = editor
}