Registrar una aplicación React personalizada

Objetivo

Instalar una aplicación React personalizada en un entorno cargando su paquete, para que el Shell de la plataforma pueda cargarla allí como aplicación.

¿Busca cómo construir la aplicación en lugar de instalarla? Esta página da por hecho que la aplicación ya existe y está empaquetada. Escribirla (configuración del proyecto, configuración de Module Federation, componente de la aplicación, Runtime SDK, pruebas y empaquetado) se explica en Crear una aplicación React personalizada.

Requisitos previos

• Ha iniciado sesión en el Centro de control de administración como administrador de la plataforma.
• Ya existen un editor y una solución propiedad de ese editor.
• El entorno en el que instala la aplicación está activo.
• Tiene el paquete de la aplicación: el .zip que genera npm run pack en el propio proyecto de la aplicación. Normalmente se escribe en la carpeta package/ de ese proyecto y lleva el nombre de la aplicación, por ejemplo par_sales_dashboard-2.0.1.zip.

Pasos

1. Elija el entorno en el que se debe instalar la aplicación, con el selector de la barra superior.
2. Abra Soluciones y después la solución a la que pertenece la aplicación.
3. Seleccione Aplicaciones personalizadas en la navegación de la izquierda de la solución. La página enumera las aplicaciones que esta solución ya ha instalado en el entorno seleccionado.
4. Seleccione Nuevo. Se abre un panel a un lado de la pantalla.
5. Elija el archivo del paquete de la aplicación.
6. Seleccione Registrar aplicación personalizada. La aplicación aparece en la lista de esa solución y ese entorno, y en la página de inicio del entorno en el Shell de la plataforma.

Ese es todo el formulario. El paquete ya indica cómo se llama la aplicación, con qué ámbito de Module Federation se construyó, qué módulo expone y qué ámbitos necesita, así que no hay nada que escribir ni nada que escribir mal.

Qué ocurre entre bastidores

La plataforma comprueba el archivo antes de guardar nada: su tamaño, cuántos archivos contiene, cuánto ocupa una vez descomprimido, que ninguna ruta salga de la carpeta y que todos los archivos sean de un tipo que la plataforma sirve. Después lee el manifiesto de la aplicación dentro del archivo, lo valida contra el esquema del manifiesto de aplicación personalizada y comprueba el nombre lógico contra el prefijo del editor propietario.

El archivo se guarda en la propia base de datos de la plataforma, y el código de la aplicación se sirve desde la propia dirección de la plataforma. Eso es lo que hace que la solución sea autónoma: al exportarla se lleva el código, así que al importarla en Prueba o en Producción se instala una aplicación que funciona, sin ningún host externo que mantener en marcha.

Instalar la aplicación en un entorno no la instala en ningún otro. Viaja cuando su solución se exporta e importa allí.

Volver a cargarla sustituye la compilación instalada. Es el ciclo normal mientras trabaja: compilar, cargar, mirar, volver a compilar.

Modo alojado, solo para desarrollo

Mientras escribe una aplicación puede registrarla como Alojada: el Shell carga remoteEntry.js desde su servidor de desarrollo, así que conserva la recarga en caliente y no tiene que volver a empaquetar con cada cambio. La plataforma rechaza un registro Alojado en cualquier entorno que no sea de desarrollo, porque una aplicación cuyo código vive en otro sitio es una aplicación que su solución no puede llevar.

Solución de problemas

• «La aplicación personalizada … debe empezar por el prefijo del editor …_». El logicalName del package.json de la aplicación no empieza por el prefijo del editor propietario. Corríjalo ahí y vuelva a generar el paquete; el nombre sale de la compilación, no de esta pantalla.
• «El manifiesto del paquete no es válido: …». El parsware.json del archivo no tiene la forma esperada. Lo escribe parsware-pack, así que normalmente significa que el paquete se editó a mano o se generó con una versión antigua de la herramienta.
• «… contiene un CustomControl, no una CustomApp». Es el paquete de un control personalizado. Instálelo desde la página Controles personalizados.
• «La aplicación personalizada … ya está instalada en este entorno por otra solución». El nombre lo usa otra solución. Cambie el nombre de la suya o quite primero el otro registro.
• «El entorno … no es un entorno de desarrollo». Está registrando una aplicación Alojada fuera de desarrollo. Cargue el paquete en su lugar.
• «El entorno … no está activo». Espere a que el entorno termine de aprovisionarse o elija otro entorno.

Escenarios relacionados

• Crear una aplicación React personalizada.
• Abrir una aplicación React personalizada.
• Registrar un control personalizado.
• Crear una solución.