Compartir a través de

DevServer con Microsoft Fabric

DevServer es el servidor web local que se ejecuta al desarrollar una carga de trabajo de Fabric. Sirve tu front-end (SPA) en localhost y proporciona un pequeño conjunto de puntos de conexión HTTP que Fabric llama durante el desarrollo para recuperar los manifiestos de Producto e Ítem. Cuando se combina con DevGateway, Fabric puede cargar la interfaz de usuario de la carga de trabajo en un iFrame y leer los datos del manifiesto sin publicar nada en su inquilino.

Qué hace devServer

  • Aloja la interfaz de usuario de tu carga de trabajo a través de HTTP en localhost (por ejemplo, http://localhost:60006) para que Fabric pueda cargarla en un iFrame.
  • Proporciona recursos estáticos a los que hacen referencia los manifiestos (iconos, cadenas localizadas, imágenes).
  • Expone los puntos de conexión JSON locales que Fabric usa para leer los manifiestos durante el desarrollo.
  • Permite ciclos rápidos de edición y actualización con recarga en caliente en la mayoría de las configuraciones.

Importante

DevServer funciona junto con DevGateway. DevGateway registra la instancia de carga de trabajo local con Fabric para que el servicio sepa cómo comunicarse con los puntos de conexión de DevServer mientras usted desarrolla.

Donde Fabric llama a DevServer

Al habilitar el modo de desarrollo e iniciar DevGateway y DevServer:

  • Fabric navega al front-end a través del punto de conexión de front-end definido por el manifiesto de carga de trabajo (consulte Manifiesto de carga de trabajo). En el desarrollo, esto suele apuntar a una dirección URL de localhost expuesta por devServer.
  • Fabric consulta el DevServer para los metadatos destinados al producto para que pueda mostrar la navegación, los iconos y otra experiencia de usuario para su carga de trabajo. Esto le permite iterar tanto en Product.json como en los manifiestos de elementos, sin tener que volver a generar ni cargar un paquete.

Puntos de conexión locales que proporciona DevServer

Las rutas exactas pueden variar según la plantilla, pero el repositorio de ejemplo expone un pequeño conjunto de puntos de conexión predecibles:

  • GET / : devuelve la aplicación web (UI Fabric se carga en un iFrame).
  • GET /manifests: devuelve un payload JSON que recopila el manifiesto del producto y los manifiestos de elementos usados por la interfaz de usuario. Esto refleja la estructura que Fabric espera en tiempo de publicación (consulte Manifiesto del producto y Manifiesto de elemento).
  • GET /assets/... : proporciona iconos, imágenes y cadenas localizadas a las que hacen referencia los manifiestos.

Nota:

  • CORS y encabezados están preconfigurados en el DevServer de ejemplo para que la aplicación se pueda incrustar y comunicar con el host.
  • Los nombres de las rutas anteriores siguen el ejemplo actual; consulte el README de la plantilla si el proyecto utiliza una ruta diferente para el extremo de manifiestos.

Flujo de desarrollo típico

  1. Inicie DevServer desde el repositorio de ejemplo para hospedar el front-end en localhost.
  2. Inicie DevGateway para registrar la carga de trabajo local con Fabric.
  3. Abra el área de trabajo de Fabric e inicie el punto de entrada de la carga de trabajo; Fabric carga la aplicación en un iFrame y llama a los puntos de conexión de DevServer para leer los datos del manifiesto.
  4. Editar archivos de interfaz de usuario o manifiesto y actualizar; los cambios surten efecto inmediatamente sin volver a empaquetar.

Para obtener información sobre cómo iniciar cada proceso, consulte el tutorial Introducción y la guía de instalación.

Relación con manifiestos publicados

En producción, los manifiestos de la carga de trabajo se empaquetan y cargan como parte del paquete NuGet de la carga de trabajo (consulte Descripción general del manifiesto). Durante el desarrollo, los endpoints locales del DevServer actúan como un sustituto ligero para esos archivos empaquetados, permitiéndote iterar rápidamente.

  • El esquema y las reglas son los mismos que para los manifiestos publicados.
  • El DevServer solo afecta al desarrollo local; no cambia el modo en que se publica.

Sugerencias de solución de problemas

  • Si el iFrame muestra una página en blanco, confirme que DevServer se está ejecutando y el punto de conexión de front-end del manifiesto apunta a la dirección URL de localhost correcta.
  • Si faltan iconos o cadenas, compruebe las assets rutas de acceso y que el DevServer está sirviendo esos archivos en /assets.
  • Si Fabric no encuentra los manifiestos, compruebe que la ruta existe en la /manifests plantilla y devuelva JSON válido.

Consulte también

  • Last updated on