Frontity ist ein auf WordPress fokussiertes, React-basiertes serverseitiges Dynamic-Rendering-Framework (puh!), das uns die Erstellung schneller Headless-Websites ermöglicht. Chris hat eine gute Einführung in Frontity. Ich denke, man könnte es sich wie Next.js für WordPress vorstellen. Und obwohl die Nachfrage nach Headless-WordPress-Websites derzeit eine Nische sein mag, zeigt die Showcase-Seite von Frontity, dass es dafür Begeisterung gibt.
Die Dokumentation, Tutorials und Anleitungen von Frontity konzentrieren sich auf die Erstellung von Headless-Blog-Websites, und seine Showcase-Seite listet über 60 Websites auf, darunter CNBC Africa, Forbes Africa, Hoffmann Academy, Aleteia, Diariomotor und andere. In dieser Liste schafften es fünf Headless-WordPress-Websites als produktionsreife Showcase-Studien.
Die offizielle Website von Frontity selbst ist ein sehr interessanter Anwendungsfall auf Produktionsebene, der zeigt, wie der WordPress Block Editor erfolgreich mit dem Frontity-Framework verbunden werden kann.
Ich werde Sie in diesem Artikel durch die Schritte zur Erstellung einer Frontity-Website führen und anschließend einen weiteren Artikel über die Verwendung und Anpassung des Standard-Mars-Themes von Frontity veröffentlichen. Wir beginnen mit diesem Beitrag, in dem wir die Grundlagen der Einrichtung einer Headless-WordPress-Website auf dem Frontity-Framework behandeln.
Inhaltsverzeichnis
Dies ist kein Experten-Leitfaden, sondern eher die Reise eines Headless-WordPress-Enthusiasten auf dem Weg, die Frontity-Erfahrung kennenzulernen. Für eine detailliertere und maßgebliche Anleitung konsultieren Sie bitte die Dokumentation von Frontity. Frontity-Doku.
Voraussetzungen und Anforderungen
Da Frontity ein React-basiertes Framework ist, empfehle ich, Grundkenntnisse in React und JavaScript mit ES6-Funktionen zu haben. Die Tutorial-Doku von Frontity beschreibt einige zusätzliche Anforderungen, einschließlich
- Gute Kenntnisse in HTML und CSS
- Erfahrung mit der Kommandozeile
- Ein Node.js-Server
- Und natürlich ein Code-Editor
Bereit? Los geht's!
Lernen wir Frontity kennen
Chris hat hier bereits erklärt, was Frontity ist und wie es funktioniert. Frontity ist ein auf WordPress fokussiertes und meinungsbildendes React-Framework mit eigenem State Manager und CSS-Styling-Lösungen. Die kürzlich aktualisierte Frontity-Architektur beschreibt, wie ein Frontity-Projekt entweder im decoupled mode oder embedded mode ausgeführt werden kann.
Im decoupled mode (siehe unten) holt Frontity REST-API-Daten von einem WordPress PHP-Server und gibt das endgültige HTML an die Benutzer als isomorphe React-App (verwendet im benutzerdefinierten Theme) zurück. In diesem Modus verweist die Hauptdomain auf Frontity, während eine Subdomain auf die WordPress-Website verweist.
Im embedded mode ersetzt das Frontity-Theme-Paket (eine isomorphe React-App) das WordPress PHP-Theme über ein erforderliches Frontity Embedded Mode-Plugin. Das Plugin führt eine interne HTTP-Anfrage an den Frontity/Node.js-Server durch, um die HTML-Seiten abzurufen. In diesem Modus verweist die Hauptdomain auf WordPress, wo sowohl Website-Besucher als auch Content-Redakteure dieselbe Domain verwenden, während Frontity die sekundäre Domain (d.h. Subdomain) verwendet.
Frontitys integrierte AMP-Funktion generiert eine vereinfachte Version von HTML-Seiten für ein schnelleres serverseitiges Rendering und überwindet so multiple WordPress-Anfragen. Sie bietet ein dynamischeres statisches Website-Erlebnis, das schnell ist und eine integrierte Server-Erweiterbarkeit bietet, die weiter verbessert werden könnte, indem eine Serverless Pre-rendering (SPR) (auch bekannt als stale-while-revalidate Cache) Technik über KeyCDN und StackPath genutzt wird.
Mehr über den Frontity-Modus erfahren Sie in der Frontity-Architektur-Dokumentation.
Frontity-Website-Installation
Um unser Projekt zu starten, müssen wir eine Frontity-Projekt-Website und eine WordPress-Installation als Datenquellenendpunkt einrichten. In den folgenden Abschnitten lernen wir, wie wir unsere Frontity-Website einrichten und mit unserer WordPress-Installation verbinden. Die Frontity-Schnellstartanleitung ist eine sehr praktische Schritt-für-Schritt-Anleitung, und die folgende Anleitung ermöglicht es uns, unser Frontity-Projekt einzurichten.
Überprüfen Sie zunächst, ob Node.js und npm bereits auf Ihrem Computer installiert sind. Wenn nicht, laden Sie sie herunter und installieren Sie sie.
#! check node -- version
node --version
V14.9.0 #! output if installed
#! check npm version
npm --version
6.14.7 #! output if installed
#! to upgrade npm to latest version
npm install npm@latest -gSchritt 1: Erstellen eines Frontity-Projekts
Führen wir den folgenden Befehl mit der Frontity CLI aus, um ein neues Projekt namens my-frontity zu erstellen.
### creating a frontity project
npx frontity create my-frontityDer obige Code erzeugt die folgende Ausgabe.
Schritt 2: Auswahl des Frontity Mars-Themes
Frontity bietet zwei Themes: twentytwenty-theme und mars-theme. Für den Anfang empfiehlt Frontity die Auswahl des Mars-Themes und gibt die folgende Ausgabe aus.
Wenn Sie die Aufforderung zur E-Mail-Adresse beantworten, sollte eine gültige E-Mail-Adresse eingegeben werden. Ich fand es nützlich, die E-Mail beim ersten Mal einzugeben, damit ich mit den Frontity-Entwicklern in Kontakt bleiben kann, aber danach habe ich keinen Nutzen mehr gesehen.
Schritt 3: Frontity-Projektinstallation
Der Frontity-Server installiert das Projekt und seine Abhängigkeiten. Bei erfolgreicher Installation sollte die folgende Ausgabe angezeigt werden.
Schritt 4: Verzeichnis wechseln und Entwicklungsserver neu starten
Um in den Projektordner zu gelangen, wechseln Sie das Verzeichnis mit dem folgenden Befehl und starten Sie den Server, um das neu erstellte Projekt anzuzeigen.
### change dir to project folder
cd my-frontityDer Frontity-Entwicklungsserver kann mit dem folgenden Befehl gestartet werden.
### start development server with npx
npx frontity dev
### starting dev server with yarn
yarn frontity devWenn der Entwicklungsserver erfolgreich gestartet wurde, kann das Projekt unter https://:3000 aufgerufen werden und sollte den folgenden Bildschirm im Browser anzeigen.
Der obige Screenshot zeigt das Frontend einer abgeschlossenen, von Frontity angetriebenen WordPress-Website mit dem Mars-Theme. Die Website ist noch nicht mit unserer eigenen verbunden, was wir im nächsten Abschnitt behandeln werden.
Abschnitt 2: WordPress-Website-Installation
Wir benötigen eine WordPress-Website als Datenquelle. Wir können entweder eine bereits installierte Website verwenden oder eine neue Test-Website auf Ihrem lokalen Rechner installieren. Für dieses Projekt habe ich die neueste Version von WordPress auf meinem Rechner mit Local installiert und die Theme-Testdaten importiert, die auch Testdaten für die Block-Editor-Styling enthalten.
In neueren Versionen von WordPress ist die WordPress REST API direkt in den WordPress-Core integriert. Wir können also überprüfen, ob sie unsere wp-content-Daten öffentlich erweitert, indem wir /wp-json an die URL unserer Website anhängen (z. B. http//mytestsite.local/wp-json). Dies sollte den Inhalt im JSON-Format zurückgeben. Dann sind wir bereit weiterzumachen.
Schöne Permalinks auswählen
Eine weitere Bedingung, die Frontity in unserer WordPress-Installation verlangt, ist die Aktivierung der schönen Permalinks (Post Name) unter Einstellungen > Permalinks.
Abschnitt 3: Verbindung des Frontity-Projekts mit WordPress
Um unsere WordPress-Website mit dem Frontity-Projekt zu verbinden, sollten wir die Datei frontity.settings.js aktualisieren.
// change source URL in frontity.settings.js
const settings = {
...,
packages: [
...,
{
name: "@frontity/wp-source",
state: {
source: {
// Change this url to point to your WordPress site.
api: "http://frontitytest.local/wp-json"
}
}
}
]
}Bitte beachten Sie, dass wir beim Aktualisieren der URL zu unserer WordPress-Installation den Namen des state.source-Objekts von url in api ändern müssen (wie oben hervorgehoben) und die Datei mit unseren Updates speichern. Starten Sie den Entwicklungsserver neu, und wir werden sehen, dass die Frontity-Website nun mit unserer eigenen WordPress-Website verbunden ist.
Im obigen Screenshot werden Sie feststellen, dass die Menüpunkte (Nature, Travel, Japan, About Us) immer noch von der Frontity-Demoseite angezeigt werden, was wir im nächsten Schritt beheben werden.
Schritt 1: Aktualisierung unseres Menüs in der Frontity-Website
WordPress behandelt Menüpunkte als private benutzerdefinierte Post-Typen und sind nur für diejenigen sichtbar, die in WordPress angemeldet sind. Bis zur Veröffentlichung der WordPress REST-API Version 2 werden Menüpunkte nicht als sichtbare Endpunkte exponiert, aber registrierte Menüs können mithilfe des WP-REST-API V2 Menüs Plugins erweitert werden.
Da Menüpunkte selten geändert werden, sind die Menüpunkte des Frontity Mars-Themes oft hartcodiert in der Datei frontity.settings.js, um als Zustand gespeichert und dann an die index.js-Datei exportiert zu werden. Für dieses Demo-Projekt habe ich das WordPress-Website-Menü wie im Frontity Mars-Theme beschrieben mit Kategorien und Tags erstellt.
Als Nächstes fügen wir unsere Menüpunkte zur Datei frontity-settings.js hinzu, wie im Frontity Mars-Theme beschrieben.
// add menu items in frontity-settings.js
{
name: "@frontity/mars-theme",
state: {
theme: {
menu: [
["Home", "/"],
["Block", "/category/block/"],
["Classic", "/category/classic/"],
["Alignments", "/tag/alignment-2/"],
["About", "/about/"]
],
featured: {
showOnList: true,
showOnPost: true
}
}
}
},Speichern wir unsere Änderungen und starten Sie den Entwicklungsserver wie zuvor neu. Wir sollten die Menüpunkte (Block, Classic, Alignment, About) von unserer eigenen Website im Header-Bereich sehen.
Die Zeilen 13-16 definieren, ob wir das Vorschaubild auf der Liste (z.B. Indexseite) oder im Beitrag (z.B. Einzelbeitragsseite) anzeigen möchten.
Schritt 2: Ordnerstruktur des Frontity-Projekts
Unser frontity-demo-Projekt (wir haben den Projektnamen von my-frontity geändert) sollte zwei Dateien, package.json und frontity.settings.js, sowie die Ordner node_modules/ und packages/mars-theme enthalten.
### File structure
frontity-demo/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
|__ mars-theme/Eine kurze Beschreibung der Dateien/Ordner, wie in der Frontity-Doku beschrieben.
node_modules: Hier werden die Abhängigkeiten des Frontity-Projekts installiert (sind nicht zur Bearbeitung vorgesehen).packages/: Ein Ordner mit dem installiertenmars-theme. Der Theme-Ordner enthält einensrc-Ordner, der benutzerdefinierte Pakete und möglicherweise einige Kernpakete von Frontity enthält, die nach Wunsch bearbeitet und angepasst werden können. Alles in Frontity ist ein Paket.frontity.setiings.js: Dies ist die wichtigste Datei, in der die grundlegende Einrichtung unserer App bereits vorgenommen wurde. Derzeit sind diese Einstellungen Frontity-Standardeinstellungen, aber alle gewünschten Einstellungen und Erweiterungen werden in dieser Datei konfiguriert. Zum Beispiel werden die Datenquellen-URL (z. B. WordPress-Website-URL) und erforderliche Pakete und Bibliotheken zur Ausführung des Projekts unter dem Frontity State-Paket definiert.package.json: Datei, in der die für die Funktion Ihrer App erforderlichen Abhängigkeiten deklariert sind.
Wir werden uns später mit Frontity-Theme-Paketen und anderen Abhängigkeiten beschäftigen, da diese eine tiefere Erklärung erfordern.
Schritt 3: Modifizierung von Stilen
Frontity verwendet die beliebte CSS-in-JS-Bibliothek Emotion zum Stylen seiner Komponenten. Frontitys Standard-Mars-Theme ist mit Styled Components styled, die von @emotion/syled verfügbar sind. Styled Components ähneln stark CSS. Später in anderen Abschnitten werden wir uns eingehend mit dem Styling eines Frontity-Projekts beschäftigen und anhand eines Anwendungsbeispiels das Styling des gesamten Mars-Themes modifizieren.
Fürs Erste führen wir eine schnelle Demonstration durch, bei der wir die Farbe unseres Website-Titels und -Beschreibungsfeldes ändern. Die Stile für Header und Beschreibung sind als Title- und Description-Styled-Components am Ende der header.js-Komponente definiert. Nun ändern wir die Titel-Farbe in Gelb und die Beschreibungs-Farbe in eine Art Aqua (linkes Feld). Wir sehen, dass die Änderungen in unserem Website-Header widergespiegelt werden.
Abschnitt 4: Bereitstellung der Website auf Vercel
Frontity listet drei beliebte Hosting-Anbieter für das Hosting eines Frontity-Projekts auf, darunter Vercel, Moovweb XDN und Heroku. In der Praxis scheint es jedoch, dass die meisten Frontity-Projekte auf Vercel gehostet werden, da Chris schreibt: „es ist eine perfekte Ergänzung für Vercel.“ Frontity empfiehlt Vercel nachdrücklich und hat eine praktische Schritt-für-Schritt-Anleitung zur Bereitstellung vorbereitet.
Schritt 1: Erstellen einer Produktionsversion des Frontity-Projekts
Während der Entwicklung unseres Frontity-Projekts verwenden wir den Befehl npx frontity dev. Für die Bereitstellung sollten wir eine Produktionsversion des Projekts vom Stammverzeichnis unseres Frontity-Projekts aus erstellen.
#! create production version of project
npx frontity buildDies erstellt einen Build-Ordner, „der sowohl unsere isomorphen React-App und den Frontity (Node.js)-Server des Frontity-Projekts enthält und dessen Inhalt für den Befehl npm frontity serve verwendet wird.“
Schritt 2: Erstellen eines Kontos bei Vercel
Zuerst sollten wir ein Vercel-Konto erstellen, indem wir diesem Anmeldeformular folgen, was wir mit unseren GitHub-Anmeldedaten tun können. Wir sollten uns vom Stammverzeichnis unseres Frontity-Projekts im Terminal anmelden.
#! login to vercel
npx vercel loginSchritt 3: Erstellen der Datei vercel.json
Um unsere Website auf Vercel bereitzustellen, benötigen wir die folgende vercel.json-Datei im Stammverzeichnis unseres Projekts.
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@frontity/now"
}
]
}Schritt 4: Bereitstellung auf Vercel
Schließlich stellen wir unser Projekt mit dem vercel Befehl vom Stammverzeichnis unseres Projektordners aus bereit.
#! deployment vercel
npx vercelAls Nächstes werden uns kurze, bereitstellungsbezogene Fragen gestellt.
Zusammenfassung
Wenn Sie meine anderen Artikel über Headless-WordPress-Websites mit dem Gatsby-Framework gelesen haben, hatte ich eine bewundernswerte, aber frustrierende Erfahrung, hauptsächlich aufgrund meiner eigenen technischen Fähigkeiten, um fortschrittliche Frameworks als Ein-Mann-Team zu lernen und zu warten. Dann stieß ich auf das Frontity React Framework, als ich einen Artikel auf CSS-Tricks las.
Wie wir aus diesem und Chris' Artikel gelernt haben, ist die Erstellung einer Headless-WordPress-Website mit Frontity alles in allem ziemlich einfach. Ich bin sehr beeindruckt von der einfachen Einrichtung, der optimierten Benutzeroberfläche und es scheint eine bessere Option für weniger technisch versierte Benutzer zu sein. Sie erhalten zum Beispiel alle WordPress-Inhalte, ohne eine einzige Abfrage schreiben zu müssen.
In einem Folgeartikel werden wir uns eingehend mit dem Standard-Frontity Mars-Theme beschäftigen und lernen, wie wir es anpassen können, um es zu unserem eigenen zu machen.
Danksagungen und Ressourcen
- Frontity, ein React-Framework zur Erstellung von WordPress-Themes (Frontity Blog)
- Erstellung eines Blogs mit Frontity und WordPress (Frontity Blog)
- Erste Schritte mit dem Frontity-Framework (YouTube-Video)
Ich liebe Frontity so sehr! Der einfachste und problemloseste Weg, ein React-Frontend mit einem WP-Backend bereitzustellen! :D