So erstellen Sie eine Headless-WordPress-Site mit Faust.js (in 9 Schritten)

Wenn Sie WordPress Headless ausführen müssen, ist ein hochwertiges Framework ein Muss. Aber selbst mit ein wenig Hilfe durch ein modernes Framework können Sie immer noch Schwierigkeiten haben, Ihre Inhalte effektiv in der Vorschau anzuzeigen.

Hier kommt Faust.js ins Spiel. Dieses neue Framework nutzt die Leistungsfähigkeit von Next.js und React und kombiniert dies mit praktischen Post-Preview-Funktionen. Mit Faust.js können Sie Ihre Inhalte anzeigen, bevor Sie auf Veröffentlichen klicken, genau wie bei einer herkömmlichen WordPress-Website.

In diesem Artikel werden wir untersuchen, warum Sie Faust.js für Ihr nächstes Headless-WordPress-Projekt verwenden möchten. Dann zeigen wir Ihnen, wie Sie dieses neue Framework einrichten und ein einfaches Frontend bauen. Lass uns anfangen!

Warum Sie vielleicht eine Headless-WordPress-Site betreiben möchten

Das typische Content Management System (CMS) besteht aus einem Frontend und einem Backend, und WordPress ist da keine Ausnahme. Es ist jedoch möglich, WordPress Headless auszuführen.

Der „Kopf“ bezieht sich auf die Präsentationsschicht, während der „Körper“ der Inhalt gespeichert und verfasst wird. Indem Sie das Frontend (Head) vom Backend (Body) entfernen, können Sie WordPress Headless ausführen.

Bei einem Headless-Projekt verwenden Sie weiterhin das vertraute WordPress-Dashboard und die Tools. Es steht Ihnen jedoch frei, Ihr eigenes Frontend zu entwerfen, unabhängig von den üblichen Einschränkungen von WordPress. Dadurch haben Sie die vollständige Kontrolle darüber, wie Ihre Inhalte angezeigt werden.

Das Erstellen eines eigenen Frontends mag spannend sein, ist aber nicht besonders einfach. Glücklicherweise gibt es Werkzeuge, die einen Großteil der schweren Arbeit für Sie erledigen können.

Viele Headless-CMS-Benutzer entscheiden sich dafür, die Hilfe eines Tools wie Frontity, des Gatsby-Frameworks oder des auf React basierenden Next.js in Anspruch zu nehmen. Traditionell war es jedoch schwierig, Beiträge und Seiten auf einer Headless-Site in der Vorschau anzuzeigen, selbst wenn ein Framework verwendet wurde. Hier kommt Faust.js ins Spiel:

Dieses Framework baut auf Next.js und React auf und ist bestrebt, ein Veröffentlichungserlebnis zu bieten, das mit traditionellem WordPress übereinstimmt. Um dies zu erreichen, bietet Faust.js nahtlose Inhaltsvorschauen.

Faust.js verwendet auch einen GraphQL-Client. Auf diese Weise können Sie die WordPress WPGraphQL-API abfragen, ohne die GraphQL-Abfragen im Voraus kennen zu müssen.

Darüber hinaus bietet Faust.js integrierte Mechanismen zur Authentifizierung Ihres WordPress-Backends. Dies macht es einfach, mit Ihrem Headless-CMS Gated Content und E-Commerce-Sites zu erstellen.

So erstellen Sie eine Headless-WordPress-Site mit Faust.js (in 9 Schritten)

Nachdem wir nun behandelt haben, was Faust.js ist und einige seiner wichtigsten Vorteile, sehen wir uns an, wie Sie mit diesem Framework beginnen können. So erstellen Sie in neun Schritten ein Headless-CMS mit Faust.js.

Schritt 1: Bereiten Sie Ihre Entwicklungsumgebung vor

Bevor Sie beginnen, müssen Sie Node.js und den Node Package Manager (NPM) installieren. Außerdem benötigen Sie eine WordPress-Installation, die Sie entweder lokal oder auf einem Webserver hosten können.

Sie werden auch einige WordPress-Plugins verwenden. Zunächst verwandelt das WPGraphQL-Plugin WordPress in eine GraphQL-API, die für Ihr Projekt bereit ist.

Sie benötigen außerdem WPE Headless. Dieses Plugin bietet einige zusätzliche Funktionen, die dazu beitragen, dass WordPress als Headless-CMS korrekt funktioniert. Sie können die neueste Version dieses Plugins herunterladen und dann in Ihr WordPress-Dashboard hochladen.

Um Ihnen den Einstieg in das Faust.js-Framework zu erleichtern, verwenden Sie das Starterprojekt create-next-app. Dadurch wird eine bootstrapped Next.js-Anwendung generiert, in der alle erforderlichen Konfigurationen und Dateien bereits vorhanden sind. Diese können Sie dann als Basis für Ihr headless Faust.js-Projekt verwenden.

Sie können create-next-app mit dem npx-Tool installieren, das mit NPM gebündelt ist. Führen Sie in Ihrem lokalen Terminal- oder Eingabeaufforderungsfenster Folgendes aus:

 npx create-next-app faust-headless-demo

Dadurch wird ein Faust-Headless-Demo- Projekt im lokalen Benutzerverzeichnis Ihres Computers erstellt. Sobald dieser Vorgang abgeschlossen ist, fordert Sie das Terminal auf, Ihre Next.js-Anwendung mit den folgenden Befehlen zu starten:

 cd faust-headless-demo npm run dev

Herzlichen Glückwunsch – Sie haben gerade erfolgreich ein Next.js-Projekt erstellt! Um sich diese Anwendung anzusehen, gehen Sie in Ihrem Browser zu „http://localhost:3000“:

Sie sollten jetzt die Next.js-Startseite sehen. Wenn Sie auf eine Fehlermeldung stoßen, versuchen Sie, den Befehl npm run dev erneut auszuführen, wodurch das Problem möglicherweise behoben wird.

Schritt 2: Richten Sie TypeScript ein

Faust.js verwendet TypeScript, eine typisierte Obermenge von JavaScript, die eine Typüberprüfung zur Kompilierzeit hinzufügt. Dadurch können Sie Fehler zur Kompilierzeit abfangen, anstatt bis zur Laufzeit zu warten. Um TypeScript zu installieren, führen Sie die folgenden Befehle in Ihrem Terminal aus:

 npm install --save-dev @types/react npm install typescript --save-dev

Jetzt müssen Sie eine tsconfig.json -Datei generieren. Diese Datei gibt die Compileroptionen an, die zum Ausführen Ihres Projekts erforderlich sind:

 npx tsc --init

Nachdem Sie TypeScript eingerichtet haben, müssen Sie einige JavaScript-Dateien in das TypeScript-Format konvertieren. Navigieren Sie zu Ihrem lokalen Benutzerverzeichnis , das ein neues faust-headless-demo- Verzeichnis enthalten sollte:

Öffnen Sie in faust -headless-demo das Seitenverzeichnis. Sie können die Datei _app.js jetzt in _app.tsx umbenennen und ihren Inhalt durch Folgendes ersetzen:

 import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;

Als nächstes benennen Sie pages/index.js in pages/index.tsx um . Ihre Next.js-App ist jetzt ordnungsgemäß für TypeScript konfiguriert.

Schritt 3: Erstellen Sie eine wiederverwendbare Reaktionskomponente

An dieser Stelle können Sie Ihr Projekt auf die Probe stellen, indem Sie einige Dummy-Inhalte anzeigen. Erstellen Sie in Ihrem lokalen Seitenverzeichnis eine posts.tsx -Datei:

In diese Datei werden Sie Text eingeben. Wenn der folgende Inhalt in Ihrem Browser angezeigt wird, wissen Sie, dass Ihre Next.js-Anwendung richtig konfiguriert ist:

 export default function PostsPage() { return <h1>The posts page</h1>; }

Navigieren Sie in Ihrem Browser zu „http://localhost:3000/posts“. Sie sollten nun diesen Dummy-Inhalt sehen:

Sobald Sie Ihr Setup verifiziert haben, ist der nächste Schritt das Erstellen einer grundlegenden React-Komponente. Sie werden diese Komponente schließlich verwenden, um eine Liste aller Ihrer WordPress-Beiträge anzuzeigen.

Es hat sich bewährt, alle Ihre React-Komponenten einem dedizierten Verzeichnis hinzuzufügen. Navigieren Sie in diesem Sinne zum Stammverzeichnis Ihres Projekts und erstellen Sie einen Komponentenordner :

Erstellen Sie in diesem Verzeichnis eine post.tsx -Datei. Eine React-Komponente kann über Komponentenprops Daten von der übergeordneten Komponente empfangen. In diesem Beispiel übergeben Sie Titel und Inhalt jedes Beitrags an die Beitragskomponente.

In TypeScript können Sie dies erreichen, indem Sie eine Schnittstelle erstellen, um die Daten zuzuordnen, die Sie übergeben möchten. Fügen Sie in Ihrer posts.tsx -Datei Folgendes hinzu:

 export interface PostProps { title: string; content: string; } export default function Post(props: PostProps) { const { title, content } = props; return ( <article> <h1>{title}</h1> <p>{content}</p> </article> ); }

Sie haben jetzt eine wiederverwendbare React-Komponente. Der nächste Schritt ist die Verwendung dieser Komponente auf Ihrer Beitragsseite.

Schritt 4: Zeigen Sie eine Liste der Beiträge an

Öffnen Sie zunächst die Datei pages/posts.tsx . An dieser Stelle werden Sie einfach einige gefälschte Daten bereitstellen, die Sie in einem Listenformat anzeigen:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod, lacus felis tincidunt ante, sit amet eleifend metus enim in orci. Vivamus tincidunt eleifend leo, at scelerisque lacus viverra ac.', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.', }, ]; export default function PostsPage() { return <h1>My posts page</h1>; }

Sie können eine Liste mit Posts erstellen, indem Sie das Posts-Array durchlaufen. Dazu müssen Sie für jedes Element eine Post-Komponente rendern:

 import Post from '../components/post'; const posts = [ { id: 1, title: 'Lorem ipsum.', content: 'nteger porttitor, dui id dapibus euismod....', }, { id: 2, title: 'Lorem ipsum.', content: 'In lacinia ipsum et lorem varius, eu porttitor eros porttitor...', }, ]; export default function PostsPage() { return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Speichern Sie Ihre Änderungen und schließen Sie diese Datei. Gehen Sie dann zu „http://localhost:3000/posts“:

Dieser Tab sollte nun eine Liste mit gefälschten Beiträgen anzeigen. Sobald Sie Faust.js mit dem WordPress-Backend verbunden haben, verwenden Sie diese React-Komponente, um eine Liste der realen Beiträge Ihrer Website anzuzeigen.

Schritt 5: Konfigurieren Sie das Faust.js-Framework

Endlich können Sie das Faust.js-Framework einrichten. Installieren Sie zunächst die Produktions- und Entwicklungsabhängigkeiten, indem Sie die folgenden Befehle ausführen:

 npm install --save-prod @faustjs/core @faustjs/next npm install --save-dev @gqty/cli dotenv

Navigieren Sie dann zum Stammverzeichnis Ihres Projekts. Erstellen Sie in diesem Ordner eine neue faust.config.js -Datei:

Sie verwenden diese Datei, um Faust.js mit Ihrem WordPress-Backend zu verbinden. Sie können nun folgenden Code eingeben:

 import { config as coreConfig } from '@faustjs/core'; if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) { console.error( 'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env.local file?', ); } /** * @type {import("@faustjs/core").Config} */ export default coreConfig({ wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL, apiClientSecret: process.env.WP_HEADLESS_SECRET, });

In diesem Verzeichnis müssen Sie auch eine .env.local -Datei erstellen. Dies enthält alle Ihre Umgebungsvariablen:

Fügen Sie in .env.local den folgenden Code hinzu. Stellen Sie sicher, dass Sie your-site durch Ihre eigene URL ersetzen:

 NEXT_PUBLIC_WORDPRESS_URL=http://your-site.com WP_HEADLESS_SECRET=YOUR_PLUGIN_SECRET

Außerdem müssen Sie YOUR_PLUGIN_SECRET durch das kopflose Geheimnis Ihrer Website ersetzen. Sie finden diese Informationen, indem Sie in Ihrem WordPress-Dashboard zu Einstellungen > Headless navigieren:

Faust.js wird dieses kopflose Geheimnis verwenden, um seine Anfragen an WordPress zu authentifizieren. Dadurch ist es möglich, Entwurfsinhalte auf Ihrem Frontend in der Vorschau anzuzeigen.

Schritt 6: Konfigurieren Sie Ihren GraphQL-Client für Faust.js

Faust.js verwendet GQty als GraphQL-Client. Um GQty zu konfigurieren, erstellen Sie eine gqty.config.js -Datei im Stammverzeichnis Ihres Projekts:

Sie können diese Datei jetzt zum Bearbeiten öffnen. Kopieren Sie in gqty.config.js Folgendes und fügen Sie es ein:

 require('dotenv').config(); /** * @type {import("@gqty/cli").GQtyConfig} */ const config = { react: false, scalarTypes: { DateTime: 'string' }, introspection: { endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`, headers: {}, }, destination: './client/index.ts', subscriptions: false, javascriptOutput: false, }; console.log(`Using "${config.introspection.endpoint}" to generate schema...`); module.exports = config;

Der nächste Schritt ist das Erstellen eines GQty-Clients, mit dem Sie die Daten Ihrer Website abfragen. Erstellen Sie im Stammverzeichnis Ihres Projekts ein neues Client- Verzeichnis. Erstellen Sie in diesem Ordner eine index.ts -Datei, die den folgenden Code enthält:

 import type { IncomingMessage } from 'http'; import { getClient } from '@faustjs/next'; import { generatedSchema, scalarsEnumsHash, GeneratedSchema, SchemaObjectTypes, SchemaObjectTypesNames, } from './schema.generated'; export const client = getClient< GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes >({ schema: generatedSchema, scalarsEnumsHash, }); export function serverClient(req: IncomingMessage) { return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({ schema: generatedSchema, scalarsEnumsHash, context: req, }); } export * from './schema.generated';

Sie können jetzt Ihre Änderungen speichern und die Datei index.ts schließen. Nachdem Sie nun alle Teile an Ort und Stelle haben, können Sie das GraphQL-Schema generieren.

Schritt 7: Führen Sie das Generate-Skript aus

Im nächsten Schritt fügen Sie Ihrer package.json -Datei ein Generate-Skript hinzu. Dieses Skript generiert das erforderliche Schema basierend auf der Struktur Ihrer WordPress-Site.

Navigieren Sie zum Hinzufügen dieses Skripts zum Stammordner Ihres Projekts und öffnen Sie die Datei „ package.json “. Sie können nun das Generate -Skript zum ersten Codeblock hinzufügen:

 { "name": "fause-headless-demo", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", //Add the following// "generate": "gqty generate" },

Bevor Sie dieses Skript ausführen, müssen Sie Public Introspection vorübergehend für Ihre Website aktivieren. Navigieren Sie im WordPress-Dashboard zu GraphQL > Einstellungen . Scrollen Sie dann zu Enable Public Introspection und aktivieren Sie das zugehörige Kontrollkästchen:

Klicken Sie auf Änderungen speichern . Sie können jetzt das Generate -Skript ausführen, indem Sie den folgenden Befehl in Ihr Terminal eingeben:

 npm run generate

Dieses Skript erstellt eine client/schema.generated.ts -Datei. An dieser Stelle können Sie Public Introspection in Ihrem WordPress-Dashboard deaktivieren.

Schritt 8: Definieren Sie eine FaustProvider-Komponente und einen Hook

Jetzt müssen Sie Ihre Next.js-Anwendung mit der integrierten <FaustProvider> -Komponente umschließen. Diese React-Komponente höherer Ordnung stellt Faust.js den Kontext zur Verfügung, den es zum Abrufen und Zwischenspeichern von Daten benötigt.

Öffnen Sie dazu die Datei pages/_app.tsx Ihres Projekts. Sie können den Inhalt dann durch Folgendes ersetzen:

 import '../faust.config'; import '../styles/globals.css'; import type { AppProps /*, AppContext */ } from 'next/app'; import { FaustProvider } from '@faustjs/next'; import { client } from '../client'; function MyApp({ Component, pageProps }: AppProps) { return ( <FaustProvider client={client} pageProps={pageProps}> <Component {...pageProps} /> </FaustProvider> ); } export default MyApp;

Sie können jetzt Daten vom WordPress-Backend abfragen. Sie verwenden den usePosts- Hook, der eine Standardschnittstelle bereitstellt, die eine Liste von Posts von der Headless-WordPress-API abruft.

Öffnen Sie das Verzeichnis pages/posts.tsx und löschen Sie den gesamten Boilerplate-Code von Lorem Lipsum . Sie können dann den usePosts- Hook implementieren:

 import { client } from '../client'; import Post from '../components/post'; export default function PostsPage() { const { usePosts } = client; const posts = usePosts()?.nodes; return ( <div> <h1>My posts</h1> {posts.map((post) => ( <Post key={post.id} title={post.title} content={post.content} /> ))} </div> ); }

Die von Ihnen generierte Schemadatei exportiert einen Post-Typ. Dies bedeutet, dass Sie diesen Typ verwenden können, um die Requisiten der Post-Komponente zu definieren. Um eine Post-Prop zu akzeptieren, öffnen Sie die Datei components/post.tsx und fügen Sie Folgendes hinzu:

 import { Post as PostType } from '../client'; export interface PostProps { post: PostType; } export default function Post(props: PostProps) { const { post } = props; return ( <article> <h1>{post.title()}</h1> <div dangerouslySetInnerHTML={{ __html: post.content() }} /> </article> ); }

Sie können angeben, ob Sie den gerenderten Inhalt oder den Rohinhalt erhalten möchten. Im obigen Code entscheiden Sie sich für gerenderten Inhalt.

Schritt 9: Verbinden Sie Faust.js mit Ihrer WordPress-Website

Der letzte Schritt besteht darin, eine Verknüpfung zwischen Ihren Daten und der Post-Komponente herzustellen. Dazu müssen Sie der Datei posts.tsx eine einzige Codezeile hinzufügen:

 … .... …. {posts.map((post) => ( //Add the following line// <Post key={post.id} post={post} /> ))} </div> ); }

Nachdem Sie diese Änderungen vorgenommen haben, laden Sie „http://localhost:3000/posts“ in Ihren Browser. Sie sollten nun eine Liste aller Beiträge Ihrer WordPress-Website sehen:

Wenn Ihre Posts nicht erscheinen, beenden Sie den laufenden Prozess, indem Sie Ihr Terminal schließen. Öffnen Sie dann ein neues Fenster und verwenden Sie den Befehl zum Ändern des Verzeichnisses, damit das Terminal auf Ihr lokales Faust.js-Projekt zeigt (z. B.: cd /Users/username/faust-headless-demo ). Sie können dann den Entwicklungsserver starten ( npm run dev ) und versuchen, die Seite „http://localhost:3000/posts“ zu aktualisieren.

Fazit

Viele kopflose WordPress-Entwickler entscheiden sich für die Verwendung eines Frameworks. Wenn es jedoch an der Zeit ist, eine Vorschau Ihrer Inhalte anzuzeigen, zwingen Sie viele Frameworks, sich bei einer externen Website anzumelden oder Ihre Vorschauseite in einem Frame anzuzeigen.

Faust.js soll ein konsistentes, nahtloses Vorschauerlebnis bieten. Wenn Sie dieses Framework einrichten, können Sie Ihre Inhalte mit dem vertrauten WordPress-Workflow anzeigen. Sie erhalten auch Zugriff auf die vertrauten React- und Node.js-Toolsets.

Haben Sie Fragen zum Faust.js-Framework? Lassen Sie es uns im Kommentarbereich unten wissen!