headless wp starter

Le kit de démarrage WordPress + React sans tête de Postlight est un ensemble d'outils automatisé qui fera tourner trois choses:

1. Un backend WordPress qui sert ses données via l'API REST WP et GraphQL.
2. Un échantillon réagit frontend propulsé par l'API WP GraphQL, qui prend en charge les publications, les pages, les catégories, les menus, la recherche et la connexion utilisateur.
3. Un autre exemple de react rendu côté serveur Frontend en utilisant Suivant.js alimenté par l'API WP REST.

Vous pouvez tout lire dans cette introduction pratique.

Quoi qu'il y a à l'intérieur:

• Un installateur automatisé qui amorce une installation de base WordPress qui fournit une API REST établie et stable.
• Un plugin qui expose une API GraphQL plus récente et en cours pour WordPress.
• Les plugins WordPress dont vous avez besoin pour configurer des types de publication personnalisés et des champs personnalisés (champs personnalisés avancés et interface utilisateur de type post personnalisé).
• Plugins qui exposent ces champs personnalisés et ces menus WordPress dans l'API WP REST (APF à l'API WP et WP-Rest-API V2 Menus).
• JWT Authentication Plugins: JWT WP REST et JWT WP GraphQL.
• Tout le code de thème WordPress Starter et les paramètres de la tête nécessitent, y compris de jolies permaliens, des en-têtes Allow-Origin CORS et des fonctions de journalisation utiles pour un débogage facile.
• Un mécanisme pour importer facilement des données à partir d'une installation WordPress existante n'importe où sur le Web à l'aide de WP Migrate DB Pro et de ses plugins d'accompagnement (licence requise).
• Un échantillon, Starter Frontend React App propulsé par GraphQL.
• Un autre échantillon, Starter Frontend React App, côté serveur rendu via Next.js, alimenté par l'API WP REST.
• Les conteneurs et scripts Docker pour les gérer, pour exécuter facilement les applications React Frontend et le backend localement ou le déployer à n'importe quel fournisseur d'hébergement avec prise en charge Docker.

Commençons.

Installer

Préalable: Avant de commencer, vous avez besoin d'installer Docker. Sur Linux, vous devrez peut-être installer Docker-Compose séparément.

Docker Compose Builds et démarre quatre conteneurs par défaut: db-headless , wp-headless , frontend & frontend-graphql :

 docker-compose up -d

Attendez quelques minutes pour que Docker construise les services pour la première fois. Après la construction initiale, le démarrage ne doit prendre que quelques secondes.

Vous pouvez suivre la sortie Docker pour voir les progrès et les journaux de construction:

 docker-compose logs -f

Alternativement, vous pouvez utiliser des outils Docker utiles comme le plugin Docker Kitematic et / ou VScode pour suivre les journaux, démarrer / arrêter / supprimer les conteneurs et les images.

Facultatif: vous pouvez exécuter le frontend localement tandis que WordPress s'exécute toujours sur Docker:

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

Une fois les conteneurs en cours d'exécution, vous pouvez visiter les fronts React et l'administrateur WordPress backend dans votre navigateur.

L'extrémité avant

Ce kit de démarrage fournit deux conteneurs de frontend:

• Le conteneur frontend propulsé par l'API WP REST est le côté serveur rendu à l'aide de Next.js, et exposé sur le port 3000 : http: // localhost: 3000
• Contasseur frontend-graphql alimenté par GraphQL, exposé sur le port 3001 : http: // localhost: 3001

Voici à quoi ressemble le frontend:

Vous pouvez suivre la sortie yarn start en exécutant la commande Docker-Compose logs suivie du nom du conteneur. Par exemple:

 docker-compose logs -f frontend

Si vous devez redémarrer ce processus, redémarrez le conteneur:

 docker-compose restart frontend

PS: la navigation sur le frontend suivant.js en mode de développement est relativement lente en raison du fait que les pages sont en cours de construction à la demande. Dans un environnement de production, il y aurait une amélioration significative de la charge de page.

Backend

Le conteneur wp-headless expose Apache sur le port hôte 8080 :

• Tableau de bord: http: // localhost: 8080 / wp-admin (indematives par défaut postlight / postlight )
• API REST: http: // localhost: 8080 / wp-json
• API GraphQL: http: // localhost: 8080 / graphQL

Ce conteneur comprend certains outils de développement:

 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

Les journaux Apache / PHP sont disponibles via docker-compose logs -f wp-headless .

Base de données

Le conteneur db-headless expose MySQL sur le port hôte 3307 :

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

Vous pouvez également exécuter un shell mysql sur le conteneur:

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

Réinstaller / importation

Pour réinstaller WordPress à partir de zéro, exécutez:

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

Pour importer des données à partir d'un mysqldump avec mysql , exécutez:

 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

Importer des données à partir d'une autre installation WordPress

Vous pouvez utiliser un plugin appelé WP Migrate DB Pro pour se connecter à une autre installation WordPress et importer des données à partir de celui-ci. (Une licence pro sera requise.)

Pour ce faire, définissez d'abord MIGRATEDB_LICENSE & MIGRATEDB_FROM dans .env et recréez des conteneurs pour mettre en œuvre les modifications.

 docker-compose up -d

Ensuite, exécutez le script d'import:

 docker exec wp-headless migratedb_import

Si vous avez besoin de fonctionnalités plus avancées, consultez les commandes WP-CLI disponibles:

 docker exec wp-headless wp help migratedb

Étendre les API de reste et graphQL

À ce stade, vous pouvez commencer à configurer des champs personnalisés dans l'administrateur WordPress et, si nécessaire, créer des points de terminaison API REST personnalisés dans le thème de démarrage WordPress sans tête Postlight.

Le code de thème principal est situé dans wordpress/wp-content/themes/postlight-headless-wp .

Vous pouvez également modifier et étendre l'API GraphQL, un exemple de création d'un type personnalisé et d'enregistrement d'un résolveur est situé dans: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

Authentification REST & GraphQL JWT

Pour donner aux utilisateurs WordPress la possibilité de se connecter via l'application Frontend, utilisez quelque chose comme le générateur de sel WordPress pour générer un secret pour JWT, puis définissez-le dans wp-config.php

Pour l'API REST:

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

Pour l'API GraphQL:

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

Assurez-vous de lire la documentation JWT REST et JWT GraphQL pour plus d'informations.

Libellé

N'oubliez pas de mener votre code au fur et à mesure.

Pour les modifications de thème WordPress Lint, vous pouvez utiliser Php_codesniffer comme ceci:

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

Vous pouvez également tenter d'autofixer les erreurs PHPCS:

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

Pour pelucher et formater les applications JavaScript, les fichiers de configuration plus beaux et Eslint sont inclus.

Hébergement

La plupart des hôtes WordPress ne sont pas également des applications de nœud hôte, donc quand il est temps de passer en ligne, vous devrez trouver un service d'hébergement pour le frontend.

C'est pourquoi nous avons emballé l'application Frontend dans un conteneur Docker, qui peut être déployé dans un fournisseur d'hébergement avec support Docker comme Amazon Web Services ou Google Cloud Platform. Pour une alternative rapide et plus facile, consultez maintenant.

Dépannage des erreurs courantes

Breaking Change Alert - Docker

Si vous aviez déjà la configuration du projet, puis mis à jour vers un engagement plus récent que 99b4d7b , vous devrez à nouveau passer par le processus d'installation car le projet a été migré vers Docker. Vous devrez également migrer les données MySQL vers le nouveau conteneur MySQL DB.

Cache de docker

Dans certains cas, vous devez supprimer l'image wp-headless (non seulement le conteneur) et la reconstruire.

Erreurs CORS

Si vous avez déployé votre installation WordPress et que vous avez des problèmes COR, assurez-vous de mettre à jour /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php avec votre URL d'origine frontal.

Vous voyez autre chose que vous aimeriez ajouter ici? Veuillez envoyer une demande de traction!

---

? Un projet de laboratoire de vos amis à Postlight. Codage heureux!