Si ya tienes un frontend funcionando con datos estáticos, el siguiente paso es crear una API con Bun.js dentro del mismo proyecto y usar Cascade para migrar los mocks hacia esa API con referencias externas. Este flujo es ideal para desarrolladores que quieren probar la capacidad de Windsurf de leer documentación en línea y reescribir archivos reales.

Hasta ahora las referencias en Cascade habían sido locales: arrobar archivos, funciones o líneas de código. Aquí subimos la dificultad apuntando a una referencia externa, es decir, la documentación oficial de una tecnología que vive fuera del proyecto. Y para eso entra Bun.js.

Qué es Bun.js y por qué usarlo para el servidor

Bun.js es una plataforma moderna para ejecutar JavaScript y TypeScript que busca ser más rápida y sencilla que otras alternativas. Su idea central es reunir en una sola herramienta todo lo necesario para crear y manejar proyectos, reduciendo complejidad y ganando velocidad [00:49].

El único requisito es tenerlo instalado de forma global en tu máquina con el comando que aparece en pantalla. Funciona en Linux, Mac y Windows [01:28].

En el ejemplo, un servidor básico necesita apenas seis líneas de código. Las primeras crean el servidor y exponen un request que responde en el navegador con un "Hola, Platzi desde Bun.js" [01:40]. Se ejecuta con bun index.js, corre en el puerto 3000 y la respuesta aparece al refrescar [02:08].

¿Qué es Bun.js? Es una plataforma para ejecutar JavaScript y TypeScript enfocada en velocidad y simplicidad. Reúne en una sola herramienta lo necesario para crear proyectos, por eso puedes levantar un servidor HTTP en seis líneas.

Cómo pedirle a Cascade un servidor con referencia externa

La clave está en el prompt. Al escribir arroba en Cascade se despliega un menú de contexto donde eliges el tipo de referencia. Aquí se selecciona la opción web para indicar que es externa y se enlaza directamente la documentación del servidor HTTP de Bun [02:52].

En el prompt se especifica con precisión qué se necesita:

• Crear un server de Bun.js apoyándose en su documentación oficial.
• Exponer solo el endpoint de posts para listarlos, usando el método GET.
• No incluir métodos externos ni funcionalidad adicional.
• Enlazar el archivo donde viven los posts, extraído del mock.
• No crear un proyecto aparte con su propio package.json o README, porque todo debe ejecutarse desde el mismo package del frontend [03:28].

Ese detalle de mantener todo en un solo proyecto es lo que evita duplicar configuraciones y permite correr frontend y servidor juntos.

¿Cómo le indico a Cascade que use una fuente externa? Escribe arroba, elige la opción web en el menú de contexto y pega el enlace a la documentación. Así Cascade sabe que debe leer esa fuente antes de generar código.

Cascade primero entiende el prompt, visita la página de documentación entregada, analiza el contenido y define la mejor estrategia. Luego genera una to-do list con cuatro tareas: crear el servidor de Bun, extraer datos del mock actual, configurar el endpoint GET de posts y agregar un script al package para ejecutar el servidor [04:21].

Qué archivos genera Cascade

Al terminar, crea dos archivos nuevos: un server.ts con 350 líneas y modificaciones en el package.json [05:03]. Dentro del servidor agrega:

• Una función para generar un resumen automático del contenido.
• Una función para convertir los datos a formato blog post con slug y summary.
• El servidor con Bun.server corriendo en el puerto 3001, ya que el 3000 lo ocupa el frontend [05:39].
• Un endpoint extra de health check para revisar la salud del servidor [05:52].

Con dos servidores corriendo al mismo tiempo, el frontend en 3000 y la API en 3001, pruebas el endpoint con npm run server y la respuesta aparece en el navegador [06:17].

Cómo migrar los mocks hacia la API con Cascade

Con el servidor andando, el siguiente prompt pide migrar los posts del blog de mocks a la respuesta de la API, editando los archivos donde se usan para que lean desde la API y no desde el mock [06:57].

Cascade crea un api.ts que centraliza los types, la base de la API y funciones para llamar a todos los posts, a uno por slug y a los featured [07:36]. Después recorre página por página: homepage, página de blog y cada blog post, reemplazando el mock por llamadas a esas funciones.

En la página de blog, por ejemplo, elimina 53 líneas de mocks y agrega nueve nuevas, incluyendo el await por la respuesta de la API [08:06]. En el single blog post elimina 302 líneas y agrega 21 [09:46].

Y aquí viene algo interesante: durante la edición un archivo se corrompió. Cascade avisó y pidió permiso para eliminarlo y reescribirlo completo, mejorando el código y evitando duplicados [08:52]. Confiar en esa identificación resolvió el problema.

¿Por qué Cascade se detiene y pregunta si continúa? Lo hace cuando el avance es muy largo o tiene varias tareas pendientes. Pausa para que apruebes o rechaces antes de seguir con comandos o nuevas ediciones.

Al cerrar, Cascade genera un archivo Markdown llamado API Migration que documenta los archivos modificados y las nuevas funcionalidades [10:17]. También ejecuta una validación de TypeScript; los errores detectados estaban solo en los tests, que no afectan el ejercicio [10:50].

Cómo ejecutar frontend y servidor con un solo comando

Tener dos terminales abiertas, una para el front y otra para el server, se vuelve incómodo. La solución está en el package.json.

Cascade ya había agregado un comando server que corre el archivo server.ts con Bun [11:35]. Junto al comando por defecto de Next.js, se crea uno nuevo llamado dev:full que ejecuta ambos en secuencia: primero el servidor y luego npm run dev del frontend [11:58].

Al correr npm run dev:full, Bun levanta en el puerto 3001 y Next.js en el 3000 [12:24]. Para confirmar que el contenido viene de la API y no de un mock, basta editar el título del primer post en server.ts, ponerle "Platzi", reiniciar el servidor y refrescar: el cambio aparece, probando que todo se modifica desde un solo sitio [13:10].

Bun se eligió por su simplicidad y velocidad, pero el mismo flujo funciona con la API de Next, Deno, Node, Python o Java. Lo importante es apoyarte en Cascade para la migración.

¿Ya conocías Bun.js? Cuéntanos en los comentarios cómo te fue con esta migración.