Drupal 8 desacoplado y Gatsby.JS: el dúo de alta velocidad

A nuestro equipo le encanta explorar y utilizar las últimas tendencias en desarrollo, una de las cuales es la arquitectura Drupal desacoplada. Nuestra publicación anterior se dedicó al uso de Drupal desacoplado con JSON.API, y el héroe de nuestra historia de hoy será "el Gran Gatsby". ¿Suena como el famoso héroe de los libros? No, Gatsby.JS es una nueva y popular herramienta de JavaScript, ¡pero promete ser igualmente famosa y merece cien libros! En esta publicación, discutiremos su principio de funcionamiento y los beneficios de usar Drupal 8 y Gatsby.JS desacoplados. Y, por supuesto, siempre puede confiar en nuestros expertos en Drupal para implementarlo todo.

Gatsby.JS: qué es y cómo funciona

Gatsby.JS se define como un generador de sitios estáticos, pero se acerca a un marco de front-end en sus capacidades. Gatsby se basa en herramientas de front-end muy calientes, algunas de las cuales son:

• React.JS : la biblioteca de JavaScript increíblemente popular para crear interfaces complejas
• GraphQL : el lenguaje de consulta súper eficiente
• Webpack : el gran paquete de módulos de JavaScript

Gatsby.JS está diseñado para construir sitios estáticos ultrarrápidos. Obtiene los datos de absolutamente cualquier fuente y genera contenido estático usando GraphQL. En este momento, hay más de 500 complementos de fuentes para establecer la conexión entre fuentes de datos particulares y Gatsby. Las fuentes incluyen YouTube, Twitter, Hubspot, Shopify, Trello, Vimeo, Google Sheets, sistemas de administración de contenido como Drupal, WordPress, etc.

Drupal 8 desacoplado y Gatsby.JS: el gran dúo y sus bondades

Una de las combinaciones más populares y beneficiosas de la actualidad es Gatsby y Drupal 8. De acuerdo con la arquitectura Drupal desacoplada o sin cabeza, Drupal sirve solo como backend, mientras que Gatsby.JS maneja la capa de presentación.

Drupal 8 y Gatsby.JS son de código abierto, tienen una comunidad grande y activa y un enorme ecosistema de módulos adicionales o complementos. Y Drupal 8 tiene servicios web integrados para que la integración sea muy sencilla.

¿Qué hace que esta combinación sea tan beneficiosa? La simplicidad y la velocidad de un sitio estático se combinan a la perfección con la potencia y flexibilidad del backend proporcionado por Drupal 8 CMS. Estas son al menos algunas de las características que obtenemos al final:

• Velocidad inigualable. Gatsby.JS precarga todas las páginas del sitio web en lugar de consultar la base de datos cada vez que lo solicite, lo que hace que la navegación sea agradable y sorprendentemente rápida. Gatsby es un generador estático de PWA (aplicación web progresiva). Obtiene eficientemente solo los archivos críticos HTML, CSS y JS.
• Configuración fácil. No se necesitarán procesos de implementación y configuración engorrosos con Gatsby. Construye su sitio como archivos estáticos que se pueden implementar rápidamente en cualquier lugar.
• Grandes características de personalización. Las combinaciones de Drupal y Gatsby pueden presentar increíbles capacidades de personalización y autenticación del usuario.
• Impresionante edición de contenido. Por lo general, los generadores de sitios estáticos necesitan escribir contenido en Markdown, lo que podría resultar engorroso para los editores de contenido. ¡Pero el problema se resuelve con Drupal 8 como backend! Las funciones de creación de contenido de Drupal 8 son una alegría para cualquier editor de contenido.

Uno de los ejemplos del uso desacoplado de Drupal 8 y Gatsby.JS es el sitio de demostración Umami Food Magazine. El sitio se basa en la distribución de Drupal sin cabeza Contenta CMS con Gatsby.JS.

Si esto parece lo suficientemente apetecible, comuníquese con nuestro equipo de Drupal ahora mismo para combinar Drupal 8 desacoplado con Gatsby.JS para usted. O continúe leyendo sobre algunos detalles de implementación.

Algunos detalles del uso de Drupal 8 y Gatsby.JS

En la configuración desacoplada, tanto los sitios de Drupal 8 como los de Gatsby deben estar preparados para trabajar juntos. Se conectarán mediante el complemento de fuente especial de Gatsby para Drupal que obtiene datos, incluidas imágenes, de sitios web de Drupal 8 con la API JSON instalada.

Por lo tanto, es necesario instalar y habilitar la API de JSON y los módulos extras de Drupal aportados por la API de JSON, así como también habilitar el módulo de serialización principal en nuestro sitio web de Drupal.

Nuestro próximo destino es Configuración — Servicios web — Sobrescrituras de API JSON .

En Configuración , debemos asegurarnos de que el prefijo de ruta para la API de JSON sea /jsonapi . Esto es lo que el sitio de Gatsby necesitará saber.

En Personas — Roles — Permisos damos acceso a la lista de recursos de la API JSON a los usuarios con todos los roles, incluidos los anónimos.

Nuestro sitio de Drupal está listo para la integración de Gatsby y ahora debemos preparar nuestro sitio de Gatsby. Comienza con la instalación de la CLI de Gatsby:

npm install --global gatsby-cli

Luego seguimos todos los pasos de creación del sitio en la documentación "Comenzar". Gatsby también ofrece iniciadores preconfigurados para la creación de sitios.

Luego ejecutamos Gatsby con el comando, después de lo cual el sitio de Gatsby debería estar disponible en localhost:8000:

gatsby desarrollar

El complemento fuente mencionado anteriormente para Drupal debe instalarse en el sitio de Gatsby. A continuación, agregamos el fragmento de código de la documentación del complemento al archivo gatsby-config.js. La URL debe cambiarse a la de nuestro sitio de Drupal.

complementos: [
{
resolver: `gatsby-fuente-drupal`,
opciones: {
baseUrl: `https://nombre-de-nuestro-sitio.com/`,
apiBase: `api`, // opcional, por defecto es `jsonapi`
},
},
]

Luego configuramos nuestro sitio de Gatsby para obtener exactamente el contenido que necesitamos de Drupal. Necesitamos crear las páginas apropiadas en /src/pages en el sitio de Gatsby y agregar el código para importar React al archivo JS.

Y configuramos GraphQL en localhost:8000/___graphql para consultar el sitio de Drupal exactamente como queremos.

Todo culmina con el último comando para publicar nuestro sitio de Gatsby con los datos de Drupal:

construcción de gatsby

Esta es solo una breve descripción de cómo hacer que Drupal 8 funcione con Gatsby. Nuestros expertos están listos para hacer la configuración exactamente de acuerdo con sus deseos.

¡Disfruta de la combinación de Drupal 8 desacoplado y Gatsby.JS!

Si está interesado en usar Drupal 8 y Gatsby.JS desacoplados, ya sea en un proyecto existente o en uno nuevo, comuníquese con nuestros desarrolladores de Drupal. Nuestro equipo de Drupal 8 tiene una gran experiencia en la integración de terceros. Le aconsejaremos la mejor configuración desacoplada y, por supuesto, la implementaremos sin problemas. ¡Disfrutemos de las últimas y mejores tecnologías!