file - Cómo abrir archivos locales en Swagger-UI

swagger-2.0

Question

Estoy tratando de abrir mi archivo de especificación swagger my.json con swagger-ui en mi computadora local.

Así que downloaded la última etiqueta v2.1.8-M1 y extraje el zip. Luego entré en el subdirectorio dist y copié el archivo my.json en él. Ahora abrí el index.html y quiero explorar my.json . Y aquí comienza el problema:

Si ingreso una ruta local, siempre estará prefijada por la url actual que contiene el index.html . Y por eso no puedo abrir mi archivo. Probé todas las siguientes combinaciones sin éxito:

• my.json lleva al file:///D:/swagger-ui/dist/index.html/my.json
• file:///D:/swagger-ui/dist/my.json lleva al file:///D:/swagger-ui/dist/index.html/file:///D:/swagger-ui/dist/my.json

Answer 1

Así es como trabajé con el fanfarrón local JSON

1. Tener a Tomcat corriendo en la máquina local
2. Descargue la aplicación Swagger UI y descomprímala en la carpeta tomcat / webapps / swagger
3. Suelta el archivo swagger json local en la carpeta / webapps / swagger de tomcat
4. Iniciar tomcat (/ bin / sh startup.sh)
5. Abra un navegador y navegue a http://localhost:8080/swagger/
6. escriba su archivo swagger json en el cuadro de prueba de Swagger Explore y esto debería representar las API.

Espero que esto funcione para usted

Answer 2

Con Firefox, yo:

1. Downloaded y desempaquetado una versión de Swagger.IO a C: / Swagger /
2. Creó una carpeta llamada Definitions en C: / Swagger / dist
3. swagger.json mi archivo de definición swagger.json allí, y
4. Introdujo "Definitions / MyDef.swagger.json" en el cuadro Explorar

¡Ten cuidado con tus direcciones de barra!

Parece que puedes profundizar en la estructura de carpetas pero no subir, molesto.

Answer 3

Después de un poco de lucha, encontré una mejor solución.

1. crea un directorio con nombre: swagger

   mkdir C:/swagger

Si estás en Linux, prueba:

 mkdir /opt/swagger

2. obtener swagger-editor con el siguiente comando:

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

3. ir al directorio swagger-editor que se crea ahora

   cd swagger-editor

4. ahora consigue swagger-ui con el siguiente comando:

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

5. ahora, copie su archivo swagger, lo copié en la siguiente ruta:

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

6. toda la configuración está lista, ejecute swagger-edit con los comandos a continuación

   npm install
   npm run build
   npm start

7. Se le solicitarán 2 URL, una de ellas podría verse así:

   http://127.0.0.1:3001/

   Arriba está swagger-editor URL

8. Ahora navegue a:

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

   Arriba está swagger-ui URL

Eso es todo.

Ahora puede navegar por los archivos desde swagger-ui o swagger-editor

Llevará tiempo instalar / compilar, pero una vez hecho esto, verá excelentes resultados.

Me tomó aproximadamente 2 días de esfuerzo, la instalación única tomó solo unos 5 minutos.

Ahora, en la esquina superior derecha, puedes buscar tu archivo local.

la mejor de las suertes.

Answer 4

En lugar de abrir swagger ui como un archivo, lo pones en el archivo del navegador: /// D: /swagger-ui/dist/index.html puedes: crear mi directorio virtual que permite navegar y apunta a D: / swagger-ui

1. abra mmc, agregue iis servicios, expanda Sitio web predeterminado Agregue directorio virtual, ponga alias: swagger-ui, ruta física: (su ruta ...) D: / swagger-ui
2. en mmc en el panel central, haga doble clic en "exploración de directorios"
3. en mmc en el panel derecho, haga clic en "habilitar"
4. después de que en el navegador ponga la url para abrir su swagger-ui local http://localhost/swagger-ui/dist/
5. ahora puede usar ../my.json si copió el archivo en la carpeta dist o puede crear un formulario separado para las muestras, digamos D: / swagger-ui / samples y use ../samples/my.json o http://localhost/swagger-ui/samples/my.json

Answer 5

Lo que funciona, es ingresar una ruta relativa o un absoluto sin el file:// -protocol:

• ../my.json lleva al file:///D:/swagger-ui/dist/index.html/../my.json y funciona
• /D:/swagger-ui/dist/my.json lleva al file:///D:/swagger-ui/dist/my.json y funciona

INSINUACIÓN

Esta respuesta funciona con Firefox en Win7. Para Chrome-Browser, vea los comentarios a continuación:

Answer 6

Mi entorno,
Firefox 45.9, Windows 7
swagger-ui es decir 3.x

Hice la descompresión y la tienda de mascotas sale bien en una pestaña de Firefox. Luego abrí una nueva pestaña de Firefox y fui a Archivo> Abrir archivo y abrí mi archivo swagger.json. El archivo aparece limpio, es decir, como un archivo.

Luego copié la ''ubicación del archivo'' de Firefox (es decir, la ubicación de la URL, por ejemplo: file: /// D: /My%20Applications/Swagger/swagger-ui-master/dist/MySwagger.json).

Luego volví a la pestaña de interfaz de usuario de swagger y pegué el texto de ubicación del archivo en la ventana de exploración de interfaz de usuario arrogante y mi fanfarronería salió limpio.

Espero que esto ayude.

Answer 7

No pude obtener la respuesta de Adam Taras para trabajar (es decir, usando la ruta relativa ../my.json ).

Aquí estaba mi solución (bastante rápido y sencillo si tienes un nodo instalado):

• Con Node, instale globalmente el paquete http-server npm install -g http-server
• Cambie los directorios a donde se encuentra my.json , y ejecute el comando http-server --cors (CORS tiene que estar habilitado para que esto funcione)
• Abra swagger ui (es decir, dist / index.html)
• Escriba http://localhost:8080/my.json en el campo de entrada y haga clic en "Explorar"

Answer 8

Otra opción más es ejecutar swagger usando docker, puedes usar esta imagen de docker:

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

Hice esta pequeña secuencia de BASH del gueto para matar contenedores en ejecución y reconstruir, así que básicamente cada vez que realizas un cambio en tu especificación y quieres verla, simplemente ejecuta el script. Asegúrese de poner el nombre de su aplicación en la variable APP_NAME

#!/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 9

Tuve ese problema y aquí hay una solución mucho más simple:

• Cree un directorio (ej .: swagger-ui) en su directorio público (ruta estática: no se requiere ninguna ruta) y copie dist de swagger-ui en ese directorio y abra localhost / swagger-ui
• Verá swagger-ui con el ejemplo predeterminado de Petstore

• Reemplace la url predeterminada de petstore en dist / index.html con su host / api-docs local o para hacerlo más general, reemplace con esto:

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

• Hit again localhost / swagger-ui

Voila! Tu implementación de swagger local está lista

Answer 10

Usa el parámetro de especificación

Instrucciones a continuación.

Crear el archivo spec.js que contiene Swagger JSON

Cree un nuevo archivo javascript en el mismo directorio que index.html (/ dist /)

Luego inserte la declaración de variable de spec :

var spec =

Luego pegue el contenido del archivo swagger.json después. No tiene que estar en la misma línea que el signo = .

Ejemplo:

var spec =
{
"swagger": "2.0",
"info": {
"title": "I love Tex-Mex API",
"description": "You can barbecue it, boil it, broil it, bake it, saute 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"
},
...
}
}

Modificar swagger UI index.html

Este es un paso doble como Ciara.

Incluir spec.js

Modifique el archivo /dist/index.html para incluir el archivo spec.js externo.

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

Ejemplo:

 <!-- 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";
}

Agregar parámetro de especificación

Modifique la instancia de SwaggerUi para incluir el parámetro de spec :

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

Answer 11

LINUX

Siempre tuve problemas al intentar rutas y el parámetro de especificación.

Por lo tanto, opté por la solución en línea que actualizará automáticamente el JSON en Swagger sin tener que volver a importar.

Si usa npm para iniciar su editor de swagger, debe agregar un enlace simbólico de su archivo json.

cd /path/to/your/swaggerui where index.html is
ln -s /path/to/your/generated/swagger.json

Puede encontrar problemas de caché. La forma más rápida de resolver esto fue agregar un token al final de mi 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
}