Migración de mocks a API con BUN.js y Cascade en Windsurf

Lleva tu front-end a producción con una arquitectura clara: migrar de mocks a una API real en el mismo proyecto. Aquí verás cómo crear un HTTP server con Bun.js/Bun, automatizar la migración con Cascade en Windsurf y ejecutar todo con un solo comando en package.json.

¿Cómo crear un servidor HTTP con Bun.js y Bun?

Crear un servidor es rápido y minimalista. Con apenas unas líneas, se sirve un texto y luego se evoluciona a un endpoint de posts listo para tu front-end.

• Instala Boom de forma global y verifica que el binario esté disponible.
• Arranca con un archivo simple que responde “Hola Platzi desde Bun.js”.
• Ejecuta con el comando de boom o un script de npm.
• Comprueba en el navegador que el servidor responde correctamente.

¿Qué contiene el server.ts?

• Carga del mock original como fuente de datos interna.
• Función para generar resumen automático del contenido.
• Conversión a formato de blog post con slug y summary.
• Servidor con boom.serve en el puerto 3001 para no colisionar con Next.js en 3000.
• Endpoint de posts y endpoint de health check.
• Mensajes en consola que confirman servicio y rutas disponibles.

Punto clave: dos servidores corriendo a la vez. Front-end en 3000 y API en 3001. La respuesta de posts queda disponible inmediatamente para integrarla.

¿Cómo migrar los posts del mock a la API con Cascade?

Con Cascade en Windsurf, la migración es asistida y documentada. Se usa la referencia externa de la documentación de BoomJS con la función de contexto @ para guiar el proceso.

• Tareas automáticas: crear servidor, extraer datos del mock, configurar endpoint GET de posts y agregar scripts en package.json.
• Generación de server.ts con la lógica de datos y el servidor en 3001.
• Actualización de package.json con scripts para ejecutar el servidor en modo normal y dev.
• Creación de api.ts: base de la API, funciones para obtener todos los posts, uno por slug y un post destacado.
• Refactor de páginas: home, listado del blog y detalle para leer desde la API y eliminar mocks.
• Centralización de types de TypeScript y eliminación de duplicados.
• Manejo de archivos corruptos: reescritura controlada cuando es necesario.
• Documento “API Migration” con cambios, archivos tocados y cómo probar.
• Verificación de TypeScript: se identifican errores en tests sin afectar la app.

Habilidades y conceptos aplicados de forma práctica: - Uso de referencia externa con @ en Cascade para traer documentación relevante. - Diseño de endpoint GET para listar posts reales. - Normalización de datos con slug y summary. - Health check para monitoreo básico del servicio. - Orquestación entre Next.js y Bun/Bun.js en puertos distintos. - Scripts en package.json para flujos de desarrollo reproducibles.

¿Cómo ejecutar frontend y API con un solo comando en package.json?

Evita abrir dos terminales. Con un script compuesto, levantas API y front a la vez.

• Script “server”: corre server.ts con Bun desde package.json.
• Script de Next.js: dev para el front-end.
• Nuevo script, por ejemplo dev:full: primero el servidor de Bun, luego npm run dev de Next.js.
• Ejecuta npm run dev:full y verifica: API en 3001 y front en 3000.
• Valida la fuente única de datos: cambia un título en server.ts, reinicia dev:full y comprueba el cambio en el navegador.

Beneficios inmediatos: - Una sola fuente de verdad sin mocks dispersos. - DX mejorada: arranque y pruebas con un comando. - Rendimiento y simplicidad gracias a Bun.

¿Quieres seguir optimizando este flujo o tuviste retos al migrar tus mocks a una API con Cascade y Bun? Comparte en comentarios cómo te fue y qué mejorarías en los scripts o en la estructura de tus endpoints.