Tutorial: In Webflow Custom Code via GitHub einbinden

Webflow ist ein Tool, mit dem man ganz ohne Programmierkenntnisse Webseiten erstellen kann. Die wahre Stärke und Flexibilität zeigt sich allerdings oft erst dann, wenn man Webflow mit eigenem Code erweitert. So kann man das Beste aus beiden Welten miteinander kombinieren.

Die herkömmliche Developer Experience innerhalb von Webflow finde ich persönlich nicht wirklich ideal, vor allem, wenn man sonst mit modernen Code-Editoren wie VSCode arbeitet. Es fehlen einfach moderne Funktionen wie Auto Suggestions, Auto Complete, Code Snippets, Self Closing Tags oder Live Reload.

Im folgenden Tutorial zeige ich dir daher eine alternative Möglichkeit, wie man Custom Code via GitHub direkt in Webflow integriert und so ganz einfach weiterhin mit seinem favorisierten Editor arbeiten kann.

Für mich ist dieser Workflow ein absoluter Game Changer, denn so kann ich für Webflow-Seiten viel schneller Code schreiben und testen.

Schritt 1: Template-Repository klonen

Diese Methode basiert auf einem GitHub Repo von Armand Salle, welches du unter folgendem Link findest: https://github.com/armandsalle/vite-javascript-webflow. In der Readme sind die Docs verlinkt, wo du ebenfalls eine ausführliche Anleitung findest, ich erkläre dir allerdings im Folgenden ohnehin jeden einzelnen Schritt.

Als aller erstes musst du dir dieses Template-Repo klonen:

1. Dafür klickst du einfach auf den grünen Button »Use this template« und anschließend auf »Create a new repository«. Auf der nächsten Seite kannst du einen Namen für dein Repo wählen, die Sichtbarkeit (Public/Private) einstellen und dann dein Repo erstellen.
2. Damit hast du dein Repo erfolgreich erstellt. Jetzt gehst du auf »Code« (grüner Button) und kopierst dir den SSH Key.
3. Jetzt navigierst du lokal auf deinem Rechner zu dem Ordner, in dem du das Repo klonen möchtest und öffnest an dieser Stelle dein Terminal. Dort gibst du ein “git clone {hier-dein-ssh-key-einsetzen}” → die geschweiften Klammern ersetzt du durch deinen kopierten SSH Key und bestätigst mit Enter.

Schritt 2: Projekt installieren

Du hast das Repository erfolgreich geklont. Jetzt kannst du das Projekt via npm installieren. Dazu öffnest du dein lokales Repo in deinem Editor (ich nutze VSCode) und führst in deinem Root-Ordner »npm install« aus.

Mit der Installation wurde auch etwas Code hinzugefügt, der Teil des Template Repositories war, z.B. jQuery, GSAP oder exemplarische Javascript-Modules. All diese Dinge kannst du löschen, da du sie nicht unbedingt benötigst.

Schritt 3: Mit dem Coden starten

Das Projekt ist erfolgreich installiert, jetzt kannst du mit dem Coden beginnen. Dazu startest du das Projekt mit »npm run dev«, anschließend öffnet sich der Dev-Server in deinem Browser. Alle Änderungen, die du in deinem Code machst, sind direkt sichtbar. Du musst dafür nicht reloaden.

Mach doch also einfach mal eine Änderung, zum Beispiel an der main.js, indem du einen console.log deiner Wahl hinzufügst, speicherst und das ganze via Dev Tools in deinem Browser überprüfst.

Wenn du die Änderungen im Browser siehst, hat alles funktioniert. Super!

Schritt 4: Mit Webflow verbinden

Dein Repo ist eingerichtet, das Projekt ist installiert und läuft einwandfrei. Jetzt kannst du das Ganze mit deinem Webflow-Projekt verbinden.

Dazu öffnest du in Webflow dein Projekt und gehst in die Site Settings. Dort fügst du den Code aus dem geklonten Repository einl speicherst anschließend und veröffentlichst deine Webflow-Seite. Den Code findest du in der Readme in den Docs (»Step 3: Integration with Webflow«):

<script>
  (function () {
    const LOCALHOST_URL = [
      'http://localhost:3000/@vite/client',
      'http://localhost:3000/src/main.js',
    ]
    const PROD_URL = ['https://MY-PROJECT.netlify.app/main.js']

    function createScripts(arr, isDevMode) {
      return arr.map(function (url) {
        const s = document.createElement('script')
        s.src = url

        if (isDevMode) {
          s.type = 'module'
        }

        return s
      })
    }

    function insertScript(scriptArr) {
      scriptArr.forEach(function (script) {
        document.body.appendChild(script)
      })
    }

    const localhostScripts = createScripts(LOCALHOST_URL, true)
    const prodScripts = createScripts(PROD_URL, false)

    let choosedScripts = null

    fetch(LOCALHOST_URL[0], {})
      .then(() => {
        choosedScripts = localhostScripts
      })
      .catch((e) => {
        choosedScripts = prodScripts
        console.error(e)
      })
      .finally(() => {
        if (choosedScripts) {
          insertScript(choosedScripts)

          return
        }

        console.error('something went wrong, no scripts loaded')
      })
  })()
</script>

Dieser Code sorgt dafür, dass deine Dateien in dein Webflow-Projekt geladen werden. Zuerst wird versucht die Datei via Localhost zu laden. Das ist immer dann der Fall, wenn du den Dev Server am laufen hast, also in der Regel, wenn du gerade lokal entwickelst.

Wenn keine Localhost-Datei gefunden wurde, wird die »PROD_URL« genutzt. Das ist der Ort, an dem deine finale Datei online gehostet wird, wir nutzen dafür gleich Netlify.

Um sicherzugehen, dass die Code-Einbindung erfolgreich war, kannst du deine veröffentlichte Webflow-Seite öffnen und nachsehen ob deine Änderung drin ist. Wenn das der Fall ist, ist dein Webflow-Projekt erfolgreich mit deiner lokalen Entwicklungsumgebung verbunden.

Jetzt kannst du testweise mal deinen Dev-Server beenden (in VSCode via Shortcut CTRL+C), dann solltest du eine Fehlermeldung in der Console auf der veröffentlichten Webflow-Seite erhalten und deine Änderung ist nicht mehr sichtbar. Das liegt daran, dass weder der Dev-Server läuft, noch eine PROD_URL eingetragen wurde. Darum kümmern wir uns als nächstes.

Schritt 5: Änderungen in das GitHub Repo pushen

Bevor wir unsere Datei bei Netlify hochladen, pushen wir unseren aktuellen Entwicklungsstand in unser GitHub Repo. Dazu nutze ich das Terminal in VSCode und gebe ein:

git add *
git commit -m 'my-commit-message'
git push

Unsere Änderungen wurden jetzt in das GitHub Repo gepusht.

Schritt 6: Mit Netlify in Produktion gehen

Jetzt müssen wir unsere PROD_URL im Code in den Webflow Site Settings noch mit unserer finalen Netlify-URL austauschen. Dazu gehen wir wie folgt vor:

1. Einen Netlify-Account erstellen
2. Ein neues Projekt anlegen
3. Das entsprechende GitHub Repo auswählen
4. Deployen
5. Den Pfad der main.js über die Netlify-URL aufrufen, z.B. https://YOUR-SITE-HERE.netlify.app/main.js
6. Den Pfad kopieren und in den Webflow Site Settings in unserem Code als PROD_URL eintragen, speichern und die Seite veröffentlichen.

Jetzt nutzt unser Code unsere PROD_URL, sobald die Datei via Localhost nicht gefunden werden kann. Das ist immer dann der Fall, wenn wir unseren Dev-Server nicht laufen haben oder ein Besucher deine Seite besucht.

Teste das Ganze, indem du deine veröffentlichte Webflow-Seite öffnest, während der Dev-Server nicht läuft. Wenn du deine Änderungen siehst, bist du fertig! Gratulation, du hast deinen neuen Webflow-Dev-Workflow eingerichtet!

Schritt 7: Änderungen pushen & testen

Immer wenn du deinen Dev-Server via »npm run dev« startest, wird die entsprechende localhost-Datei auf deiner veröffentlichten Website genutzt. Wenn du den Server beendest oder jemand deine Seite besucht, wird immer die Netlify-Datei genutzt.

Wenn du jetzt lokal eine Änderung machst, musst du nur in das GitHub-Repo pushen (siehe Schritt 5). Netlify führt automatisch einen Build-Prozess durch und veröffentlicht die Seite. Dann ist deine Änderung für deine Besucher ebenfalls sichtbar.

Done!

Viel Spaß beim Coden! Ich freue mich, wenn dir dieser Workflow gefällt. Deine Meinung dazu würde mich sehr interessieren. Arbeitest du gerne mit der Custom Code Einbindung in Webflow, oder hast du bereits länger nach solch einer Lösung gesucht?