Letzte Änderung: 12. September 2025
‘Mithilfe von CMS Hub können Sie erweiterte JS-basierte Webanwendungen erstellen. Es stehen Boilervorlagen zur Verfügung, die Ihnen den Einstieg erleichtern.’; Mithilfe von CMS Hub können Sie JavaScript-basierte Webanwendungen erstellen.

​
Welche Ebene von CMS Hub wird benötigt?

Wenn Ihre Website serverseitigen Code oder einen Mechanismus der Content-Mitgliedschaft erfordert, können Sie die serverlosen Funktionen von HubSpot und die der Content-Mitgliedschaftsfunktion nutzen, wenn Sie ein Enterprise-Abonnement haben. Sie können jedoch alternativ Ihr eigenes System mit Drittanbietern wie AWS Lambda in Kombination mit einem API-Gateway erstellen, um serverseitigen Code auszuführen. Wenn Sie eine Webanwendung erstellen, die API-Endpunkte erreichen muss, die eine Authentifizierung für ein solches Zugriffstoken für eine private App erfordern, sollten Sie diesen Code nicht im Browser ausführen. Sie würden Ihre Anmeldeinformationen jedem offenlegen, der die Seite aufruft. Der richtige Ansatz besteht darin, eine Abstraktionsebene zwischen dem Browser und der authentifizierten API zu erstellen: Ein benutzerdefinierter API-Endpunkt, der keine Offenlegung Ihrer Anmeldeinformationen erfordert und von der gleichen Domain wie die Website, die ihn aufruft, bereitgestellt wird. Wenn der benutzerdefinierte API-Endpunkt getroffen wird, wird serverseitiger Code ausgeführt, der die authentifizierte Anfrage durchführen kann. Dann können Sie jede Formatierung der Daten oder der Geschäftslogik, die Sie geheim halten möchten, vornehmen und das Ergebnis an den Browser senden. In der Regel werden dazu serverlose Funktionen verwendet, da sie unglaublich skalierbar sind und keine Verwaltung und Wartung Ihres eigenen Servers erfordern. Sie können Anbieter wie AWS Lambda in Kombination mit einem API-Gateway verwenden oder Sie können die proprietärenserverlosen Funktionen von HubSpot verwenden. Der Vorteil der serverlosen Funktionen von HubSpot besteht darin, dass Sie nicht mehrere separate Dienste verwalten müssen. Das Nutzererlebnis ist vereinfacht und direkt in dasselbe Entwickler-Dateisystem integriert, in dem Designs, Vorlagen und Module vorhanden sind. Wenn Sie keine authentifizierten API-Aufrufe durchführen müssen, benötigen Sie für Ihre App kein Enterprise-Abonnement. React und Vue sind Frontend-Frameworks, die keine serverlosen Funktionen benötigen, um zu funktionieren. Was Sie mit ihnen tun, ist, worauf es ankommt.

​
Frameworks und Bibliotheken

Für Webanwendungen verwenden Entwickler häufig JavaScript-Frameworks, die bei der Verwaltung des Status und der Benutzeroberfläche (UI) helfen. CMS Hub wurde nicht speziell für die Arbeit mit einem bestimmten Framework entwickelt, aber viele gängige JavaScript-Frameworks funktionieren in CMS Hub. Wenn Sie auf Grundlage von HubSpot erstellen, müssen Sie möglicherweise darüber nachdenken, wie Sie mit diesen Frameworks anders arbeiten. Aber die wichtigsten Dinge, die für die Arbeit mit diesen Frameworks erforderlich sind, sind verfügbar: die Funktion, benutzerdefinierte Vorlagen, Module und JavaScript zu schreiben. Wir ermöglichen es Ihnen auch, Ihr Programmieren lokal durchzuführen, damit Sie einen Erstellungsschritt verwenden können.

​
Was Sie wissen sollten

Wir arbeiten mit unserer Entwickler-Community zusammen, um die besten Methoden für das Erstellen von gemeinsamen JavaScript-Frameworks auf HubSpot zu schaffen. Obwohl es möglich ist, dies zu tun, müssen Sie Ihr Projekt aufgrund einiger Aspekte der Funktionsweise von CMS Hub möglicherweise bewusst anders als im Vergleich zu einer einfachen HTML-Seite einrichten. Auch einige Teile Ihres Entwicklungsworkflows weichen unter Umständen von dem ab, was Sie gewöhnt sind. Wir bitten Sie, uns Ihr Feedback mitzuteilen, damit wir das Erlebnis für alle Entwickler verbessern können. Derzeit ist der beste Ort dafür in unserem Entwickler-Forum. Während wir experimentieren und lernen, wird unsere Dokumentation entsprechend aktualisiert.

​
Was beim Erstellen berücksichtigt werden sollte

CMS Hub verfügt über ein leistungsstarkes Modulsystem, mit dem Sie wiederverwendbare CSS-, JavaScript- und HTML-Blöcke mit Zugriff auf die HubSpot-Vorlagensprache HubL erstellen können. Mit HubSpot-Modulen erhalten Content-Autoren viel Kontrolle und Leistungsfähigkeit. Moderne JavaScript-Frameworks verfügen oft über eigene Modulsysteme. Diese Systeme sind alle unabhängig voneinander entwickelt und haben daher oft unterschiedliche Lösungen für Probleme, auf die Sie stoßen könnten.

​
Serverseitiges Rendering und clientseitiges Rendering

Serverseitiges Rendering ist, wenn das HTML für eine Seite aus der Vorlagenlogik auf dem Server generiert wird, bevor HTML an einen Browser gesendet wird. Clientseitiges Rendern ist, wenn eine einfachere oder „unvollständige“ Version des HTML vom Server gesendet wird und JavaScript verwendet wird, um das HTML zu generieren. Dadurch wird die Verarbeitung der Logik vom Server an den Webbrowser (den Client) übertragen. Hydration ist der Vorgang des Kombinierens beider Techniken. Zuerst wird auf dem Server so viel HTML wie möglich generiert. Anschließend wertet JavaScript das bereitgestellte HTML aus und nimmt bei Bedarf kleinere Änderungen daran vor, wenn der Benutzer mit der Seite interagiert oder Daten empfängt. Dies reduziert die Belastung des Clients und reduziert möglicherweise die Zeit, die der Benutzer benötigt, um den geladenen Inhalt zu sehen. In CMS Hub wird HubL serverseitig verarbeitet und dann auf CDN-Ebene zwischengespeichert. Sie können dann JavaScript verwenden, um das HTML, das der Browser dem Website-Besucher anbietet, zu hydratisieren oder clientseitig zu rendern.

​
Single-Page-App (SPA)-Analysen

Analytics ist ein wichtiges Tool, damit Ihr Unternehmen wachsen und sich anpassen kann, um stets Lösungen für Ihre Kunden und potenziellen Kunden zu finden. Wenn Sie eine Single-Page-App erstellen, die mehrere Ansichten enthält, sollten Sie den Besucher, der verschiedene Ansichten sieht, als Seiten tracken. Die meisten Analytics-Plattformen, wie auch HubSpot, bieten eine Möglichkeit, dies mit JavaScript zu tun. Verfolgen Sie die Seitenansicht nach, wenn Ihre App die Ansicht ändert.

​
Erstellen Ihrer App mithilfe von HubSpot-Modulen

Das Modulsystem von HubSpot ist ein serverseitiges Modulsystem, das ein HTML-Dokument aus HubL + HTML-Partials generiert und minimiertes CSS und JavaScript für jedes Modul innerhalb einer Seite generiert. Wenn Sie mit HubSpot-Modulen erstellen, gibt es mehrere Vorteile, die damit einhergehen:
  • Content-Autoren können Ihr Modul zu Seiten mit Drag-&-Drop-Bereichen oder flexiblen Spalten hinzufügen. Sie können das Modul auch selbst verschieben und entfernen.
  • Sie können dem Content-Autor Felder bereitstellen, mit denen er Einstellungen für Ihre App konfigurieren kann.
  • Ihr Code wird nur dann auf der Seite gerendert, wenn das Modul tatsächlich verwendet wird.
  • Module.css und module.js werden automatisch minimiert.
Wenn Sie das HubSpot-Modulsystem verwenden, müssen Sie jedoch auch beachten, dass Module aus bestimmten Dateien bestehen müssen und an anderen Orten erstellt werden müssen, als Sie Ihren Code normalerweise platzieren.

​
Erstellen einer vollständigen Vorlage stattdessen

Sie können Ihre Anwendung auch als Vorlage erstellen, anstatt im Modul-Framework. Dies gibt Ihnen mehr Flexibilität bei Ihrer Dateistruktur. Sie erhalten jedoch nicht die Vorteile, die Module bieten. Content-Autoren können diese Anwendung nicht zu Seiten innerhalb von Drag-&-Drop-Bereichen und flexiblen Spalten hinzufügen.

​
Trennzeichen

Einige JavaScript-Frameworks verwenden geschweifte Klammern { }, um ihren Code abzugrenzen. Die HubL-Sprache verwendet diese Klammern ebenfalls. Es gibt drei Strategien, mit denen Sie sicherstellen können, dass es keine Konflikte zwischen Ihrem Framework und HubL gibt: Sie können das RAW-HubL-Tag verwenden, um Ihren JSX zu umschließen, für das Framework festlegen, dass ein anderes Trennzeichen verwendet wird, oder einen Erstellungsschritt zu verwenden, mit dem das JavaScript zuvor kompiliert wird.

​
VueJS

Das beliebte Vue.js-Framework kann mit und ohne Erstellungsschritt verwendet werden.- Eine detailliertere Aufschlüsselung der Vor- und Nachteile der einzelnen Methoden finden Sie in der Dokumentation von Vue. In HubSpot gibt es spezifische Vor- und Nachteile, die Sie ebenfalls beachten sollten.

​
Ohne Erstellungsschritt

Die Integration von Vue.js ohne Erstellungsschritt in ein Modul ist einfach.

​
Die Vue-Bibliothek zu Ihrem Modul hinzufügen

Verwenden Sie in Ihrer module.html-Datei require_js, um die Vue-Bibliothek hinzuzufügen. Dadurch ist gewährleistet, dass sie nur einmal geladen wird, wenn Ihr Modul zu einer Seite hinzugefügt wird.

​
Den HTML-Code hinzufügen

Kopieren Sie den HTML-Code aus der Vue.js-Einführung und fügen Sie ihn in Ihre module.html-Datei ein. Umschließen Sie diesen Code mit einem HubL-raw-Tag, um zu verhindern, dass er als HubL ausgewertet wird. 
{# raw prevents code within it from being evaluated as HubL #}

<div id="app">
  {{ message }}
</div>

​
Ihren JavaScript-Code hinzufügen

Kopieren Sie das JavaScript aus der Vue.js-Einführung und fügen Sie es in Ihre module.js-Datei ein. Umschließen Sie diesen Code mit einem Ereignis-Listener, um sicherzustellen, dass er ausgeführt wird, sobald der DOM-Inhalt geladen wurde. Veröffentlichen Sie Ihr Modul und sehen Sie es sich in der Vorschau an. Sie sollten nun Ihre funktionierende grundlegende Vue-App sehen. 
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
});

​
Mit einem Erstellungsschritt

Wir haben eine Boilerplate [BETA] erstellt, um Ihnen dabei zu helfen, mit dem HubSpot-Modul-Ansatz beim Erstellen einer VueJS-Anwendung zu arbeiten. Die einfachste Möglichkeit, von dieser zu profitieren, besteht darin, den hs create vue-app-Befehl über die CMS-CLI auszuführen. Anweisungen dazu finden Sie im Repository. Diese Boilerplate ist neu und wir würden uns über Ihr Feedback freuen! Lassen Sie uns wissen, was verbessert werden könnte und welche Probleme Sie haben. Am besten geben Sie uns Ihr Feedback, indem Sie Probleme im GitHub-Repository melden.

​
Arbeiten mit HubSpot-Formularen und CTAs innerhalb von Vue-Komponenten

HubSpot-CTAs und -Formulare verfügen über eigene Skript-Tags und verwalten ihr HTML selbst. Um sicherzustellen, dass Ihre Vue-Komponente das Formular oder den CTA nicht ändert, erstellen Sie ein HTML-Element um den CTA-/Formular-Einbettungscode herum. Wenden Sie v-once auf dieses Element an. Dadurch wird sichergestellt, dass der Code einmal gerendert und dann von Ihrer Vue-Komponente ignoriert wird.

​
ReactJS

Anstatt HubL zum Erstellen von Modulen und Partials zu verwenden, können Sie JavaScript und React verwenden. Neben dem Einfügen von server-gerenderten React-Komponenten in das von HubL generierte HTML unterstützen JavaScript-Module und -Partials sowohl serverseitige als auch clientseitige Interaktivitäten. Weitere Informationen finden Sie in HubSpots Einführung zu grundlegenden JS-Komponenten. Sie können sich auch die React-Boilerplate ansehen, um schnell mit einer React-App innerhalb eines HubSpot-Moduls loszulegen. Die einfachste Möglichkeit, von dieser zu profitieren, besteht darin, den hs create react-app-Befehl über die CMS-CLI auszuführen. Folgen Sie dann dort den Anweisungen im Repository. Diese Boilerplate ist neu und wir würden uns über Ihr Feedback freuen! Lassen Sie uns wissen, was verbessert werden könnte und welche Probleme auftreten. Am besten geben Sie uns Ihr Feedback, indem Sie Probleme im GitHub-Repository melden.

​
Andere JavaScript-Bibliotheken

Es gibt viele JavaScript-Bibliotheken und es ist für uns unmöglich, alle einzeln zu dokumentieren. Es gibt einige grundlegende bewährte Methoden, die Sie bei der Verwendung von JavaScript-Bibliotheken in HubSpot kennen und verstehen sollten.

​
require_js Anstelle von Skript-Tags verwenden

Sie können über Dutzende von Modulen und Vorlagen verfügen, die gemeinsame JavaScript-Bibliotheken verwenden, und diese Bibliotheken ohne Bedenken mehrmals laden. Dazu müssen Sie die Funktion require_js verwenden. Skripts, die mit dieser Funktion geladen werden, werden nur einmal pro Seite geladen, unabhängig davon, wie viele Module, Partials und die Vorlage sie erfordern. 
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}

{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}
Die Verwendung von require kann die Leistung erheblich steigern, da Sie nicht nur die Datei nur einmal laden. Wenn Inhaltselemente auf einer Seite diese Bibliothek nicht benötigen, wird sie überhaupt nicht geladen. Sie können sogar requires mit HubL-Logik verwenden, um Ressourcen nur dann zu laden, wenn Sie sie wirklich benötigen.

​
Empfohlene Tutorials und Leitfäden