Direkt zum Hauptinhalt

Eine benutzerdefinierte React-App registrieren

Ziel​

Eine benutzerdefinierte React-App durch Hochladen ihres Pakets in einer Umgebung installieren, damit die Plattform-Shell sie dort als App laden kann.

Sie möchten wissen, wie Sie die App bauen, statt eine zu installieren? Diese Seite setzt voraus, dass die App bereits existiert und gepackt wurde. Wie Sie sie schreiben – Projekteinrichtung, die Module-Federation-Konfiguration, die App-Komponente, das Runtime SDK, Tests und Packen –, steht unter Eine benutzerdefinierte React-App bauen.

Voraussetzungen​

  • Sie sind als Plattformadministrator beim Admin Control Center angemeldet.
  • Ein Herausgeber und eine Lösung dieses Herausgebers existieren bereits.
  • Die Umgebung, in der Sie die App installieren, ist aktiv.
  • Sie haben das Paket der App – die .zip-Datei, die npm run pack im Projekt der App erzeugt. Sie wird meist in den Ordner package/ dieses Projekts geschrieben und nach der App benannt, zum Beispiel par_sales_dashboard-2.0.1.zip.

Schritte​

  1. Wählen Sie in der Auswahl in der oberen Leiste die Umgebung aus, in der die App installiert werden soll.
  2. Öffnen Sie Lösungen und dann die Lösung, zu der die App gehört.
  3. Wählen Sie in der linken Navigation der Lösung Benutzerdefinierte Apps aus. Die Seite listet die Apps auf, die diese Lösung in der ausgewählten Umgebung bereits installiert hat.
  4. Wählen Sie Neu aus. Am Bildschirmrand öffnet sich ein Seitenbereich.
  5. Wählen Sie die Paketdatei der App aus.
  6. Wählen Sie Benutzerdefinierte App registrieren aus. Die App erscheint in der Liste für diese Lösung und Umgebung sowie auf der Startseite der Umgebung in der Plattform-Shell.

Das ist das ganze Formular. Das Paket gibt bereits an, wie die App heißt, mit welchem Module-Federation-Scope sie gebaut wurde, welches Modul sie bereitstellt und welche Scopes sie benötigt – es gibt also nichts einzutippen und nichts, bei dem Sie sich vertippen könnten.

Was im Hintergrund passiert​

Die Plattform prüft das Archiv, bevor sie etwas speichert: seine Größe, wie viele Dateien es enthält, wie stark es sich beim Entpacken ausdehnt, dass kein Pfad aus dem Ordner herausführt und dass jede Datei einem Typ entspricht, den die Plattform ausliefert. Dann liest sie das Manifest der App aus dem Archiv, validiert es gegen das Manifestschema für benutzerdefinierte Apps und prüft den logischen Namen gegen das Präfix des zuständigen Herausgebers.

Das Archiv wird in der eigenen Datenbank der Plattform gespeichert, und der Code der App wird von der eigenen Adresse der Plattform ausgeliefert. Das macht die Lösung in sich geschlossen: Beim Exportieren wird der Code mitgenommen, sodass ein Import in Test oder Produktion eine funktionsfähige App installiert, ohne dass ein externer Host weiterlaufen muss.

Die Installation der App in einer Umgebung installiert sie in keiner anderen. Sie gelangt dorthin, wenn ihre Lösung exportiert und dort importiert wird.

Erneutes Hochladen ersetzt den installierten Build. Das ist der normale Ablauf während der Arbeit: bauen, hochladen, ansehen, erneut bauen.

Gehosteter Modus, nur für die Entwicklung​

Während Sie eine App schreiben, können Sie sie stattdessen als Gehostet registrieren: Die Shell lädt remoteEntry.js von Ihrem Entwicklungsserver, sodass Sie Hot Reload behalten und nicht für jede Änderung neu packen müssen. Die Plattform lehnt eine gehostete Registrierung in jeder Umgebung ab, die keine Entwicklungsumgebung ist, denn eine App, deren Code woanders liegt, ist eine App, die ihre Lösung nicht mitnehmen kann.

Fehlerbehebung​

  • „Die benutzerdefinierte App … muss mit dem Herausgeberpräfix …_ beginnen.“ – Der logicalName in der package.json der App beginnt nicht mit dem Präfix des zuständigen Herausgebers. Korrigieren Sie ihn dort und bauen Sie das Paket neu; der Name stammt aus dem Build, nicht aus diesem Bildschirm.
  • „Das Paketmanifest ist ungültig: …“ – Die parsware.json des Archivs hat nicht die erwartete Form. Sie wird von parsware-pack geschrieben; meist wurde das Paket also von Hand bearbeitet oder mit einer älteren Version des Tools gebaut.
  • „… enthält ein CustomControl, keine CustomApp.“ – Das ist das Paket eines benutzerdefinierten Steuerelements. Installieren Sie es stattdessen über die Seite Benutzerdefinierte Steuerelemente.
  • „Die benutzerdefinierte App … ist in dieser Umgebung bereits durch eine andere Lösung installiert.“ – Der Name ist von einer anderen Lösung belegt. Benennen Sie Ihre App um oder entfernen Sie zuerst die andere Registrierung.
  • „Die Umgebung … ist keine Entwicklungsumgebung“ – Sie registrieren eine gehostete App außerhalb der Entwicklung. Laden Sie stattdessen das Paket hoch.
  • „Die Umgebung … ist nicht aktiv.“ – Warten Sie, bis die Bereitstellung der Umgebung abgeschlossen ist, oder wählen Sie eine andere Umgebung.

Verwandte Szenarien​

  • Eine benutzerdefinierte React-App bauen.
  • Eine benutzerdefinierte React-App öffnen.
  • Ein benutzerdefiniertes Steuerelement registrieren.
  • Eine Lösung erstellen.