Exciting Update for CMS Developers: Build Modules with React!

Wir haben eine spannende Ankündigung für alle CMS Entwickler. Website Themes unterstützen jetzt die Erstellung von Modulen mit React. Mit wenigen Anpassungen an Ihrem bestehenden Theme profitieren Sie von der Leistungsfähigkeit von React, einer verbesserten lokalen Entwicklererfahrung und einem modernen Build und Deployment System, das die Entwicklung mit Content Hook zum Kinderspiel macht. Sehen wir uns zunächst einige Anpassungen an, die Sie an Ihrem bestehenden Theme vornehmen müssen, um React Module zu aktivieren. Das Theme Verzeichnis in diesem Diagramm sollte der Dateistruktur Ihrer aktuellen Website Themes sehr ähnlich sein. Es gibt jedoch einige wichtige Unterschiede, die React ermöglichen und auf die ich kurz eingehen möchte. Wie Sie im obersten Verzeichnis sehen, befindet sich eine HS Projekt JSON Datei. Diese Datei enthält die Konfiguration, die Sie zum Aktivieren des Bild und Deploymentsystems des Projekts. Benötigen. Zusätzlich zu dieser zusätzlichen Konfigurationsdatei gibt es einen speziellen Speicherort für alle Ihre React Module im Verzeich Components Modules. Das war's schon. Eine zusätzliche Konfiguration und ein neues Verzeichnis für Ihre React Module und schon kann es losgehen. Werfen wir nun einen Blick auf die neue und verbesserte lokale Entwicklererfahrung beim Erstellen von Website Themes mit React und dem Projektsystem. Ich starte den Dev Server mit Yan Start. Nachdem er nun läuft, werfen wir einen Blick auf die DevServer Startseite. Wie Sie sehen, zeigt diese Ansicht alle wichtigen Informationen zu Ihrem Theme und Projekt. Wir sehen unseren Projektnamen, die Portal ID, Modul und Vorlageninformationen sowie Schnellzugriffe auf unsere Dokumentation in der Slack Community. Die Modultabelle zeigt einige erwähnenswerte Verbesserungen. Ein Klick auf den Modulnamen zeigt Details und Abhängigkeiten. Hier sehen Sie das Verzeichnis, in dem sich das Modul in Ihrem lokalen Dateisystem befindet, die Seiten, auf denen es möglicherweise verwendet wird, die JSON Felder, die das Modul definieren. Ganz unten finden Sie einen praktischen Button, mit dem Sie die Moduldatei in Ihrem Code Editor öffnen können. Darüber hinaus verfügen wir über lokale Bearbeitungsfunktionen, die Ihnen eine schnellere Feedbackschleife bei der Arbeit an Ihren Modulen ermöglichen. Klicken Sie auf Lokale Version anzeigen, um die lokal ausgeführte Version unseres Moduls anzuzeigen, die aus unserem Dateisystem abgerufen wird. Wenn ich also zu diesem Modul wechsle, hier eine neue Überschrift hinzufüge, auf Speichern klicke und zurück zur Seite gehe, sehen wir diese Änderung in unserer lokalen Modulvorschau, ohne dass ein HS Upload zum Design Manager erforderlich ist. Zusätzlich zu dieser lokalen Bearbeitungsansicht können wir dieses Modul in der App anzeigen, um zu sehen, welche Erfahrung wir für unsere Content Ersteller schaffen. Wie Sie sehen, werden unsere lokalen Änderungen auch auf dieser Seite angezeigt, um uns ein besseres lokales Entwicklererlebnis zu bieten, bevor wir in die Produktion gehen. Neben der Modulvorschau können wir auch unsere Vorlagen lokal anzeigen, um zu sehen, wie sich unsere Modulcodeänderungen im Kontext einer Vorlage widerspiegeln. Wenn ich also unsere lokale Homepage Vorlage ansehe, sehen Sie, dass unsere lokalen Moduländerungen in dieser Vorlage widergespiegelt werden, so dass wir sehen können, wie diese Module in der Praxis aussehen. Nachdem Sie nun ein Gefühl für die verbesserte lokale Entwicklererfahrung haben, stellen wir diese Änderungen mit Hilfe des Build und Deployment Systems des Projekts in unserem Portal bereit. Mit dem HS Projekt Upload starten wir einen Build und ein anschließendes Deployment, um die Codeänderungen in Ihr Portal zu übertragen und auf Ihren Webseiten zu verwenden. Der HS Projekt Upload ist der einzige Befehl, den Sie ausführen müssen, um sowohl ihre Hubble als auch ihre React Assets in ihrem Portal. Bereitzustellen. Dies ermöglicht Ihnen und Ihrem Team einen einfachen und schnellen Bereitstellungsprozess. Bevor wir dieses neue Modul einer Webseite hinzufügen, werfen wir einen Blick auf die Projektoberfläche. Dort können Sie jeden Bild und die aktuell bereitgestellte Version Ihres Designs einsehen. Wie Sie sehen, zeigt die Projektoberfläche unseren aktuellen Bild, dessen Protokolle und die möglichen Änderungen zwischen dem letzten und dem aktuellen Bild. Wenn wir uns die Dateistruktur genauer ansehen, sehen wir, dass sich die Überschrift geändert hat und wir können direkt in der Benutzeroberfläche sehen, welche Datei geändert wurde und welche Codeänderungen vorgenommen wurden. Darüber hinaus können wir alle unsere bisherigen Builds und Deployments einsehen, was zukünftige Rollbacks erleichtert, falls diese benötigt werden. Nachdem wir uns die Benutzeroberfläche des Projekts angesehen haben, fügen wir unser neues Modul einer Websiteseite hinzu. Erstellen Sie eine neue Website Seite. Unser Spring Spotlight Theme ist bereits ausgewählt. Ich wähle unsere leere Vorlage aus. In der Modulansicht suche ich dann nach der Überschriftenkomponente und ziehe sie hierher. Wie Sie sehen, wird unser React Modul mit unserem Spring Spotlight Addon auf unserer Website Seite angezeigt. Ich hoffe, Sie sind genauso begeistert wie wir von der neuen und verbesserten Möglichkeit, CMS Themes auf HubSpot zu erstellen. Tschüss.