# External File Development URL: https://docs.ablyft.com/de/developers/application-integration/external-file-development/ > Entwickle Experiment-Code in deiner eigenen Umgebung mit lokalem Dev-Server oder Build-Pipeline. External Code-Variations laden CSS und JavaScript von deinen URLs. Mit **External File Development** entwickelst du Experiment-Code in deiner eigenen Umgebung, zum Beispiel in deiner IDE mit einem lokalen Dev-Server oder einer Build-Pipeline, statt Code in den ABlyft-Editor einzufügen. Variations vom Typ **External Code** enthalten selbst keinen Code. Sie verweisen auf externe **CSS**-, **Reset JS**- und **JS**-Dateien. Das ABlyft-Snippet lädt diese Dateien, sobald die Variation ausgespielt wird. Änderungen an deinen Dateien werden beim nächsten Seitenaufruf übernommen, ohne dass du in ABlyft speichern oder publizieren musst. Wenn du fertig bist, kannst du die Variation in eine reguläre **Code**-Variation umwandeln. ABlyft kopiert dann den Inhalt der Dateien in die Variation. ## Einrichtung ### 1. Das Feature in den Project-Einstellungen aktivieren 1. Öffne **Project Settings → Integrations**. 2. Schalte im Bereich **External File Development** die Option **Enable external file development** ein. 3. Lege für jeden Dateityp ein URL-Template fest: | Feld | Zweck | | ---------------- | ---------------------------------------------------------------------------- | | **JS URL** | Die JavaScript-Hauptdatei einer Variation. | | **CSS URL** | Das Stylesheet einer Variation. | | **Reset JS URL** | JavaScript, das die Änderungen der Variation rückgängig macht oder aufräumt. | Beispiel: ```text JS: https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}.js CSS: https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}.css Reset JS: https://external-dev.com/{teamID}/{projectID}/{experimentID}/{variationID}-reset.js ``` Ein Template muss mit `http://`, `https://` oder einem Platzhalter beginnen. Lass ein Feld leer, wenn du diesen Dateityp nicht brauchst. **Verfügbare Platzhalter** | Platzhalter | Wird ersetzt durch | | --------------------- | ------------------------ | | `{teamID}` | ID deines Teams | | `{projectID}` | ID des Projects | | `{experimentID}` | ID des Experiments | | `{experimentApiName}` | API Name des Experiments | | `{variationID}` | ID der Variation | | `{variationApiName}` | API Name der Variation | Wenn du den Schalter ausschaltest, werden die Templates ausgeblendet, bleiben aber gespeichert. ### 2. Eine Variation vom Typ "External Code" erstellen Sobald das Feature aktiviert ist, erscheint **External Code** im Dialog **Create a new Variation**, direkt nach **Code**. Der Typ wird nur angeboten, solange das Feature im Project aktiviert ist. Siehe [Eine Variation erstellen](https://docs.ablyft.com/de/guides/experiments/variations/#create-a-variation). ### 3. URLs an der Variation prüfen oder anpassen Öffne die Variation. Der Bereich **External Code** zeigt drei Felder (**JS URL**, **CSS URL**, **Reset JS URL**), die mit den aus den Project-Templates gebildeten URLs vorausgefüllt sind. * Ändere eine URL, um für diese Variation eine andere Datei zu verwenden. Platzhalter sind hier nicht erlaubt, nur vollständige URLs. * Leere ein Feld und speichere, damit diese Datei gar nicht geladen wird. Ein geleertes Feld bleibt leer. Es wird später **nicht** wieder aus dem Project-Template befüllt. * Die vorausgefüllten URLs werden beim Speichern mit der Variation gespeichert. Danach wirkt sich eine Änderung des Project-Templates nicht mehr auf diese Variation aus. ## Wie die Dateien geladen werden Wird ein Visitor einer External Code-Variation zugewiesen, lädt das Snippet die Dateien in **dieser Reihenfolge**: 1. **CSS** wird der Seite hinzugefügt. 2. **Reset JS** wird geladen und ausgeführt. 3. **JS** wird geladen und ausgeführt, aber erst, nachdem das Reset JS fertig geladen ist. Ist keine Reset JS URL gesetzt, wird das JS direkt nach dem CSS geladen. Felder ohne URL werden übersprungen. Ist der [Debug Mode](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#debug-mode) aktiviert, schreibt das Snippet pro geladener Datei eine Zeile mit ihrer URL in die Browser-Konsole, zum Beispiel `Loading external CSS`, `Loading external RESET JS` und `Loading external JS`. > **Reset JS muss laden:** Kann die Reset JS-Datei nicht geladen werden (404, Netzwerkfehler), wird auch die JS-Datei nicht geladen. ## In Code umwandeln Wenn eine Variation fertig ist, kannst du sie in eine reguläre **Code**-Variation umwandeln: 1. Öffne die External Code-Variation. 2. Klicke unter den URL-Feldern auf **Convert to Code**. 3. Bestätige im Dialog. ABlyft lädt dann die drei Dateien und: * ändert den Typ auf **Code**, * speichert die Dateiinhalte in **JS code**, **CSS code** und **Reset JS code**, * **überschreibt** vorhandenen Code in diesen Feldern (eine leere URL ergibt ein leeres Code-Feld), * behält die gespeicherten URLs, verwendet sie aber nicht mehr. Kann eine der Dateien nicht geladen werden, wird nichts geändert und eine Fehlermeldung nennt dir die betroffene Datei. **Voraussetzungen und Grenzen** * Die Dateien werden vom ABlyft-Server abgerufen, daher müssen die URLs von dort erreichbar sein. Lokale oder interne Adressen (`localhost`, `192.168.x.x` und ähnliche) werden abgelehnt, außer in einer lokalen Entwicklungsumgebung. * Die maximale Dateigröße beträgt 1 MB pro Datei. Redirects werden nicht verfolgt und die Anfrage bricht nach 10 Sekunden mit einem Timeout ab. ## Das Feature ausschalten Wenn du **External File Development** in den Project-Einstellungen deaktivierst: * Bestehende External Code-Variations funktionieren weiter und werden weiterhin an Visitors ausgespielt. * Der Typ **External Code** kann für neue oder andere Variations nicht mehr ausgewählt werden. ## Gut zu wissen * Deine Dateien müssen aus dem **Browser des Visitors** erreichbar sein, solange das Experiment läuft. Für die lokale Entwicklung heißt das: Der Dev-Server muss auf dem Rechner laufen, auf dem du testest. * Verwende eine URL, die über **HTTPS** funktioniert, wenn deine Website über HTTPS läuft. Sonst blockieren Browser die Dateien als Mixed Content. * Dein Dev-Server muss unter Umständen Cross-Origin-Script-Anfragen erlauben. Das normale Laden von `