Lokaler Code

Wozu „Lokaler Code“?

Manche Fehler zeigen sich nur im echten Launchpad: mit der echten Kachel, den echten Rollen, echten Daten und den Plugins des Systems. Bisher hieß das: bauen, deployen, Cache leeren, testen. Mit dem Tab Lokaler Code leitet FrontTailor die Anfragen nach den Dateien einer App auf deinen Dev-Server um (ui5 serve, fiori run oder die Vorschau im SAP Business Application Studio). Alles andere kommt weiter vom System. Geladen wird nur dein eigener Code; hochgeladen wird nichts.

Die Umleitung gilt nur im aktuellen Tab und endet, wenn du ausschaltest, den Tab schließt, den Browser neu startest oder die Extension aktualisiert wird. ab Pro

Der Tab hat drei Bereiche: Zuordnungen (welche App auf welchen Dev-Server geht), Neue Zuordnung und So funktioniert es mit einer Kurzanleitung. Hast du https-Dev-Hosts bestätigt, steht darunter Vertraute Dev-Hosts.

Eine Zuordnung anlegen

1. Starte deinen Dev-Server, zum Beispiel ui5 serve --port 8080 oder fiori run.
2. Öffne die App auf dem System – im Launchpad: starte sie –, dann im Panel den Tab Lokaler Code.
3. Unter Apps auf dieser Seite stehen die erkannten UI5-Apps. Klicke bei deiner App Übernehmen; App-ID und Pfad auf dem System sind dann ausgefüllt. Fehlt die App, klicke Erneut suchen.
4. Trage unter URL des Dev-Servers die Adresse ein, unter der dein Server die manifest.json der App liefert, etwa http://localhost:8080/.
5. Klicke Zuordnung speichern.

1. Übernehmen füllt App-ID (sap.app.id) und Pfad auf dem System aus der erkannten App. Geöffnet markiert die App, die gerade läuft.
2. URL des Dev-Servers. Darunter steht sofort, ob das Ziel erlaubt ist – hier „Dein eigener Rechner: erlaubt.“
3. Component-preload.js: Blockieren (Einzeldateien) ist der Standard und richtig für ui5 serve und fiori run – UI5 lädt dann jede Datei einzeln von deinem Dev-Server. Vom Dev-Server nur, wenn dein Server selbst einen Preload baut (zum Beispiel aus einem dist-Ordner).
4. Bleibt auf dem System: Diese Pfade leitet FrontTailor nie um, darunter resources/, test-resources/, sap-ui-cachebuster-info.json und die Backend-Services aus dem Manifest der App.
5. Zuordnung speichern legt die Zuordnung für dieses System ab. Eingeschaltet ist damit noch nichts.

Zuordnungen gelten je System (Host). Pro Host speichert FrontTailor bis zu 30 Zuordnungen, lokal im Browser. Mit Bearbeiten und Löschen änderst du sie später.

Den Dev-Server prüfen

Bevor du einschaltest, klicke bei der Zuordnung Prüfen. FrontTailor ruft dann – nur auf diesen Klick – die manifest.json unter der URL des Dev-Servers ab und vergleicht die App-ID.

1. Prüfen fragt den Dev-Server nach der manifest.json.
2. Das Ergebnis, hier „Dev-Server antwortet in … ms mit der manifest.json von ft.demo.freestyle.“ Andere Ergebnisse stehen unter Typische Probleme.
3. Einschalten startet die Umleitung (siehe nächster Abschnitt).

Einschalten

1. Klicke bei der Zuordnung Einschalten.
2. Lies im Dialog, was passiert: welcher Pfad wohin geht, wie Component-preload.js behandelt wird und was auf dem System bleibt.
3. Setze den Haken Ich möchte meinen lokalen Code in diesem Tab ausführen.
4. Klicke Einschalten und neu laden. Die Seite lädt ohne Cache neu und holt die Dateien der App von deinem Dev-Server.

1. Ohne diesen Haken bleibt der Button gesperrt.
2. Einschalten und neu laden. Abbrechen lässt alles, wie es ist.

Hat FrontTailor noch keinen Zugriff auf das System, fragt der Browser beim Einschalten danach (siehe Zugriff auf eine Seite erlauben). Gebraucht wird der Zugriff auf den Ursprung der App-Dateien und den der Seite. Pro Tab ist immer nur eine Umleitung aktiv.

Woran du siehst, dass lokaler Code läuft

Solange die Umleitung aktiv ist, zeigt die Seite unten einen Banner Lokaler Code aktiv mit der Adresse des Dev-Servers und der App-ID. Er gehört zur Extension, nicht zur App, und erscheint nicht im Ausdruck.

Im Panel steht über den Zuordnungen ein Hinweis mit derselben Information; die aktive Zuordnung trägt die Markierung Aktiv.

1. Ausschalten beendet die Umleitung und lädt die deployte App.
2. Die Markierung Aktiv an der Zuordnung, die gerade wirkt.

Ausschalten

Drei Wege führen zurück zur deployten App:

• Ausschalten im Banner in der Seite,
• Ausschalten im Panel,
• der Befehl Lokalen Code ausschalten (<Ziel>) in der Befehlspalette – er erscheint nur, solange eine Umleitung aktiv ist.

Ausschalten funktioniert immer: auch auf PROD, auch wenn die Lizenz abgelaufen ist und auch, wenn dein Administrator das Modul per Richtlinie abgeschaltet hat. Schließt du den Tab, endet die Umleitung ebenfalls.

Erlaubte Ziele und vertraute Dev-Hosts

FrontTailor führt den Code nicht selbst aus und lädt ihn nicht in die Extension: Der Browser holt die Dateien wie sonst auch, nur von einer anderen Adresse. Zugangsdaten speichert FrontTailor dabei nicht.

Gut zu wissen

• CORS: Der Dev-Server muss Cross-Origin-Anfragen erlauben. ui5 serve und fiori run tun das.
• Lokales Netzwerk: Chrome fragt eventuell einmal, ob das System auf Geräte im lokalen Netzwerk zugreifen darf. Erlaube es.
• Content Security Policy: Eine strenge CSP des Systems kann localhost sperren. Die App startet dann nicht; Ausschalten stellt sie wieder her.
• BAS: Die Vorschau verlangt eine Anmeldung. Öffne die Vorschau-URL einmal in diesem Browser und melde dich an.
• Service Worker der App: Hat die App einen eigenen Service Worker, kann er an der Umleitung vorbei aus seinem Cache liefern. Leere dann den Cache (siehe Werkzeuge).
• Eine Wurzel je Zuordnung: Eigene Bibliotheken, die die App von einem anderen Pfad lädt, brauchen eine eigene Zuordnung.

Typische Probleme