3.6 Desarrollo local y hot reload con npm run dev

Tenemos el listado y el formulario. Antes de desplegar la app al entorno, vamos a ver cómo funciona el servidor de desarrollo local y qué ocurre exactamente cuando ejecutas npm run dev. También cubrimos algunas técnicas de depuración que te van a ahorrar tiempo.

Objetivos de aprendizaje

• Entender cómo funciona el servidor de desarrollo local de las Code Apps
• Saber cómo se gestiona la autenticación en desarrollo local
• Conocer las herramientas de depuración disponibles
• Resolver los problemas más comunes del entorno local

Arrancando el servidor de desarrollo

Cuando ejecutas npm run dev (que internamente llama a npx power-apps run), ocurren varias cosas:

1. Vite arranca un servidor de desarrollo local, normalmente en http://localhost:3000
2. El CLI de Power Apps configura un proxy que intercepta las peticiones a la API de Dataverse
3. El proxy añade automáticamente los headers de autenticación con el token de tu sesión activa en PAC CLI
4. Tu aplicación React se sirve localmente con hot module replacement (HMR) activo

[Placeholder para imagen: Diagrama del flujo: Browser → localhost:3000 → CLI proxy → Dataverse API]

La autenticación en desarrollo local

Este es un punto que a veces genera confusión. Cuando desarrollas localmente, no abres el navegador y ves un formulario de login. En cambio, el CLI usa el token de la sesión activa de PAC CLI (la que configuraste con pac auth create) para autenticar las peticiones a Dataverse.

Si el token ha expirado, verás errores 401 en la consola. La solución es simple:

# Renovar la sesión de PAC CLI
pac auth refresh

El hot module replacement en acción

Una de las grandes ventajas del stack Vite+React es el Hot Module Replacement. Cuando guardas un archivo TypeScript o TSX, Vite detecta el cambio, recompila solo el módulo modificado y actualiza el navegador sin recargar la página completa. El estado de tu aplicación se mantiene. Esto hace que el ciclo de desarrollo sea muy rápido.

Depuración en VS Code

Puedes depurar tu Code App directamente en VS Code usando el debugger del navegador. Para configurarlo, añade un archivo .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Code App (Chrome)",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

Con esta configuración, puedes poner breakpoints directamente en los archivos TypeScript de VS Code y el debugger se conectará al Chrome que abre el servidor de desarrollo.

Problemas comunes y sus soluciones

Error: "Cannot connect to environment"

Verifica que PAC CLI está autenticado correctamente con pac org who. Si no muestra un entorno, vuelve a autenticarte con pac auth create.

Error 401 en peticiones a Dataverse

El token de PAC CLI ha expirado. Ejecuta pac auth refresh o vuelve a crear el perfil de autenticación.

Los cambios en código no se reflejan

Si el HMR deja de funcionar, para el servidor (Ctrl+C) y vuélvelo a arrancar con npm run dev. Esto suele solucionar problemas de caché del compilador.

Error de CORS en peticiones locales

El proxy del CLI debería manejar esto automáticamente. Si ves errores de CORS, verifica que estás accediendo a http://localhost:3000 y no a http://127.0.0.1:3000 (algunos navegadores los tratan diferente).

Puntos clave

• npm run dev arranca Vite con un proxy que gestiona la autenticación automáticamente
• La autenticación local usa el token de la sesión activa de PAC CLI
• El HMR de Vite permite ver cambios casi instantáneamente sin recargar la página
• Puedes usar el debugger de VS Code conectándote al servidor local de desarrollo
• Los errores 401 se resuelven renovando la sesión de PAC CLI con pac auth refresh