headless wp starter

Postlights Headless WordPress + React Starter Kit ist ein automatisiertes Toolset, das drei Dinge dreht:

1. Ein WordPress -Backend, das seine Daten über die WP Rest API und GraphQL bedient.
2. Eine von der WP GraphQL API reagierte Frontend-Frontend, die Beiträge, Seiten, Kategorien, Menüs, Suche und Benutzer anmeldet.
3. Ein weiterer serverseitiger React-Frontend mit serverseitigem React-Frontend unter Verwendung von Next.js, die von der WP-REST-API betrieben werden.

Sie können alles darüber in dieser praktischen Einführung lesen.

Was ist drinnen:

• Ein automatisiertes Installateur, der eine KernwordPress -Installation startet, die eine etablierte, stabile REST -API liefert.
• Ein Plugin, das eine neuere, in progressen GraphQL-API für WordPress enthüllt.
• Die WordPress -Plugins, die Sie für benutzerdefinierte Post -Typen und benutzerdefinierte Felder (erweiterte benutzerdefinierte Felder und benutzerdefinierte Benutzeroberfläche) einrichten müssen.
• Plugins, die diese benutzerdefinierten Felder und WordPress-Menüs in der WP-REST-API (ACF an WP-API- und WP-REST-API-V2-Menüs) freilegen.
• JWT -Authentifizierungs -Plugins: JWT WP REST und JWT WP GraphQl.
• Der gesamte Starter-WordPress-Themencode und die Einstellungen sind kopflos, einschließlich ziemlich Permalinks, CORS Allow-Origin Header und nützlichen Protokollierungsfunktionen für das einfache Debuggen.
• Ein Mechanismus zum einfachen Importieren von Daten aus einer vorhandenen WordPress -Installation überall im Web mit WP Migrate DB Pro und deren dazugehörigen Plugins (LIZKULION).
• Eine Probe, Starter Frontend React App, die von GraphQL betrieben wird.
• Ein weiteres Beispiel, Starter Frontend React App, das serverseitig über Next.js gerendert wird, der von der WP-REST-API betrieben wird.
• Docker -Container und -Skripte, um sie zu verwalten, um die Frontend React -Apps einfach auszuführen und das Backend lokal auszuführen oder sie mit Docker -Support an einen Hosting -Anbieter bereitzustellen.

Fangen wir an.

Installieren

Voraussetzung: Bevor Sie beginnen, müssen Sie Docker installiert. Unter Linux müssen Sie möglicherweise Docker-Compose separat installieren.

Docker Compose Builds und startet standardmäßig vier Container: db-headless , wp-headless , frontend & frontend-graphql :

 docker-compose up -d

Warten Sie ein paar Minuten , bis Docker zum ersten Mal die Dienste erstellt. Nach dem ersten Bau sollte das Start nur einige Sekunden dauern.

Sie können der Docker -Ausgabe folgen, um den Erstellungsfortschritt und die Protokolle anzuzeigen:

 docker-compose logs -f

Alternativ können Sie einige nützliche Docker -Tools wie Kitematic und / oder VSCODE Docker -Plugin verwenden, um Protokolle zu befolgen, Container und Bilder zu starten / stoppen / entfernen.

Optional: Sie können das Frontend lokal ausführen, während WordPress immer noch auf Docker ausgeführt wird:

 docker-compose up -d wp-headless
cd frontend && yarn && yarn start

Sobald die Container ausgeführt werden, können Sie die React -Frontenden und den Backend WordPress Admin in Ihrem Browser besuchen.

Frontend

Dieses Starter -Kit enthält zwei Frontend -Container:

• frontend Container, der von der WP-REST 3000 API betrieben wird
• frontend-graphql Container von GraphQL, ausgesetzt am Port 3001 : http: // localhost: 3001

So sieht der Frontend aus:

Sie können dem yarn start folgen, indem Sie den Befehl Docker-Compose- logs ausführen, gefolgt vom Containernamen. Zum Beispiel:

 docker-compose logs -f frontend

Wenn Sie diesen Prozess neu starten müssen, starten Sie den Container neu:

 docker-compose restart frontend

PS: Durchsuchen der nächsten. In einer Produktionsumgebung würde die Seitenbelastung erheblich verbessert werden.

Backend

Der wp-headless Container enthüllt Apache für Host-Port 8080 :

• Dashboard: http: // localhost: 8080/wp-admin (Standard-Anmeldeinformationen postlight / postlight )
• REST-API: http: // localhost: 8080/wp-json
• GraphQL API: http: // localhost: 8080/graphql

Dieser Container enthält einige Entwicklungstools:

 docker exec wp-headless composer --help
docker exec wp-headless phpcbf --help
docker exec wp-headless phpcs --help
docker exec wp-headless phpunit --help
docker exec wp-headless wp --info

Apache/PHP-Protokolle sind über docker-compose logs -f wp-headless verfügbar.

Datenbank

Der db-headless Container enthält MySQL am Host-Port 3307 :

 mysql -uwp_headless -pwp_headless -h127.0.0.1 -P3307 wp_headless

Sie können auch eine MySQL -Shell auf dem Behälter ausführen:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless

Neu installieren/importieren

Um WordPress von Grund auf neu zu installieren, laufen Sie:

 docker exec wp-headless wp db reset --yes && docker exec wp-headless install_wordpress

Um Daten aus einem MySQLDump mit mysql zu importieren, laufen Sie:

 docker exec db-headless mysql -hdb-headless -uwp_headless -pwp_headless wp_headless < example.sql
docker exec wp-headless wp search-replace https://example.com http://localhost:8080

Daten aus einer anderen WordPress -Installation importieren

Sie können ein Plugin namens WP Migrate DB Pro verwenden, um eine Verbindung zu einer anderen WordPress -Installation herzustellen und Daten daraus zu importieren. (Eine Pro -Lizenz ist erforderlich.)

Zuerst setzen Sie MIGRATEDB_LICENSE & MIGRATEDB_FROM in .env und erstellen Sie Container neu, um die Änderungen zu ergreifen.

 docker-compose up -d

Führen Sie dann das Importskript aus:

 docker exec wp-headless migratedb_import

Wenn Sie fortgeschrittenere Funktionen benötigen, lesen Sie die verfügbaren WP-CLI-Befehle:

 docker exec wp-headless wp help migratedb

Erweitern Sie die Rest- und GraphQL -APIs

Zu diesem Zeitpunkt können Sie im WordPress -Administrator benutzerdefinierte Felder einrichten und gegebenenfalls benutzerdefinierte REST -API -Endpunkte im postlight -Headpress -Starter -Thema erstellen.

Der primäre Themencode befindet sich in wordpress/wp-content/themes/postlight-headless-wp .

Sie können auch die GraphQL-API ändern und erweitern, ein Beispiel für das Erstellen eines benutzerdefinierten Typs und die Registrierung eines Resolvers finden Sie in: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

Rest & GraphQL JWT -Authentifizierung

Um WordPress wp-config.php Benutzer die Möglichkeit zu geben, sich über die Frontend-App anzumelden

Für die Rest -API:

 define('JWT_AUTH_SECRET_KEY', 'your-secret-here');

Für die GraphQL -API:

 define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-here');

Lesen Sie die Dokumentation JWT REST und JWT GraphQL für weitere Informationen.

Linie

Denken Sie daran, Ihren Code während des Weges zu finsen.

Um WordPress -Themenmodifikationen zu verleihen, können Sie Php_CodesNiffer wie folgt verwenden:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcs -v .

Möglicherweise versuchen Sie auch, PHPCS -Fehler zu automatisieren:

 docker exec -w /var/www/html/wp-content/themes/postlight-headless-wp wp-headless phpcbf -v .

Um die JavaScript -Apps auszurotten und zu formatieren, sind sowohl schönere als auch eslint -Konfigurationsdateien enthalten.

Hosting

Die meisten WordPress -Hosts hosten auch keine Knotenanwendungen aus. Wenn es also Zeit ist, live zu gehen, müssen Sie einen Hosting -Service für den Frontend finden.

Aus diesem Grund haben wir die Frontend -App in einem Docker -Container verpackt, der an einen Hosting -Anbieter mit Docker -Support wie Amazon Web Services oder Google Cloud -Plattform bereitgestellt werden kann. Für eine schnelle, leichtere Alternative lesen Sie jetzt.

Fehlerbehebung bei häufigsten Fehlern

Breaking Change Alert - Docker

Wenn Sie das Projekt bereits eingerichtet und dann auf ein neuer als 99b4d7b aktualisiert haben, müssen Sie den Installationsprozess erneut durchlaufen, da das Projekt nach Docker migriert wurde. Sie müssen auch MySQL -Daten in den neuen MySQL DB -Container migrieren.

Docker Caching

In einigen Fällen müssen Sie das wp-headless Bild (nicht nur der Behälter) löschen und wieder aufbauen.

CORS -Fehler

Wenn Sie Ihre WordPress-Installation bereitgestellt haben und CORS-Probleme haben, sollten Sie mit Ihrer Frontend Origin URL Ihre Frontend Origin URL aktualisieren /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php -content/themes/postlight-headless-wp/inc/frontend-origin.php aktualisieren.

Sehen Sie noch etwas, das Sie hier hinzufügen möchten? Bitte senden Sie eine Pull -Anfrage!

---

? Ein Laborsprojekt von Ihren Freunden bei Postlight. Happy Coding!