descabezado
Gatsby con Drupal | Trabajando con imágenes desde Drupal 9
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Tratar con imágenes de Drupal
Uno de los beneficios de usar Gatsby es su soporte integrado para la optimización de imágenes. Gatsby facilita el uso de técnicas de mejores prácticas como el desenfoque o el rastreo de svg para garantizar que las imágenes no ralenticen la carga de la página. Gatsby también proporciona utilidades que permiten a los desarrolladores solicitar una imagen en un tamaño específico o un conjunto de tamaños.
Como funciona todo esto
En un nivel alto, cuando Gatsby obtiene datos de Drupal, extrae los archivos de imagen sin procesar adjuntos a cualquier campo de imagen. Los archivos se almacenan localmente y la información se agrega a GraphQL. Los complementos gatsby-plugin-sharp y gatsby-plugin-transform trabajan juntos para exponer varias funciones de procesamiento de imágenes en GraphQL. Cuando consulta GraphQL por una imagen, puede usar estas funciones para decir: "Use esta imagen, pero devuelva todas las variantes de imagen necesarias para técnicas avanzadas de carga de imágenes, como desenfoque o marcador de posición SVG con trazado". Finalmente, los datos devueltos se pueden pasar literalmente al componente Img de gatsby-image, que contiene la lógica requerida para mostrar las imágenes.
Es una gran cantidad de lógica de visualización y manipulación de imágenes realmente compleja envuelta en un patrón reutilizable que requiere que haga muy poco trabajo adicional en su código para aumentar potencialmente drásticamente la velocidad.
Instale los complementos necesarios
Tradicionalmente, los filtros que se encargan del tratamiento de las imágenes, para trabajar con Drupal como Backend en nuestro caso, deberían ser gatsby-image, gatsby-plugin-sharp y gatsby-transformer-sharp; su funcionalidad es codificar nuestras imágenes dinámicas, extraídas desde drupal, a través de consultas con Graphql y mostrarlas, dentro de nuestra aplicación, de manera optimizada para no interferir en el tiempo de carga de nuestra web, además de añadir otras opciones disponibles como el efecto Blur, mientras se carga la imagen y convertirlas en Responsives, además de cargar diferentes tamaños, dependiendo del dispositivo desde el cual accedamos a nuestra aplicación.
Al momento de escribir este artículo, algunas cosas han cambiado, con respecto a lo que todavía se muestra en la documentación oficial de Gatsby, una de ellas es el hecho de que, si abrimos el archivo de configuración de Gatsby, encontraremos que ya están añadidos los plugins necesarios, con la novedad de que el primero de ellso, ahora se llama "gatsby-plugin-image" en lugar de "gatsby-images" y que además, se han realizado varios cambios y mejoras que implican tomarnos un tiempo para conocerlo.
Cambios a tomar en cuenta
Una de las razones relacionadas con este cambio, es el cambio en Drupal 9, del campo field_image por el campo field_media_image, que como comenté en artículos anteriores, permite añadir otros formatos además de imágenes, como videos o audios.
Este nuevo campo, pasa a ser referenciado, al igual que las taxonomías y por esta razón, al construir la consulta en Graphql, debemos tomar en cuenta que para acceder hasta la URL que utilizaremos en nuestra aplicacion, emplearemos varios niveles de anidación, que no eran necesarios con el antiguo field_image.
Otra de las aclaraciones, es que aunque en Graphql realicemos una consulta hasta llegar a la url de la imagen, cuando nuestro objetivo sea mostar dicha imagen dentro de nuestra aplicación, tendremos que sustituir algunas partes de la consulta, para emplear los recurso de Gatsby.
...GatsbyImageSharpFluid
Los tres puntos que vemos en la anterior imagen, son parte de la configuración interna de Gatsby, que compacta toda la información que hayamos seleccionado en el entorno gráfico Graphql, relacionada con nuestra imagen ej.: (src, srcset, url) y se la pasa como parámetros al plugin, para que este la complile de la manera adecuada.
Uso de los componentes de la imagen de Gatsby
El complemento Gatsby Image incluye dos componentes de imagen: uno para imágenes estáticas y otro para imágenes dinámicas. La forma más sencilla de decidir cuál necesita es preguntarse: "¿Esta imagen será la misma cada vez que se utilice el componente o la plantilla?". Si siempre será el mismo, utilice StaticImage. Si cambia, ya sea a través de datos provenientes de un CMS o de diferentes valores pasados a un componente cada vez que lo usa, entonces es una imagen dinámica y debe usar el componente GatsbyImage.
Como en nuestro caso, las imágenes que queremos utilizar serán dinámicas, porque vendrán desde nuestro Drupal 9, tendremos que optar por el componente para imágenes dinámicas.
Actualice sus consultas GraphQL
A continuación, actualice sus consultas GraphQL para hacer uso de las funciones y fragmentos proporcionados por los complementos gatsby-plugin-sharp y gatsby-transform-sharp.
En src/templates/recipe.js modifique el código para que se vea así:
importar React desde 'react';
importar {graphql} de 'gatsby';
importar casco desde 'react-helmet';
importar {makeStyles} desde "@mui/styles";
importar papel desde '@mui/material/Paper';
importar { GatsbyImage, getImage } desde "gatsby-plugin-image"
importar diseño desde '../components/layout';
importar Receta desde '../components/Recipe/Recipe';
const usarEstilos = hacerEstilos({
raíz: {
espaciado: [3, 2],
relleno: '30px',
},
});
const RecipeTemplate = (accesorios) => {
const clases = useStyles();
const { nodoRecipe: receta } = props.data;
const image = getImage(receta.relaciones.imagen.relaciones.field_media_image.localFile.childImageSharp)
consola.log(receta)
devolver (
<Diseño>
<Casco
title={`Umami - ${receta.título}`}
meta={[
{nombre: 'descripción', contenido: receta.título},
]}
/>
<Nombre de clase de papel={clases.raíz}>
<GatsbyImage image={imagen} alt={receta.título} />
<Receta
{...receta}
categoría={receta.relaciones.categoría[0].nombre}
tags={receta.relaciones.tags}
instrucciones={receta.instrucciones.procesado}
resumen={receta.resumen.procesado}
/>
</Papel>
</Diseño>
)
};
exportar plantilla de receta predeterminada;
// La variable $drupal_id aquí se obtiene del objeto "contexto" pasado a
// la API createPage() en gatsby-node.js.
//
// Tenga en cuenta también el uso de alias de nombre de campo en la consulta. esto se hace para
// ayuda a normalizar la forma de los datos de la receta.
exportar consulta const = graphql`
consulta RecipeTemplate($drupal_id: String!) {
nodoRecipe(drupal_id: {eq: $drupal_id}) {
Drupal_id,
título,
tiempo_cocina: campo_tiempo_cocina,
dificultad: campo_dificultad,
ingredientes: campo_ingredientes,
tiempo_de_preparación: tiempo_de_preparación_del_campo,
numero_de_raciones: campo_numero_de_raciones,
instrucciones: field_recipe_instruction {
procesada,
},
resumen: campo_resumen {
procesada,
},
relaciones {
categoría: campo_receta_categoría {
nombre,
}
etiquetas: campo_etiquetas {
nombre,
}
imagen: campo_media_imagen {
relaciones {
imagen_de_medios_de_campo {
archivo local {
childImageSharp {
gatsbyImageData(
ancho: 1250
marcador de posición: BORROSO
formats: [AUTO, WEBP, AVIF]
)
}
}
}
}
}
}
}
}
`;
Explicación:
1.- En la parte superior, hemos importado el nuevo Plugin
importar { GatsbyImage, getImage } desde "gatsby-plugin-image"
2.- Hemos creado la constante image, con la ruta indicada en la query que hemos actualizado, para añadir el campo de media de Drupal 9.
const image = getImage(receta.relaciones.imagen.relaciones.field_media_image.localFile.childImageSharp)
3.- Hemos añadido el nuevo componente relacionado con el tratamiento de la imagen
<GatsbyImage image={imagen} alt={receta.título} />
El resultado final es el siguiente:
Felicidades!!!
Ahora ya tienes todo el conocimiento necesario, para poder comenzar a desarrollar proyectos web, con Drupal 9 Headless y Gatsby, conjuntamente con las librerías de Material UI.
Gatsby con Drupal | Mostrando datos desde Drupal (2da Parte)
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Llegados a este punto, ya nos queda muy poco para completar un listado de artículos en nuestra página, aplicando un diseño atractivo y funcional, gracias a la implementación de Material UI, en nuestra aplicación de Gatsby y, además, gracias al plugin gatsby-source-drupal, obtenemos toda la información mostrada, desde un Drupal 9, que podremos administrar en paralelo, para ampliarlo con tipos de contenido, permisos de usuarios, taxonomías, entre otras.
En el camino hasta este momento, hemos conocido muchos de los principios, técnicas y herramientas que nos permitirán desarrollar grandes proyectos, uniendo Gatsby en la parte de frontend y Drupal 9, encargándose del backend; por lo tanto, sólo es cuestion de invertir el suficiente tiempo y esfuerzo, para convertirnos en desarrolladores competitivos y actualizados, a diferencia de muchos otros que se mantienen dentro de su zona de confort, sin continuar evolucionando.
Crear listas de contenido en Gatsby
Probablemente deba proporcionar a los usuarios listas para que puedan ver qué contenido está disponible en su aplicación. Esas listas deberán mantenerse actualizadas a medida que se agregue, edite o elimine el contenido. Esto requiere consultar GraphQL para obtener los títulos y las rutas de las páginas a las que desea vincular, y luego usar el componente Enlace proporcionado por gatsby-link para crear enlaces en los que se puede hacer clic a esas páginas en el momento de la compilación.
Page query vs. Static query
Hay dos formas diferentes de hacer que Gatsby ejecute una consulta GraphQL durante el tiempo de compilación. Cuál use depende principalmente del contexto en el que está realizando la consulta.
Page queries: Las consultas de página son variables especiales exportadas desde un archivo cuyo contenido es una consulta GraphQL envuelta con la función de etiqueta graphql proporcionada por Gatsby. Si esta variable existe, Gatsby buscará, ejecutará e inyectará automáticamente los resultados de la consulta en el componente predeterminado exportado desde el mismo archivo.
Static queries: Las consultas estáticas se implementan a través del componente StaticQuery. Proporcionan una forma para que cualquier componente emita una consulta y recupere los datos que necesita. Esto ayuda a reducir la necesidad de pasar datos por la pila como accesorios y, en cambio, permite que los componentes que lo necesitan declaren exactamente qué datos necesitan.
Agregar una lista de recetas a la página principal
Para agregar una lista de contenido a la página principal, o cualquier página generada a partir de un archivo en src/pages/ necesitamos:
- Exportar una función etiquetada en graphql que contenga nuestra consulta
- Actualizar el componente para usar los datos props.data. * De la consulta que Gatsby inyecta automáticamente para nosotros
- Utilizar el componente Enlace para todos los enlaces internos
Comenzaremos definiendo un nuevo componente RecipeCard que podemos usar para mostrar recetas en la página principal. No hay nada especial en este código; solo necesita existir para que podamos tener una buena forma de mostrar el contenido.
Así que nos colocaremos en la carpeta correspondiente y crearemos el archivo, dentro de src/components/RecipeCard/RecipeCard.js y pegaremos el código dentro de él:
import React from 'react'
import PropTypes from 'prop-types';
import { Link } from 'gatsby'
import { makeStyles } from '@mui/styles';
import Button from '@mui/material/Button';
import { Card } from '@mui/material';
import { CardActions } from '@mui/material';
import { CardContent } from '@mui/material';
import Typography from '@mui/material/Typography';
const useStyles = makeStyles(theme => ({
card: {
maxWidth: 345,
minHeight: 310,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
marginBottom: 16,
fontSize: 14,
},
pos: {
marginBottom: 12,
},
}));
const RecipeCard = (props) => {
const classes = useStyles();
const RecipeLink = props => <Link to={props.path} {...props}>Read more</Link>;
return (
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary">
{props.category}
</Typography>
<Typography variant="h5" component="h2">
{props.title}
</Typography>
<Typography className={classes.pos} color="textSecondary" dangerouslySetInnerHTML={{ __html: props.summary }} />
</CardContent>
<CardActions>
<Button size="small" path={props.path} component={RecipeLink}>Read more</Button>
</CardActions>
</Card>
);
};
RecipeCard.propTypes = {
classes: PropTypes.object.isRequired,
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
path: PropTypes.string.isRequired,
};
export default RecipeCard;
Lo que hemos hecho en este código es:
Exportamos una nueva variable llamada consulta, usando la función de etiqueta graphql, con una consulta que obteniene detalles, sobre todas las recetas que queremos mostrar en la página principal. También se conoce como page query. Esto es recogido automáticamente por Gatsby y ejecutado. Los resultados de la consulta se inyectan en el componente IndexPage como props.data.allNodeRecipe.
En el componente IndexPage recorremos los datos devueltos, utilizando props.data.allNodeRecipe.edges.map () y generamos una <RecipeCard /> para cada elemento.
Por lo tanto, cada vez que se crea el sitio con gatsby build, se actualiza el contenido de la página de inicio. Si se agregaron recetas adicionales a nuestro CMS, se introducirán en la base de datos GraphQL de Gatsby y luego se mostrarán.
Crear un componente RecipeList
Creemos también un nuevo componente RecipeList, en la ubicación src/components/RecipeList/RecipeList.js, que muestra una lista de enlaces a las 3 recetas agregadas más recientemente que podemos usar en cualquier lugar de nuestra aplicación, no solo al generar páginas. Por ejemplo, podríamos agregar una lista como esta al final de cada página de receta.
Para ello, seguiremos los siguientes pasos:
- Crear un nuevo componente RecipeList
- Utilice el componente StaticQuery proporcionado por Gatsby para ejecutar nuestra consulta; esto sigue la técnica estándar de "render prop".
- Incluya el componente RecipeList en algún lugar de nuestro sitio para que se procese
Copia y pega el siguiente código dentro del componente RecipeList.js:
import React from 'react';
import PropTypes from 'prop-types';
import { StaticQuery, Link, graphql } from "gatsby"
const RecipeListWrapper = () => (
<StaticQuery
query={graphql`
query {
allNodeRecipe(limit: 3) {
edges {
node {
drupal_id,
title,
path {
alias,
}
}
}
}
}
`}
render={data => <RecipeList recipes={data.allNodeRecipe.edges} />}
/>
);
const RecipeList = ({recipes}) => (
<ul>
{
recipes.map(({ node: recipe }) => (
<li key={recipe.drupal_id}>
<Link to={recipe.path.alias}>
{recipe.title}
</Link>
</li>
))
}
</ul>
);
RecipeList.propTypes = {
recipes: PropTypes.arrayOf(
PropTypes.shape({
node: PropTypes.shape({
drupal_id: PropTypes.string.isRequired,
title: PropTypes.string.isRequired,
path: PropTypes.shape({
alias: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
}),
).isRequired,
};
export default RecipeListWrapper;
Mostrar el listado
Edite el componente Recipe, que creamos en el artículo anterior, y agreguegaremos el nuevo componente RecipeList, en la parte inferior para mostrar recetas adicionales, para que alguien las lea cuando complete la que está viendo.
Error de Cache
Puede que algunas veces, veas un error de caché parecido al de la siguiente imagen, si esto te sucede, deten el proyecto con las teclas Ctrl + C, y luego borra el contenido de la carpeta .cache; a continuación vuelve a arrancar el proyecto con el comando develop
Gatsby con Drupal | Mostrando datos desde Drupal (1era Parte)
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
A estas alturas ya podemos presumir de que conocemos, al menos lo básico, para montar y poner en funcionamiento, una aplicación desarrollada con Gatsby conectada a Drupal 9; pero con esto a penas, habremos avanzado el primer paso, ya que todavía nos faltará lo más importante que consistirá en mostrar dichos datos de forma dinámica, dentro de nuestro Gatsby utilizando como base de datos, nuestro Drupal.
Ya hemos comprobado que si entramos en "http://gatsbymobile.lndo.site/_graphql", que es la url de nuestra instalación actual, explicada en el Capítulo Conectando Gatsby con Drupal 9, accederemos al panel gráfico de GraphsQL y podremos comenzar a crear nuestras propias consultas, seleccionando los campos que nos hagan falta y a continuación, presionando el botón del Play, colocado en la parte superior, se mostrarán los contenidos relacionados en la pantalla de la derecha.
Si todo funcionó, deberías poder ejecutar consultas aquí que muestren los datos que Gatsby extrajo de Drupal. Ten en cuenta que Gatsby crea colecciones GraphQL, a partir del contenido de Drupal, siguiendo una convención de nomenclatura específica: allNode {CONTENT-TYPE}. El patrón es el texto "allNode", seguido del nombre de la máquina del tipo de contenido de Drupal.
Puedes probar copiando el siguiente código y pegándolo en el apartado de Queries, a continuación presiona el botón Play y verás que el resultado será el listado de nodos, con su Título, Id y el campo Body, la fecha de creación del contenido y su url, todo desde Drupal.
query MiQuery {
allNodeArticle {
edges {
node {
id
title
body {
processed
}
created
path {
alias
}
}
}
}
}
El módulo gatsby-source-drupal permite realizar, diversas configuraciones como filtros, cargas rápidas, autenticación entre Drupal y Gatsby, así como otras muchas que puedes conocer visitando su Documentación de Gatsby
UUID vs drupal_id vs drupal_internal__nid
Cada nodo de Drupal en la base de datos GraphQL de Gatsby tiene 3 ID únicos diferentes que debe tener en cuenta:
uuid: Esto lo genera Gatsby al obtener contenido y es único internamente, pero no tiene ninguna relación con Drupal.drupal_id: Este es un UUID generado por Drupal, es único tanto en Gatsby como en Drupal, y debe preferirse cuando necesite una forma única de hacer referencia al contenido de Drupal. Esto asegura que la ID que se usa dentro de Gatsby sea también la misma que la que usa Drupal y hace que sea más fácil razonardrupal_internal__nid: Este es el node.nid de Drupal, en la mayoría de los casos puede hacer referencia a la entidad en Drupal a través del campo drupal_id, pero en los casos en que lo necesite, puede usarlo.
Drupal entity reference fields
En el modelo de datos de Drupal, las piezas de contenido (entidades) pueden declarar relaciones con otras piezas de contenido utilizando lo que se conoce como referencias de entidad. Cuando Gatsby obtiene datos de Drupal, estas referencias de entidad se migran a las "relationships" de GraphQL, por lo que no ve esos campos donde podría esperarlos en el esquema GraphQL. No se preocupe, todavía están ahí, solo necesita mirar en el campo "relationships".
Un ejemplo de relaciones, podemos encotrarlo al intentar utilizar imágenes, ya que el campo "media" permite hacer referencia a diversos tipos de contenido, como video, audio e imágenes.
Añadir Material UI para modificar el aspecto de Gastby
Para darle a nuestra aplicación algo de estilo, usaremos la popular biblioteca de Material UI component. Es un conjunto de componentes de React que implementan el lenguaje de diseño de la interfaz de usuario de Google Material.
NOTA:
Para evitar posibles errores, antes de instalar Material UI, asegúrate de actualizar tu versión de Gatsby Haz clic aqui
Puedes comprobar la versión que de gatsby que tienes instalada, ejecutando el siguiente comando:
lando npm outdated
En pantalla verás un resultado parecido a la siguiente imagen, con las versiones actuales y las que deberías actualizar:
Y para actualizar a la versión más reciente, ejecutar el siguiente comando:
lando npm i gatsby@latest
Instalar la biblioteca de componentes de Material UI
Si estamos ejecutando Gatsby, antes de poder instalar, tendremos que detenerlo utilizando la combinación de teclas:
Ctrl + C
La forma más rápida de comenzar a usar Material UI con Gatsby es a través del gatsby-plugin-material-ui plugin. Para ello lo primero que tendremo que hacer es descargarlo utilizando el siguiente comando, al igual que hicimos con el gatsby-drupal-source, ya que estamos trabajando con Lando:
lando npm install --save gatsby-plugin-material-ui @mui/material @emotion/react @emotion/styled @mui/styles
Y a continuación, abriremos el archivo de configuración de Gastsby y colocaremos el siguiente código, en el apartado de plugins, para que podamos acceder a sus opciones.
`gatsby-plugin-material-ui`,
Ahora podremos volver a ponerlo en funcionamiento con el comando:
lando gatsby develop --host 0.0.0.0
Actualizando el Layout Component
Actualice el componente Layout predeterminado, para hacer uso de los componentes Material UI Container y Box para proporcionar un diseño de página básico. Para ello, buscaremos el archivo y sustituiremos su contenido por el siguiente código, está ubicado en la ruta: src/components/layout.js
import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from 'gatsby'
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Navigation from './Navigation/Navigation';
const Layout = (props) => {
const {children} = props;
return (
<StaticQuery
query={graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`}
render={data => (
<>
<Helmet
title={data.site.siteMetadata.title}
meta={[
{name: 'description', content: 'Sample'},
{name: 'keywords', content: 'sample, something'},
]}
>
<html lang="en"/>
</Helmet>
<Container maxWidth="lg">
<Navigation siteTitle={data.site.siteMetadata.title}/>
<Box component="main">
{children}
</Box>
</Container>
</>
)}
/>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout;
En el ejemplo anterior, estamos importando los componentes Box y Container del paquete @ material-ui / core y luego los usamos para envolver el contenido de cada página que usa el componente Layout.
Agregue un componente de navegación.
Agregue el archivo src / components / Navigation / Navigation.js. Usaremos esto como encabezado y navegación para nuestra aplicación:
import React from 'react';
import { Link } from 'gatsby';
import { makeStyles } from '@mui/styles';
import AppBar from '@mui/material/AppBar';
import Button from '@mui/material/Button';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
const useStyles = makeStyles({
root: {
flexGrow: 1,
},
menuButton: {
marginRight: 2,
},
title: {
flexGrow: 1,
},
});
function Navigation(props) {
const classes = useStyles();
return (
<AppBar position="static" className={classes.root}>
<Toolbar>
<Typography
variant="h6"
className={classes.title}
>
{props.siteTitle}
</Typography>
<div>
<Button
component={Link}
to="/"
color="inherit"
>
Home
</Button>
</div>
</Toolbar>
</AppBar>
);
}
export default Navigation;
Agregue un poco de estilo a la página de inicio
Actualice la página de inicio, src / pages / index.js, para usar los componentes Paper y Typography para darle un poco más de estilo:
import React from 'react'
import PropTypes from 'prop-types';
import { Link } from 'gatsby'
import { makeStyles } from '@mui/styles';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Layout from '../components/layout'
const useStyles = makeStyles({
root: {
spacing: [3, 2],
padding: '30px',
},
});
const IndexPage = (props) => {
const classes = useStyles();
return (
<Layout>
<Paper className={classes.root}>
<Typography variant="h2">Hi people</Typography>
<Typography variant="subtitle1" paragraph>
Welcome to your new Gatsby site using <a href="https://material-ui.com">Material UI</a> for the UI.
</Typography>
<Typography variant="subtitle1" paragraph>
Now go build something great.
</Typography>
<Link to="/page-2/">Go to page 2</Link>
</Paper>
</Layout>
);
};
IndexPage.propTypes = {
classes: PropTypes.object.isRequired,
};
export default IndexPage;
SI arrancamos nuevamente nuestra aplicación de Gatsby, veremos un resultado mucho más moderno y atractivo:
lando gatsby develop --host 0.0.0.0
Agregar una nueva página estática en Gatsby
Para añadir una nueva página estática en Gatsby, bastará con crear un archivo con la extensión .js, y colocarlo dentro de la carpeta src/pages/. A continuación, una vez completados los datos que queremos mostrar, gatsby se encargará de generar la url para que podamos acceder a esa pagina.
Hagamos una prueba, vamos a crear una página llamada Sobre Nosotros, para ello, abriremos nuestro IDE y crearemos el archivo correspondiente, dentro de la carpeta src/pages/sobre-nosotros.js, luego pegaremos el siguiente código y comprobaremos el resultado.
import React from 'react'
import { Link } from 'gatsby'
import Layout from '../components/layout'
const SobreNosotrosPage = () => (
<Layout>
<h1>Sobre Nosotros</h1>
<p>Esta aplicación es un conjunto seleccionado de las mejores recetas, cuidadosamente
seleccionados solo para nuestros miembros.</p>
<Link to="/">Home</Link>
</Layout>
)
export default SobreNosotrosPage
Suponiendo que el servidor de desarrollo de gatsby se está ejecutando, cuando guarde este archivo, Gatsby debería encontrarlo automáticamente, compilar la versión actualizada de su aplicación y hacer que la página esté disponible para su visualización.
Para acceder a esta nueva página estática de Gatsby, escribiremos en el navegador la siguiente url:
http://gatsbymobile.lndo.site/sobre-nosotros
El resultado, debería ser uno parecido al de la siguiente imagen.
Mostrar contenido dinámico en Gastby desde Drupal 9
Ahora que tenemos el "Master en Creación de Páginas Estáticas", podremos pasar al siguiente nivel, que consistirá en la generación de listados con el contenido importado desde Drupal 9. Para esta parte
Para generar páginas estáticas para el contenido en la base de datos GraphQL de Gatsby, necesitamos hacer un par de cosas. Primero, necesitamos consultar la base de datos y hacer una lista de qué páginas queremos que Gatsby genere en qué ruta. Para hacer esto, implementamos la API de nodo createPages () de Gatsby; consultar la base de datos GraphQL para obtener una lista de las páginas que queremos generar; y luego proporcione a Gatsby información sobre esas páginas. Esta información incluye la ruta en la que queremos que viva la página, la plantilla que queremos usar para representar el HTML de la página y suficiente información contextual para que el componente de la plantilla pueda extraer el resto de la información que necesita de la base de datos en Tiempo de construcción.
Luego, necesitamos escribir un componente React para usar como plantilla para renderizar cada página individual, así como una consulta de página GraphQL que Gatsby ejecutará para obtener los datos necesarios para construir la página, y luego inyectar automáticamente como props.data en nuestro componente.
Implementar la API createPages () de Gatsby
Cuéntale a Gatsby sobre las páginas que quieres que represente implementando la API createPages (). Esto se hace exportando un createPages, con nombre funcional desde el archivo gatsby-node.js, con nombre especial en la raíz de su proyecto. Continúe y cree el archivo si aún no existe.
Una vez abierto, copiaremos el siguiente código y lo añadiremos justo debajo del código actual.
const path = require(`path`);
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions;
return new Promise((resolve, reject) => {
graphql(`
{
allNodeRecipe {
edges {
node {
drupal_id,
title,
path {
alias,
}
}
}
}
}
`).then(result => {
result.data.allNodeRecipe.edges.forEach(({ node }) => {
let path_alias;
if (node.path.alias == null) {
path_alias = `recipe/${node.drupal_id}`;
} else {
path_alias = node.path.alias;
}
createPage({
// This is the path, or route, at which the page will be visible.
path: path_alias,
// This the path to the file that contains the React component
// that will be used to render the HTML for the recipe.
component: path.resolve(`./src/templates/recipe.js`),
context: {
// Data passed to context is available in page queries as GraphQL
// variables.
drupal_id: node.drupal_id,
},
})
});
resolve()
})
})
};
Definir una plantilla para esta "recipe" o receta de Gatsby
A continuación, debemos definir la plantilla que se utiliza para representar el HTML de una "recipe". Según el código anterior, esto debería estar en src/templates/recipe.js. Necesitamos exportar un componente React y una consulta de página.
Crearemos el archivo para la plantilla, en la dirección mencionada de la línea anterior y luego pegaremos el siguiente código:
import React from 'react';
import { graphql } from 'gatsby';
import Helmet from 'react-helmet';
import Paper from '@mui/material/Paper';
import Layout from '../components/layout';
import Recipe from '../components/Recipe/Recipe';
import {makeStyles} from "@mui/styles";
const useStyles = makeStyles({
root: {
spacing: [3, 2],
padding: '30px',
},
});
const RecipeTemplate = (props) => {
const classes = useStyles();
const { nodeRecipe: recipe } = props.data;
return (
<Layout>
<Helmet
title={`Umami - ${recipe.title}`}
meta={[
{name: 'description', content: recipe.title},
]}
/>
<Paper className={classes.root}>
<Recipe
{...recipe}
category={recipe.relationships.category[0].name}
tags={recipe.relationships.tags}
instructions={recipe.instructions.processed}
summary={recipe.summary.processed}
/>
</Paper>
</Layout>
)
};
export default RecipeTemplate;
// The $drupal_id variable here is obtained from the "context" object passed into
// the createPage() API in gatsby-node.js.
//
// Also note the use of field name aliasing in the query. This is done to
// help normalize the shape of the recipe data.
export const query = graphql`
query RecipeTemplate($drupal_id: String!) {
nodeRecipe(drupal_id: {eq: $drupal_id}) {
drupal_id,
title,
cooking_time: field_cooking_time,
difficulty: field_difficulty,
ingredients: field_ingredients,
preparation_time: field_preparation_time,
number_of_servings: field_number_of_servings,
instructions: field_recipe_instruction {
processed,
},
summary: field_summary {
processed,
},
relationships {
category: field_recipe_category {
name,
}
tags: field_tags {
name,
}
}
}
}
`;
Por último, crearemos el componente para mostrar el contenido individual de cada receta, dentro del listado que acabamos de construir, para ello, generaremos un nuevo archivo en la siguiente ruta: src/components/Recipe/Recipe.js
import React from 'react';
import PropTypes from 'prop-types';
import ImageList from '@mui/material/ImageList';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Typography from '@mui/material/Typography';
import RecipeList from "../RecipeList/RecipeList";
const Recipe = (props) => (
<>
<Typography variant="h2" paragraph>{props.title}</Typography>
<ImageList cols={5} cellHeight="auto">
<ListItem>
<ListItemText primary="Difficulty" secondary={props.difficulty} />
</ListItem>
<ListItem>
<ListItemText primary="Cooking time" secondary={`${props.cooking_time} minutes`} />
</ListItem>
<ListItem>
<ListItemText primary="Preparation time" secondary={`${props.preparation_time} minutes`} />
</ListItem>
<ListItem>
<ListItemText primary="Category" secondary={props.category} />
</ListItem>
{props.tags &&
<ListItem>
<ListItemText primary="Tags" secondary={props.tags.map(item => item.name)}/>
</ListItem>
}
</ImageList>
<Typography variant="subtitle1">Summary:</Typography>
<Typography variant="body1" paragraph dangerouslySetInnerHTML={{ __html: props.summary }} />
<Typography variant="subtitle1">Ingredients:</Typography>
<List dense={true}>
{
props.ingredients.map((item, index) => <ListItem key={index}>{item}</ListItem>)
}
</List>
<Typography variant="subtitle1">Preparation:</Typography>
<Typography variant="body1" paragraph dangerouslySetInnerHTML={{ __html: props.instructions }} />
<RecipeList />
</>
);
Recipe.propTypes = {
title: PropTypes.string.isRequired,
difficulty: PropTypes.string.isRequired,
cooking_time: PropTypes.number.isRequired,
preparation_time: PropTypes.number.isRequired,
ingredients: PropTypes.arrayOf(PropTypes.string),
summary: PropTypes.string.isRequired,
instructions: PropTypes.string.isRequired,
category: PropTypes.string.isRequired,
tags: PropTypes.array,
};
export default Recipe;
Cuando hayamos terminado, ejecutaremos el código para reconstruir Gastby y realizaremos la coprobación accediendo a una págiana no existente, escriendo cualquier cosa después del dominio de nuestra pagina. Con esto deberíamos ver un listado de las Recetas del Drupal 9.
lando gatsby develop --host 0.0.0.0
Con los cambios anteriores en su lugar, reinicie el servidor de desarrollo de Gatsby con gatsby Develop. Cuando se reconstruye el contenido estático de la aplicación, ahora debería incluir las páginas de recetas obtenidas de Drupal. Pruébelo navegando directamente a la ruta de una receta o navegando a una página 404 conocida como http: // localhost: 8000 / asdf. Gatsby tiene un truco útil en el que las páginas 404 en el servidor de desarrollo le darán una lista de todas las páginas que Gatsby conoce internamente.
Gatsby con Drupal 9 | Configurar de conexión
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Ha llegado el momento de conectar nuestra web de Gatsby, con un proyecto Drupal 9, con el objetivo de utilizar este último como Backend, para la gestion de nuestros contenidos y usuarios.
Drupal 9 Headless con Gatsby
Antes de pasar al tema principal de este artículo, quiero aclararte que ya existe una forma de trabajar en Drupal 9, utilizando tu Theme personalizado basado en React.js, sin necesidad de desacoplarlo, aportando las mismas ventajas de velocidad de carga, posibilidades de personalización, aplicación de la metodología BEM para simplificar el uso de las plantillas Twig, entre otras muchas novedades.
Esta nueva manera de trabajar con Drupal y React integrados es gracias a módulo Emulsify, que te explico con detalle en otra serie de artículos, si quieres aprender más sobre ello HAZ CLIC AQUÍ
Requisitos para este ejercicio
- Tener instalado Lando y Drupal 9 Haz clic aquí para saber cómo
Paso 1 - Instalación y configuración del Drupal 9
En este ejercicio, utilizaremos la instalación de Demostración: Umami Food Magazine (Experimental), ya que nos ofrece múltiples contenidos con imágenes que nos servirán perfectamente para explicar y evaluar la implementación con Gatsby. Además ya viene por defecto al descargar los archivos de Drupal 9.
Una vez descargado Drupal 9 usando Composer y hayas configurado la base de datos que quieres utilizar, tendrás que seleccionar la última opción de las tres disponibles, para que comience le proceso de configuración.
Cuando se haya terminado la instalación, tendrás un Drupal ejecutándose con varios contenidos y tipos ideal para realizar cualquier ejercicio, o demostración sobre el potencial de Drupal.
Paso 2 - Desarga de la estuctura base Gastby Starter Default
Aunque al principio de este curso, había planteado que utilizaríamos LAMP con WSL2 y aprovechando que ya sabemos cómo configurar e instalar Lando, en nuestro ordenador, vamos a sacar partido a este conocimiento haciendo lo mismo para instalar nuestra aplicación de Gatsby.
Para ello, sólo tendremos que crear una nueva carpeta, con el nombre que prefieras, yo le he pueso - gatsby - y colocarla en el mismo lugar que hemos guardado nuestro proyecto Drupal "/home/TU_USUARIO/proyectos/formacion", a continuación, descargaremos la distribuición de Gatsby para que nos sirva de base de nuestra aplicación.
git clone https://github.com/gatsbyjs/gatsby-starter-default.git/ gatsby
Con este comando, además de descargarnos la estructura, se guardará dentro de una carpeta llamada - gatsby - . Una vez terminada la descarga los archivos, podremos pasar a al siguiente paso. Si quieres visitar el repositorio original Haz clic aquí
Paso 3 - Creación del archivo de configuración para Lando
Nos moveremos dentro de la carpeta recién creada con la estrucutura base de - gastsby - ; inmediatamente después, crearemos dentro un archivo de confinguración de Lando, con el nombre: ( .lando.yml ), para configurar algunos detalles relacioandos con nuestra aplicación.
Ahora, abriremos el archivo con el editor de texto, usaremos nano que viene con nuestra distrubución de ubuntu.
cd gatsby sudo touch .lando.yml sudo nano .lando.yml
Una vez dentro del archivo, colocaremos dentro el siguiente código, guardaremos los cambios y cerraremos:
name: gatsbymobile
proxy:
appserver:
- gatsbymobile.lndo.site:8000
services:
appserver:
type: node:14
port: '8000'
#command: gatsby develop --host 0.0.0.0
install_dependencies_as_me:
- yarn global add gatsby-cli
- yarn
tooling:
yarn:
service: appserver
gatsby:
service: appserver
node:
service: appserver
npm:
service: appserver
A continuación, guardaremos el archivo, abriremos una pestaña nueva de nuestra Consola mejorada de windows, iniciaremos sesión con nuestro usuario NOROOT, igual que hemos hecho con el Drupal 9, nos colocaremos dentro de la carpeta correspondiente y ejecutaremos el comando de arranque de lando para gatsby:
lando rebuild
lando gatsby develop --host 0.0.0.0
Corrección de posible error
Si al ejecutar el comando anterior, el resultado no ha sido el de la imagen, deberás ejecutar el comando de reconstrucción para que se corrija el fallo:
lando rebuild
En este caso, para acceder a nuestra web de Gatsby y a la de Graphql, en lugar de utilizar las que nos muestra la consola, accederemos escribiendo en el navegador el dominio que hemos configurado en el archivo de lando.
http://gatsbymobile.lndo.site/
http://gatsbymobile.lndo.site/__graphql
Paso 4 - Conectando Drupal 9 con Gatsby
En este caso, ya tenemos funcionando una aplicación de Gastby, pero aún no la hemos conectado con ninguna web de Drupal para completar el ejercicio. Así, que abriremos la instalación de Drupal que habíamos hecho y utilizaremos la distribución de Umami, que viene por defecto en Drupal 9 y que viste en las imágenes del principio.
Si haz realizado la instalación siguiedo el ejercicio de Instalar Drupal 9 en Ubuntu 20.04 con Lando y WSL2 en Windows 11, deberás volver instalar Drupal para que esta vez puedas activar la distribución de Umami Food Magazine, para ello, solo tendrás que ejecutar el siguiente comando (CUIDADO PORQUE BORRA TODO), y así podrás elergir la nueva opción de instalación.
lando destroy
Tendrás que confirmar que quieres ejecutar el comando "DESTROY" y una vez terminado el proceso, podrás volver a instalar Drupal 9 desde cero, esta vez seleccionando el Perfil de Instalación Umami Food Magazine.
Ahora si vuelves a ejecutar el comando de arranque, podrás acceder a la url y seleccionar tu nueva instalación.
lando start
A continuación, deberás activar los módulos Json Api y Json Extras, además de la configuración que te permitirá servir los contenidos de Drupal en formato Json, y que puedas mostrarlos al conectar Drupal 9 con Gatsby.
Una vez tengas el Drupal 9 configurado correctamente y con el Perfil de Instalación Umami Food Magazine instalado, nos colocaremos dentro de la carpeta de nuestro Gatsby, para proceder con la instalación del plugin gatsby-source-drupal, primero tendremos que detener la ejecución de Gatsby con con las teclas:
Ctrl + C
y a continuación, ejecutaremos el comando siguiente, ya que estamos utilizando Lando.
lando npm install gatsby-source-drupal
Una vez terminada la descarga, podremos abrir el archivo de configuración de Gastsby, llamado: gatsby-config.js y añadiremos el siguiente código debajo del apartado de plugins:
{
resolve: `gatsby-source-drupal`,
options: {
baseUrl: `http://drupal-gatsby.lndo.site/`,
apiBase: `jsonapi`, // optional, defaults to `jsonapi`
},
},
Una vez hayamos confirmado los datos de conexión, susituyendo el valor de "baseUrl", por la url que nos haya generado Gatsby, y volveremos a poner en marcha nuestra aplicación con el comando:
lando gatsby develop --host 0.0.0.0
Si refrescamos el navegador donde tenemos abierto el Grafql, podremos comprobar que ya estamos conectados, porque nos aparecerán todos los contenidos de la web Drupal 9, para generar nuestras consultas.
Posibles fallos y correcciones
En el caso de que al instalar el plugin gatsby-source-drupal, al entrar a la url de graphql, no veas el listado de los contenidos de Drupal, puedes ejecutar los siguientes comandos.
lando rebuild
sudo rm -Rf .cache
sudo rm -Rf public
lando gatsby clean
Los cuatro comandos anteriores se encargarán de reconstruir tu aplicación, borrar los archivos de caché y la carpeta pública, que se regenerarán una vez vuelvas a ejecutar el comando de arranque del Gatsby. Con esto deberías ver todos los contenidos del Drupal en tu Graphql.
Gatsby con Drupal | Etructura, componentes y páginas
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
En el anterior artículo aprendimos todo lo necesario, sobre los requisitos y requemiemientos, para configurar e instalar un sitio web, en nuestro entorno local, utilizando Gatsby. Para ello configuramos un entorno LAMP, con WSL2 dentro de Windows 10; ya que el propósito de esta serie de artículos, será conectarnos con Drupal 9, como backend de nuestro proyecto. Pero antes de comenzar con esa fase fundamental, vamos a explorar y conocer un poco más, acerca de Gatsby, ya que será una pieza clave para lograr nuestro objetivo.
Lo primero que debermos hacer es, una vez colocados dentro de la carpeta en la que hemos instalado Gatsby, arrancarlo utilizando el siguiente comando, tal y como hicimos en el anterior artículo.
gatsby develop
A continuación, podremos abrir el proyecto, utilizando el IDE de tu preferencia (Atom, Visual Studio Code, Netbeans, etc.), yo utilizaré PhpStorm, pero puedes elegir el que tengas a mano. Una vez hayamos abierto el proyecto, encontraremos varias carpetas y archivos montados en una estructura, en la que destacaremos los más importantes.
Compontenes, ¿qué son? y ¿para qué nos servirán?
Uno de los principios aplicados como base de la mayoría de los nuevos Frameworks, basados en Javascript, como Angular.js, Vue.js, React.js o cualquier otro, para mejorar la velocidad de carga de nuestras webs, sin sacrificar su apariencia, ni la expiencia de usuario; consiste en descomponer nuestros proyectos, en múltiples partes o "Componentes", individuales, y a su vez, reutilizables, que permitirán elaborar toda clase de estructuras, de menos a mayor complejidad, uniendo solamente los que sean necesarios, dependiendo del propósito deseado.
Esto significa, que en cada uno de estos componentes, estará formado por el código necesario para relacionarlos con otros, a través de importaciones, o los estilos CSS, que éste requiera, para mostrar su contenido de forma correcta, entre otras cosas. Gatsby está basado en React.
La arquitectura de componentes de React simplifica la creación de sitios web grandes al fomentar la modularidad, la reutilización y las abstracciones claras. React tiene un gran ecosistema de componentes de código abierto, tutoriales y herramientas que se pueden usar sin problemas para construir sitios con Gatsby. Gatsby está diseñado para comportarse casi exactamente como una aplicación React normal.
La forma más sencilla de escribir elementos React es con JSX. JSX es una extensión de sintaxis de JavaScript que describe la estructura DOM de su componente. Se parece un poco a tener HTML en sus archivos JavaScript:
Si quieres conocer un poco más sobre los componentes, te dejo el enlace a la Página oficial de Gatsby
Si abrimos el componente header.js, ubicado dentro de la carpeta src, podremos hacernos una idea de la estructura básica, que encontraremos o tendremos que añadir, cada vez que trabajemos con un Componente.
A grandes rasgos, en todos los componentes y otros elementos, como las páginas, por ejemplo, encontraremos la línea que "hacer que funcione con React", me refiero a la de --- import * as React from "react " ---, ésta le permitirá obtener los recursos necesarios desde su Núcleo.
De las demás líneas de importación que vemos en la imagen, como "PropTypes" o "{ Link }", hablaremos cuando comencemos a trabajar con las configuraciones entre Gatsby y Drupal 9.
Lo que sí deberás tener en cuenta siempre es que el inicio y final de un componente para que te funcione, si te fijas detenidamente, comienza con la declaración del nombre del Componente, mediante la declaracion de una constante --- const Header ---, que el nombre de un componente deberá empezar por mayúscula -- const MyComponent -- y termina con la exportación, para que pueda ser visto desde cualquier lugar de tu proyecto, con la línea --- export default Header ---
En medio de la estructura que define el Componente, en este caso, podremos apreciar las líneas que definen etiquetas que nos recuerdan al HTML de siempre, unidas con las declaraciones de algunos estilos CSS, encargados de la aplicación de colores, tamaños y otras características visuales para el componente.
Páginas en React
Como mencioné al principio de este artículo, la idea principal de un Framework de este tipo es construir un proyecto web, obteniendo estructuras complejas a partir de la unión de varios Componentes, un ejemplo de estas estructuras, nos viene con la instalación de Gatsby por defecto, hablo de la Página 2, a la que podemos acceder desde la Home de nuestro proyecto cuando arrancamos Gatsby.
Si abrimos el archivo encargado de generar esta "Página 2", podremos identificar algunos de los elementos mencionados anteriormente, así como otros incluidos mediante la importación desde la ruta en que se encuentran, me refiero a los componentes "Layout" y "SEO", el primero permitirá, que se muestren los mismos estilos que en la Home, como la barra de navegación color púrpura o los textos con igual tamaño y colores. Y por su parte, el componente SEO, permitirá incluir los metatags o códigos destinados al posicionamiento de la web en los buscadores.
Te abrás fijado también, que al igual que vimos ya en el componente Header.js, en este caso la declaración de la SecondPage, tiene la misma estructura, con la diferencia de que en su parte central, en lugar de ver todas las declaraciones que observamos en el componente, encontramos una etiqueta central <Layout></Layout> donde se incluye el resto de elementos (Textos y enlace), que se ven en la misma.
GraphQL
Hay muchas opciones para cargar datos en los componentes de React. Uno de los más populares y poderosos es una tecnología llamada GraphQL.
GraphQL se inventó en Facebook para ayudar a los ingenieros de producto a extraer los datos necesarios en los componentes de React.
GraphQL es un lenguaje de consulta (la parte QL de su nombre). Si está familiarizado con SQL, funciona de manera muy similar. Usando una sintaxis especial, usted describe los datos que desea en su componente y luego se le dan esos datos.
Instalación y configuración de Plugins
El último de los temas que comentaré en este pequeño repaso/introducción sobre Gatsby, es acerca de los Plugins, que serán los encargados de ampliar funcionalidades de Gatsby, dependiendo de las necesidades para tu proyecto.
Para descargar un Plugin, nos ubicaremos dentro de la carpeta donde está alojado nuestro proyecto y luego ejecutaremos el comando de instalación, seguido del nombre del Plugin; a continuación un ejemplo del comando para instalar en plugin gatsby-source-drupal, aunque se puede utilizar yarn, en lugar de npn, desde la página oficial prefieren el uso de npm:
npm install gatsby-source-drupal
El archivo encargado de la gestión de los Plugins se llama --- gatsby-config.js ---, una vez descargamos nuestros plugins, tendremos que añadir las líneas correspondientes dentro de este archivo, según las especificaciones que nos digan en la página relacionada con él o ellos.
Explicación:
En la imagen anterior, podemos ver que se han añadido dentro del apartado de Plugins, las siguientes informaciones:
resolve: `gatsby-source-drupal`, : donde se declara el nombre del plugin que se a a utilizar, en este caso el gatsby-source-drupal.
options: {
baseUrl: `https://live-contentacms.pantheonsite.io/`,
apiBase: `api`, // optional, defaults to `jsonapi`
},
Esta segunda parte --- options ---, es donde se añaden configuraciones específica, que variarán según el plugin que se instale. En este caso la baseUrl será la que sustityamos por la de nuestro proyecto Drupal 9, y en la línea de apiBase, en nuestro caso, sustituirmeos el valor por el de --- jsonapi ----, que será el endpoint generado, al activar los módulos "Json api" y "Serialization", incorporado en el núcleo de Drupal 9.
Para comprobar que hemos activado los módulos en Drupal correctamente, sólo tendremos que añadir "/jsonapi" al final de nuestro dominio en Drupal y el resultado debería ser algo parecido a la siguiente imagen.
Para obtener el resutado anterior en el navegador, al visitar la url con "/jsonapi" de nuestro Drupaol, en mi caso tengo instalada la extensión de Google Chrome llamada Json Viewer.
Para la conexión entre Drupal y Gatsby, utilizaremos un plugin llamado --- gatsby-source-drupal ---, puedes encontrar todos los datos relacionados con su configuración en la Página oficial de Gastby.
El proceso suele ser el mismo en todas las instalaciones de plugins, primero ejecutaremos el comando que descargará los archivos dentro de nuestro proyecto y, a continuación, añadiremos alguns líneas destinadas a las especificaciones de uso para que podamos comenzar con él.
Gatsby con Drupal | requerimientos, instalación y primeros pasos
Video de Youtube
Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
Qué es Gatsby
Gatsby es un marco de código abierto basado en React para crear sitios web y aplicaciones. Es genial si está creando un sitio de cartera o un blog, o una tienda de comercio electrónico de alto tráfico o la página de inicio de una empresa.
Instalación de Gatsby en tu entorno local
En este artículo aprenderemos a instalar una web con Gatsby, utilizando Linux, en nuestro WSL2 dentro de Windows 10; el propósito fundamental de este artículo es que puedas conectar un sitio Drupal 9 para que puedas utilizarlo luego como el backend de tu proyecto, delegando en Drupal 9 la gestión de tus contenidos, usuarios, imágenes, etc.
Si quieres saber más sobre cómo instalar Gatsby en tu entorno local, puedes visitar su página oficial donde te cuentan otras formas y opciones disponibles.
Según su página oficial, para instalar y crear una web usando Gatsby en tu entorno local de Linux (Ubuntu 20.04) en mi caso, deberás tener instalados previamente en tu servidor lo siguiente:
Requisito 1 - Actualizar el listado de paquetes de tu distribución de Linux
sudo apt update
sudo apt -y upgrade
Requisito 2 - Descarga e instalación de curl
Curl: Instale cURL que le permite transferir datos y descargar dependencias adicionales.
sudo apt install curl
Requisito 3 - Utilizar curl para instalar NVM y Node
NVM : Que te permitirá utilizar diferentes versiones de Node.js
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.1/install.sh
Node.js: Ideado como un entorno de ejecución de JavaScript orientado a eventos asíncronos, Node.js está diseñado para crear aplicaciones network escalables.
Cuando se instala nvm, no utiliza una versión de nodo en particular de forma predeterminada. Deberá instalar la versión que desee y dar instrucciones a nvm para usarla. Este ejemplo usa la última versión de la versión 10, pero en su lugar se pueden usar números de versión más recientes.
nvm install 10
nvm use 10
Puedes verificar la versión más actual de Node.js visitando la Página oficial de Node
Git: para gestionar las versiones del código, que será necesario para crear su primer proyecto de Gatsby basado en un iniciador.
sudo apt install git
Gatsby command line tool (CLI): es el principal punto de entrada para comenzar a ejecutar una aplicación Gatsby y para usar la funcionalidad, incluida la ejecución de un servidor de desarrollo y la creación de su aplicación Gatsby para su implementación.
npm install -g gatsby-cli
Creación de nuevo proyecto con Gatsby
Una vez tengamos los requisitos instalados, ya prodremos comenzar a trabajar en nuestro sitio web con Gatsby, para ello, utilizaremos la Estructura Base, que nos ofrece Gatsby para que podamos empezar. Así que abriremos nuestra consola mejorada de Windows y ejecutaremos el siguiente comando:
gatsby new mi-drupal-gatsby
Al ejecutar el comando de creación de mi proyecto, en mi caso en particular tuve un error de permisos, por lo que antes de ejecutar el código para la descarga y creación de mi web con Gatsby, tuve que crear el directorio y darle los permisos de escritura y lectura, una vez realizado estos cambios, pude ejecutar el comando sin problemas y se descargaron los archivos correctamente.
Tan pronto como termine la descarga de todos los archivos necesarios para tu instalación, veremos un mensaje de confirmación con las instrucciones de movernos dentro de la carpeta del proyecto y ejecutar el comando de arranque del servidor de Gatsby:
Así que nos moveremos dentro de nuesta carpeta y al ejecutar el código de arranque, veremos en la consola si ha ocurrido algún error durante el proceso o podemos pasar a la siguiente fase que será acceder a la url en el navegador:
Si no ha ocurrido nigún error, podremos ver en la parte final de los mensajes, los detalles para acceder a la url donde podremos ver nuestro nuevo sitio creado con Gatsby, además del acceso a la interfaz de GraphiQl, que explicaré más adelante:
Cuando accedamos a la url http://localhost:8000/, podremos ver nuestra web para comenzar a trabajar:
Si en cambio, accedemos a la otra url que vemos debajo de la primera, entonces estaremos entrando a la interfaz de GrapiQl, que nos permitirá crear consultas de todo tipo, de una forma bastante sencilla, visual y práctica:
Estructura de archivos del proyecto Gatsby
Enhorabuena!!!, haz conseguido instalar tu primer proyecto web basado en React, utilizando Gatsby, en el siguiente artículo exploraremos los diferentes archivos y te contaré la forma de trabajar en la creción de Páginas, Componentes, carga de imágenes y enlaces. No te voy a cubrir todo lo relacionado para que desarrolles una web completa con Gatsby, ya que mi propósito es que sepas lo básico para trabajar usando Gatsby y Drupal 9 como backend; pero paciencia, que con lo que te eseñaré será más que suficiente para que sigas explorando y probando nuevas opciones en tus desarrollos Drupal 9 Headless.
Gatsby con Drupal | Introducción
Video de Youtube
