headless wp starter

El kit de inicio de WordPress + React sin cabeza de Postlight es un conjunto de herramientas automatizado que girará tres cosas:

1. Un backend de WordPress que sirve sus datos a través de la API REST WP y GraphQL.
2. Una muestra reaccionó frontend alimentada por la API WP GraphQL, que admite publicaciones, páginas, categorías, menús, búsqueda e inicio de sesión de usuario.
3. Otra muestra del lado del servidor de muestra reaccionó frontend usando Next.js alimentado por la API REST WP.

Puedes leer todo sobre esto en esta práctica introducción.

¿Qué hay dentro?

• Un instalador automatizado que inicia una instalación central de WordPress que proporciona una API REST establecida y estable.
• Un complemento que expone una nueva API GraphQL en progreso para WordPress.
• Los complementos de WordPress que necesita para configurar tipos de publicaciones personalizados y campos personalizados (campos personalizados avanzados y interfaz de usuario de tipo de publicación personalizada).
• Los complementos que exponen esos campos personalizados y menús de WordPress en la API REST WP (ACF a la API WP y los menús WP-Rest-API V2).
• Complementos de autenticación JWT: JWT WP REST y JWT WP GraphQL.
• Todo el código de tema y la configuración de WordPress de inicio requiere sin cabeza, incluidos enlaces de permiso permanentes, encabezados Allow-Origin CORS y funciones de registro útiles para una fácil depuración.
• Un mecanismo para importar fácilmente datos desde una instalación existente de WordPress en cualquier lugar de la web utilizando WP Migrate DB Pro y sus complementos adjuntos (la licencia requerida).
• Una muestra de la aplicación de reacción frontend de inicio alimentada por GraphQL.
• Otra muestra, la aplicación React REACT de inicio, el lado del servidor renderizado a través de Next.js, alimentado por la API REST WP.
• Contenedores y scripts de Docker para administrarlos, para ejecutar fácilmente las aplicaciones React Frontend y backend localmente o implementarlo en cualquier proveedor de alojamiento con Soporte de Docker.

Comencemos.

Instalar

Prerrequisito: antes de comenzar, necesita instalado Docker. En Linux, es posible que deba instalar Docker-Compose por separado.

Docker componen compilaciones e inicia cuatro contenedores de forma predeterminada: db-headless , wp-headless , frontend y frontend-graphql :

 docker-compose up -d

Espere unos minutos para que Docker construya los servicios por primera vez. Después de la construcción inicial, el inicio solo debe tomar unos segundos.

Puede seguir la salida de Docker para ver el progreso de la compilación y los registros:

 docker-compose logs -f

Alternativamente, puede usar algunas herramientas de Docker útiles como Kitematic y / o el complemento VSCode Docker para seguir registros, iniciar / detener / eliminar contenedores e imágenes.

Opcional: puede ejecutar el frontend localmente mientras WordPress todavía se ejecuta en Docker:

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

Una vez que se ejecutan los contenedores, puede visitar el administrador React Frontends y Backend WordPress en su navegador.

Interfaz

Este kit de inicio proporciona dos contenedores frontend:

• El contenedor frontend alimentado por la API REST WP se reproduce con el lado del servidor con Next.js y se expuso en el puerto 3000 : http: // localhost: 3000
• contenedor frontend-graphql alimentado por GraphQL, expuesto en el puerto 3001 : http: // localhost: 3001

Así es como se ve el frontend:

Puede seguir la salida yarn start ejecutando el comando Docker-Compose logs seguido del nombre del contenedor. Por ejemplo:

 docker-compose logs -f frontend

Si necesita reiniciar ese proceso, reinicie el contenedor:

 docker-compose restart frontend

PD: navegar por el siguiente interfaz de desarrollo en modo de desarrollo es relativamente lento debido al hecho de que las páginas se están construyendo a pedido. En un entorno de producción, habría una mejora significativa en la carga de la página.

Backend

El contenedor wp-headless expone Apache en el puerto host 8080 :

• Panel de control: http: // localhost: 8080/wp-admin (credenciales predeterminados postlight / postlight )
• API REST: http: // localhost: 8080/wp-json
• API GraphQL: http: // localhost: 8080/Graphql

Este contenedor incluye algunas herramientas de desarrollo:

 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

Los registros de Apache/PHP están disponibles a través de docker-compose logs -f wp-headless .

Base de datos

El contenedor db-headless expone MySQL en el puerto host 3307 :

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

También puede ejecutar un shell MySQL en el contenedor:

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

Reinstalar/importar

Para reinstalar WordPress desde cero, ejecute:

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

Para importar datos de un mysqldump con mysql , ejecute:

 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

Importar datos de otra instalación de WordPress

Puede usar un complemento llamado WP Migrate DB Pro para conectarse a otra instalación de WordPress e importar datos de él. (Se requerirá una licencia profesional).

Para hacerlo, primero establezca MIGRATEDB_LICENSE y MIGRATEDB_FROM en .env y recree contenedores para promulgar los cambios.

 docker-compose up -d

Luego ejecute el script de importación:

 docker exec wp-headless migratedb_import

Si necesita una funcionalidad más avanzada, consulte los comandos WP-CLI disponibles:

 docker exec wp-headless wp help migratedb

Extender las API de descanso y GraphQL

En este punto, puede comenzar a configurar campos personalizados en el administrador de WordPress y, si es necesario, crear puntos finales de API REST personalizados en el tema de inicio de WordPress Postlight.

El código del tema principal se encuentra en wordpress/wp-content/themes/postlight-headless-wp .

También puede modificar y extender la API GraphQL, un ejemplo de creación de un tipo personalizado y registrar un resolución se encuentra en: wordpress/wp-content/themes/postlight-headless-wp/inc/graphql .

REST & Graphql JWT Autenticación

Para dar a los usuarios de WordPress la capacidad de iniciar sesión a través de la aplicación frontend, use algo como el generador de sal de WordPress para generar un secreto para JWT, luego definirlo en wp-config.php

Para la API REST:

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

Para la API GraphQL:

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

Asegúrese de leer la documentación JWT REST y JWT GraphQL para obtener más información.

Pelusa

Recuerde pelear su código a medida que avanza.

Para las modificaciones del tema de Lint WordPress, puede usar php_codesniffer de esta manera:

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

También puede intentar autofixar errores PHPCS:

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

Para la pelusa y el formateo de las aplicaciones JavaScript, se incluyen archivos de configuración más bonitos y de Eslint.

Alojamiento

La mayoría de los hosts de WordPress tampoco alojan aplicaciones de nodo, por lo que cuando sea el momento de ponerse en marcha, necesitará encontrar un servicio de alojamiento para el frontend.

Es por eso que hemos empaquetado la aplicación Frontend en un contenedor Docker, que se puede implementar en un proveedor de alojamiento con Soporte de Docker como Amazon Web Services o Google Cloud Platform. Para una alternativa rápida y más fácil, consulte ahora.

Solución de problemas de errores comunes

Alerta de cambio de cambio - Docker

Si ya tenía el proyecto configurado y luego se actualizó a una confirmación más nueva de 99b4d7b , deberá volver a pasar por el proceso de instalación porque el proyecto se migró a Docker. También deberá migrar datos MySQL al nuevo contenedor MySQL DB.

Docker en caché

En algunos casos, debe eliminar la imagen wp-headless (no solo el contenedor) y reconstruirla.

Cors errores

Si ha implementado su instalación de WordPress y tiene problemas de CORS, asegúrese de actualizar /wordpress/wp-content/themes/postlight-headless-wp/inc/frontend-origin.php con su URL de origen frontend.

¿Ves cualquier otra cosa que quieras agregar aquí? ¡Envíe una solicitud de extracción!

---

? Un proyecto de laboratorios de sus amigos en Postlight. ¡Feliz codificación!