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

15 April 2025

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

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:

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.

¿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?

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

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

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

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

Explore more

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

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.

15 April 2025

Cómo usar n8n con servidores MCP

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.

14 April 2025

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

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).

11 April 2025

Practica el diseño de API en Apidog

Descubre una forma más fácil de construir y usar APIs