Apidog

Plataforma de desarrollo de API colaborativa todo en uno

Diseño de API

Documentación de API

Depuración de API

Simulación de API

Prueba automatizada de API

Tutorial de Swagger UI en Localhost: ¿Cómo usar Swagger UI localmente?

Swagger UI ofrece versiones online y offline, pero quizás necesites usarla localmente. Aquí te mostramos cómo.

Daniel Costa

Daniel Costa

Updated on April 15, 2025

Swagger UI es una herramienta que te permite ver la documentación de la API generada en la especificación Swagger (Especificación OpenAPI). Swagger UI también proporciona versiones offline y online, pero por varias razones, es posible que necesites abrir el archivo de especificación Swagger generado con Swagger UI localmente. En este artículo, te mostraremos cómo ejecutar Swagger UI localmente, y qué hacer si encuentras algún problema en este proceso.

💡
También recomendamos Apidog, una herramienta cliente de API más fácil de usar que Swagger UI, para gestionar tus APIs de forma más eficiente. Esta herramienta también puede generar especificaciones de API más limpias que Swagger UI y también tiene capacidades de prueba y simulación muy potentes.
button

¿Qué es Swagger UI?

Swagger UI es una herramienta que te permite mostrar y verificar de forma interactiva las definiciones de API escritas en la Especificación OpenAPI (anteriormente Especificación Swagger). Al configurar un Swagger UI en un entorno local e importar la definición de la API, los desarrolladores pueden desarrollar mientras verifican las especificaciones de la API en tiempo real.

¿Por qué usar Swagger UI localmente?

Si bien Swagger UI ofrece una versión SaaS, muchos usuarios prefieren instalarla en sus máquinas locales y configurar un servidor web local. En consecuencia, muchos usuarios acceden a Swagger UI en su localhost. Entonces, ¿cuáles son las ventajas de usar Swagger UI localmente? Exploremos estos beneficios en detalle.

Las principales razones para utilizar Swagger UI en un entorno local incluyen:

  • Desarrollo de API en tiempo real: al desarrollar una API localmente, es esencial tener la capacidad de verificar la definición de la API en tiempo real.
  • Referencia de documentación sin conexión: el uso local te permite consultar la documentación de la API sin conexión, eliminando la necesidad de una conexión de red.
  • Privacidad mejorada: el uso local garantiza que tu API en desarrollo permanezca privada, sin necesidad de publicación externa, manteniéndola alejada del acceso de terceros.
  • Pruebas de servidor Mock: puedes configurar y probar un servidor Mock local para verificar la funcionalidad de tu API.
  • Definición iterativa de API: el uso local te permite realizar cambios iterativos en la definición de la API y verificar su impacto cada vez.
  • Validación de la canalización CI/CD: la validación local se convierte en parte de tu canalización CI/CD, lo que garantiza la fiabilidad y la calidad de tu API durante el desarrollo.

Ventajas de usar Swagger UI localmente

Las ventajas de usar Swagger UI en un entorno local se enumeran a continuación, pero es mejor decidir si usar un servicio basado en la nube o usarlo localmente según la situación específica.

  • Se puede usar sin conexión, ya que no depende del entorno de Internet
  • Desarrollo fácil porque puedes verificar las definiciones de API locales en tiempo real
  • No es necesario exponer la API en desarrollo al mundo exterior.
  • Puedes configurar un servidor mock localmente, para que puedas verificar el funcionamiento.
  • La respuesta es rápida porque no depende de las especificaciones de la máquina de desarrollo.
  • Aumenta la productividad desarrollando a tu propio ritmo
  • Más seguro que usar un servidor compartido
  • Fácil de sincronizar la definición e implementación de la API

¿Cómo usar Swagger UI localmente?

Entonces, ¿qué debo hacer si quiero usar Swagger UI localmente? A continuación, explicaré en detalle cómo usar Swagger UI localmente.

Instala Swagger UI y configura el entorno de desarrollo

Primero, debes descargar Swagger UI e instalarlo en tu máquina local. Se prefiere la última versión. El repositorio de Swagger UI se gestiona en GitHub, así que instálalo usando el siguiente comando.

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

Luego, configura tu entorno de desarrollo usando comandos como:

cd swagger-ui
npm run dev

Swagger UI se iniciará accediendo a http://localhost:3200/ en tu navegador.

Configura un servidor web local

A continuación, para iniciar Swagger UI, debes preparar un servidor web usando la siguiente línea de comandos. Aquí usaremos el módulo http-server de Node.js.

npm install -g http-server 

Inicia HTTP-server e inicia Swagger UI

Navega al directorio donde se encuentra el archivo de especificación Swagger, inicia http-server en ese directorio y habilita CORS usando un comando como el siguiente:

cd {your-oas-document-dir}
http-server --cors

Luego, http://localhost``:8080cuando accedas a él en tu navegador, se iniciará Swagger UI.

Prepara el archivo de especificación Swagger

A continuación, prepara el archivo de especificación Swagger. Generalmente, los archivos de especificación Swagger se escriben en formato Json o Yaml. Por ejemplo, swagger.yaml supón que lo escribes en un archivo llamado. La URL del archivo de especificaciones de Swagger es http://localhost:8080/swagger.yaml.

Además, si deseas obtener más información sobre los archivos de especificaciones de Swagger o cambiar la ruta predeterminada de la URL de Swagger UI, consulta los siguientes artículos:

Ingresa la URL del archivo de especificación Swagger y ábrelo en Swagger UI

Luego, en la pantalla de Swagger UI, ingresa la URL de swagger.yaml en la URL de SPEC anterior en el cuadro de entrada en la parte superior y haz clic en el botón Explorar para mostrar el documento de definición de API local.

Swagger

Apidog: gestiona tus APIs de forma más eficiente

Cuando usas Swagger UI, necesitas construir un servidor y establecer una URL, lo que puede ser bastante complicado. Si estás buscando una solución más fácil, te recomendamos usar Apidog, una herramienta de gestión de API fácil de usar.

button

Apidog puede leer archivos Swagger Json y Yaml directamente y probar rápidamente tu API. También puedes usar su función de compartir para generar y compartir una hermosa documentación de API.

Share docs

Importa fácilmente JSON y YAML en Apidog

Apidog admite la importación de datos con YAML y JSON, por lo que puedes analizar completamente estos archivos e importar completamente los datos de tu API en Apidog para realizar pruebas.

Abre la configuración de tu proyecto en Apidog, haz clic en Importar datos, selecciona OpenAPI/Swagger y arrastra el archivo YAML a Apidog.

Import Data

Prueba tu API con Apidog

Una vez que hayas importado los datos de tu API en Apidog, puedes ver la API importada haciendo clic en la pestaña APIs a la izquierda. Si deseas probar un punto final de API específico, puedes hacer clic en él, completar los parámetros en una interfaz de usuario intuitiva, "enviar" la solicitud y obtener la respuesta.

Send API

Generar y compartir la documentación de la API también es muy fácil con Apidog. La siguiente es una documentación de API de muestra generada por Apidog:

Preguntas frecuentes sobre Swagger UI Localhost

¿Cómo acceder a Swagger UI en localhost?

  • Ejecuta tu proyecto de API localmente, luego navega a http://localhost``:<port>/swagger en tu navegador. El puerto suele ser 5000 o 5001.

¿Cuál es la URL para el host local de Swagger?

  • La URL predeterminada es http://localhost:/swagger donde el puerto en el que se ejecuta tu API localmente.

¿Cómo alojas la documentación de Swagger localmente?

  • Habilita Swagger en tu código de inicio, inicia el proyecto de API y navega al punto final /swagger para ver la interfaz de usuario.

¿Cuál es la URL de Swagger para localhost .NET core?

  • Para las API de .NET Core, la URL de Swagger suele ser http://localhost:/swagger/v1/swagger.json

Resumen

Swagger UI es una herramienta útil al desarrollar API, pero tiene limitaciones para una gestión más avanzada del ciclo de vida de la API. Apidog proporciona una funcionalidad integral para el desarrollo de API, como la definición de API, la generación automática de documentos, las pruebas, la supervisión y el uso compartido.

Apidog te permite importar archivos de especificación Swagger y OpenAPI y probar tu API de forma interactiva. Las funciones para compartir te permiten crear hermosos documentos y compartirlos con tu equipo. Si deseas optimizar tu proceso de desarrollo de API, Apidog es la solución para ti. Al usarlo junto con Swagger UI, podrás lograr una gestión del ciclo de vida de la API más potente.

button
Cómo usar Lovable AI (Alternativa a Cursor para desarrolladores web)Tutoriales

Cómo usar Lovable AI (Alternativa a Cursor para desarrolladores web)

Aprende a crear cualquier web con Lovable en esta guía completa. Descubre procesos paso a paso, funciones innovadoras e integra herramientas gratuitas como Apidog para gestión API.

Daniel Costa

April 15, 2025

Cómo usar n8n con servidores MCPTutoriales

Cómo usar n8n con servidores MCP

Automatiza flujos con n8n y servidores MCP para IA. Guía técnica: configuración, APIs, nodo "MCP Server Trigger" y Apidog para pruebas.

Daniel Costa

April 14, 2025

Cómo añadir claves API personalizadas a Cursor: Una guía completaTutoriales

Cómo añadir claves API personalizadas a Cursor: Una guía completa

Este tutorial te guiará para configurar y gestionar claves API personalizadas en Cursor (OpenAI, Anthropic, Google y Azure).

Daniel Costa

April 11, 2025