Een aangepaste React-app registreren

Doel

Een aangepaste React-app in een omgeving installeren door zijn pakket te uploaden, zodat de Platformshell hem daar als app kan laden.

Zoek je hoe je de app bouwt in plaats van hoe je hem installeert? Deze pagina gaat ervan uit dat de app al bestaat en is verpakt. Het schrijven ervan — projectopzet, de Module Federation-configuratie, het app-component, de Runtime SDK, testen en verpakken — staat in Een aangepaste React-app bouwen.

Vereisten

• Je bent als platformbeheerder aangemeld bij het Beheercentrum.
• Er bestaan al een uitgever en een oplossing die eigendom is van die uitgever.
• De omgeving waarin je de app installeert, is actief.
• Je hebt het pakket van de app — de .zip die npm run pack in het eigen project van de app maakt. Dat wordt meestal in de map package/ van dat project geschreven en naar de app genoemd, bijvoorbeeld par_sales_dashboard-2.0.1.zip.

Stappen

1. Kies de omgeving waarin de app moet worden geïnstalleerd, met de kiezer in de bovenbalk.
2. Open Oplossingen en open daarna de oplossing waar de app bij hoort.
3. Selecteer Aangepaste apps in de linkernavigatie van de oplossing. De pagina toont de apps die deze oplossing al in de geselecteerde omgeving heeft geïnstalleerd.
4. Selecteer Nieuw. Aan de zijkant van het scherm opent een deelvenster.
5. Kies het pakketbestand van de app.
6. Selecteer Aangepaste app registreren. De app verschijnt in de lijst voor die oplossing en omgeving, en op de startpagina van de omgeving in de Platformshell.

Dat is het hele formulier. Het pakket zegt al hoe de app heet, met welke Module Federation-scope hij is gebouwd, welke module hij beschikbaar maakt en welke scopes hij nodig heeft — dus er valt niets te typen, en dus ook niets verkeerd te typen.

Wat er achter de schermen gebeurt

Het platform controleert het archief voordat het iets opslaat: de grootte, hoeveel bestanden erin zitten, hoe groot het uitgepakt wordt, dat geen pad buiten de map uitkomt, en dat elk bestand van een soort is die het platform levert. Daarna leest het het manifest van de app uit het archief, valideert het tegen het manifestschema voor aangepaste apps, en controleert het de logische naam tegen het voorvoegsel van de uitgever die eigenaar is.

Het archief wordt in de eigen database van het platform opgeslagen, en de code van de app wordt geleverd vanaf het eigen adres van het platform. Daardoor is de oplossing op zichzelf compleet: bij het exporteren gaat de code mee, dus importeren in Test of Productie installeert een werkende app zonder externe host die je in de lucht moet houden.

Een app in de ene omgeving installeren, installeert hem niet in een andere. Hij reist mee wanneer zijn oplossing wordt geëxporteerd en daar wordt geïmporteerd.

Opnieuw uploaden vervangt de geïnstalleerde build. Dat is de normale cyclus terwijl je werkt: bouwen, uploaden, kijken, opnieuw bouwen.

Gehoste modus, alleen voor ontwikkeling

Terwijl je een app schrijft, kun je hem in plaats daarvan als Gehost registreren: de shell laadt remoteEntry.js dan van je ontwikkelserver, zodat je hot reload houdt en niet voor elke wijziging opnieuw hoeft te verpakken. Het platform weigert een gehoste registratie in elke omgeving die geen ontwikkelomgeving is, omdat een app waarvan de code ergens anders staat, een app is die zijn oplossing niet kan meenemen.

Problemen oplossen

• "Custom app … must start with the publisher prefix …_." — de logicalName in de package.json van de app begint niet met het voorvoegsel van de uitgever die eigenaar is. Pas het daar aan en bouw het pakket opnieuw; de naam komt uit de build, niet uit dit scherm.
• "The package manifest is invalid: …" — de parsware.json van het archief heeft niet de verwachte vorm. Die wordt geschreven door parsware-pack, dus meestal betekent dit dat het pakket met de hand is bewerkt of met een oudere versie van het hulpprogramma is gebouwd.
• "… holds a CustomControl, not a CustomApp." — dit is het pakket van een aangepast besturingselement. Installeer het in plaats daarvan vanaf de pagina Aangepaste besturingselementen.
• "Custom app … is already installed in this environment by another solution." — de naam is al in gebruik door een andere oplossing. Geef de jouwe een andere naam, of haal eerst de andere registratie weg.
• "Environment … is not a development environment" — je registreert een gehoste app buiten een ontwikkelomgeving. Upload in plaats daarvan het pakket.
• "Environment … is not active." — wacht tot de omgeving klaar is met inrichten, of kies een andere omgeving.

Gerelateerde scenario's

• Een aangepaste React-app bouwen.
• Een aangepaste React-app openen.
• Een aangepast besturingselement registreren.
• Een oplossing maken.