Inscrire une application React personnalisée

Objectif

Installer une application React personnalisée dans un environnement en téléversant son paquet, afin que le Shell de la plateforme puisse l’y charger comme application.

Vous cherchez comment construire l’application plutôt que l’installer ? Cette page suppose que l’application existe déjà et qu’elle a été empaquetée. Son écriture — mise en place du projet, configuration Module Federation, composant de l’application, Runtime SDK, tests et empaquetage — est décrite dans Construire une application React personnalisée.

Prérequis

• Vous êtes connecté au Centre de contrôle d’administration en tant qu’administrateur de la plateforme.
• Un éditeur et une solution appartenant à cet éditeur existent déjà.
• L’environnement dans lequel vous installez l’application est actif.
• Vous disposez du paquet de l’application — le .zip produit par npm run pack dans le projet de l’application. Il est généralement écrit dans le dossier package/ de ce projet et porte le nom de l’application, par exemple par_sales_dashboard-2.0.1.zip.

Étapes

1. Choisissez l’environnement dans lequel installer l’application, à l’aide du sélecteur de la barre supérieure.
2. Ouvrez Solutions, puis la solution à laquelle appartient l’application.
3. Sélectionnez Applications personnalisées dans la navigation de gauche de la solution. La page liste les applications que cette solution a déjà installées dans l’environnement sélectionné.
4. Sélectionnez Nouveau. Un panneau s’ouvre sur le côté de l’écran.
5. Choisissez le fichier de paquet de l’application.
6. Sélectionnez Inscrire l’application personnalisée. L’application apparaît dans la liste de cette solution et de cet environnement, ainsi que sur la page d’accueil de l’environnement dans le Shell de la plateforme.

C’est tout le formulaire. Le paquet indique déjà le nom de l’application, la portée Module Federation avec laquelle elle a été construite, le module qu’elle expose et les étendues dont elle a besoin — il n’y a donc rien à saisir, et rien à mal saisir.

Ce qui se passe en coulisses

La plateforme vérifie l’archive avant de stocker quoi que ce soit : sa taille, le nombre de fichiers qu’elle contient, son taux de décompression, qu’aucun chemin ne sort du dossier et que chaque fichier est d’un type qu’elle accepte de servir. Elle lit ensuite le manifeste de l’application dans l’archive, le valide par rapport au schéma de manifeste des applications personnalisées et vérifie que le nom logique commence par le préfixe de l’éditeur propriétaire.

L’archive est stockée dans la base de données de la plateforme elle-même, et le code de l’application est servi depuis l’adresse de la plateforme. C’est ce qui rend la solution autonome : l’exporter emporte le code, si bien que l’importer en Test ou en Production installe une application fonctionnelle, sans hôte externe à maintenir en service.

Installer l’application dans un environnement ne l’installe dans aucun autre. Elle voyage lorsque sa solution est exportée puis importée là-bas.

Téléverser à nouveau remplace la version installée. C’est la boucle normale pendant que vous travaillez : construire, téléverser, regarder, reconstruire.

Mode hébergé, pour le développement uniquement

Pendant l’écriture d’une application, vous pouvez l’inscrire en mode Hébergé : le Shell charge alors remoteEntry.js depuis votre serveur de développement, ce qui vous permet de garder le rechargement à chaud sans réempaqueter à chaque modification. La plateforme refuse une inscription en mode Hébergé dans tout environnement qui n’est pas un environnement de développement, car une application dont le code vit ailleurs est une application que sa solution ne peut pas emporter.

Dépannage

• « Custom app … must start with the publisher prefix …_. » — le logicalName du package.json de l’application ne commence pas par le préfixe de l’éditeur propriétaire. Corrigez-le à cet endroit et reconstruisez le paquet ; le nom provient de la construction, pas de cet écran.
• « The package manifest is invalid: … » — le parsware.json de l’archive ne correspond pas à la forme attendue. Il est écrit par parsware-pack : cela signifie généralement que le paquet a été modifié à la main ou construit par une ancienne version de l’outil.
• « … holds a CustomControl, not a CustomApp. » — il s’agit du paquet d’un contrôle personnalisé. Installez-le plutôt depuis la page Contrôles personnalisés.
• « Custom app … is already installed in this environment by another solution. » — le nom est déjà pris par une autre solution. Renommez la vôtre, ou supprimez d’abord l’autre inscription.
• « Environment … is not a development environment » — vous inscrivez une application hébergée en dehors du développement. Téléversez plutôt le paquet.
• « Environment … is not active. » — attendez que l’environnement ait fini d’être provisionné, ou choisissez un autre environnement.

Scénarios associés

• Construire une application React personnalisée.
• Ouvrir une application React personnalisée.
• Inscrire un contrôle personnalisé.
• Créer une solution.