WireMock UI

Panel de administración web para WireMock / WireMock.Net: gestiona stubs y consulta el histórico de peticiones desde el navegador, sin usar la API REST a mano.

Aplicación estática (Vite + Alpine.js + Chart.js) sin backend propio: habla directamente con la Admin API de WireMock.

Características

• Resumen: peticiones totales, % de match y un gráfico de matches por mapping (match perfecto / parcial / sin match).
• Stubs: listado de mappings con método, ruta y status; crear, editar y borrar stubs; generar el curl equivalente; importar una carpeta completa de ficheros .json de mappings (sustituye todos los stubs actuales) o cargar un fichero suelto conservando matchers avanzados (regex, wildcard...).
• Peticiones: histórico de requests recibidas por WireMock, con comparativa detallada matcher a matcher (método, path, headers, query params, body...) contra el mapping candidato, y su score de coincidencia.
• Refresco automático del histórico de peticiones cada 4 segundos.
• Compatible con el formato de mappings de WireMock (Java) y de WireMock.Net.

Capturas de pantalla

Resumen	Stubs

Peticiones

Requisitos

• Node.js 18 o superior
• Un servidor WireMock o WireMock.Net accesible por HTTP
• Docker (opcional) si quieres levantar WireMock.Net con el docker-compose.yml incluido

Instalación

git clone https://github.com/piter1902/wiremock-ui.git
cd wiremock-ui
npm install

Uso

1. Levantar WireMock

El panel necesita un WireMock corriendo con CORS habilitado, ya que el navegador llama directamente a su Admin API. Este repo incluye un docker-compose.yml que levanta:

• wiremock: instancia de WireMock.Net en el puerto 9092 (acceso directo, sin CORS, útil para debug).
• wiremock-cors: proxy nginx en el puerto 9091 que añade las cabeceras CORS que este binario de WireMock.Net no añade por sí mismo. Es el puerto que debe usar el panel.

docker compose up -d

Los mappings estáticos se leen y observan (hot-reload) desde ./wiremock/mappings, y los ficheros de respuesta desde ./wiremock/__files (carpetas ignoradas en git, créalas si las necesitas).

Si ya tienes tu propio WireMock corriendo en otro sitio, solo necesitas que responda con cabeceras CORS a las peticiones desde el origen donde sirvas este panel; puedes reutilizar wiremock-cors/nginx.conf como referencia para tu proxy.

2. Arrancar el panel

En desarrollo, con recarga en caliente:

npm run dev

Abre http://localhost:5173.

O bien, compilar para producción y previsualizar el resultado:

npm run build
npm run preview

Importante: el panel debe servirse siempre desde un servidor HTTP (npm run dev / npm run preview, o cualquier servidor estático). Abrir index.html directamente como fichero local (file://) hace que el navegador bloquee las peticiones a WireMock por CORS.

3. Conectar con WireMock

Por defecto el panel apunta a http://localhost:9091 (el proxy CORS del docker-compose.yml). Si tu WireMock está en otra URL, cámbiala en el campo de conexión de la cabecera y pulsa ↻ para reconectar; el indicador CONNECTED / ERROR muestra el estado.

Comandos disponibles

Comando	Descripción
npm run dev	Arranca el servidor de desarrollo (Vite)
npm run build	Compila la app para producción en dist/
npm run preview	Sirve el build de producción para probarlo localmente

Licencia

MIT