lando

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

     Si quieres dedicarte al desarrollo de aplicacione web, y además te gustaría probar con Drupal 8, estás de suerte, porque en esta ocasión podrás acceder a un repositorio y descargarte todo lo que necesitarás para comenzar a trabajar con este potente CMS.

   Contenido del repositorio Drupal 8 - Lando

• Todos los archivos de un proyecto Drupal 8 Base, listo para funcionar
• Los archivos para un tema personalizado, basado en Bartik, para que puedas comenzar a jugar con los CSS
• La base de datos de un proyecto Drupal nuevo
• Los módulos principales activados y configurados: (Admin Toolbar, Pathauto)
• El archivo de Lando, para que puedas poner en marcha en pocos minutos tu proyecto y además podrás ejecutar lando drush y lando composer, entre otros.

   Instalación y configuración del Proyecto Drupal 8 Lando

1. Descargar y configurar Lando en tu entorno local.

      Yo soy usuario Windows, así que para poder trabajar con Linux, he instalado WLS2, con una distribución de Ubuntu 22.04, dentro de mi ordenador con Windows 11. De esta forma, puedo tener ambos entornos, sin la necesidad de complejas configuraciones, ni que se ralentice mi máquina.
      Así que lo único que necesitaremos en este caso será descargar los archivos de Lando, si todavía no sabes cómo hacerlo, puedes ver el video y la documentación HACIENDO CLIC AQUÍ.
      Ahora que ya tenemos instalado Lando, crearemos la carpeta donde estará nuestro Drupal 8 y a continuación, vamos a generar nuestro archivo de configuración de Lando, ejecutando el siguiente comando:

   lando init

      En cuanto hayamos terminado con el proceso, podremos arrancar Lando, para poder ejecutar el Composer, que necesitaremos en el siguiente paso.

2. Clonar el repositorio y arrancar Lando

      Ya que tenemos Lando instalado y listo para comenzar, nos colocaremos en la ubicación donde estará nuestro proyecto y a continuación, vamos a clonar el repositorio, para que descargue los primeros archivos del Drupal que vamos a necesitar.

   git clone https://github.com/drupaladicto/drupal8-lando.git

      En el repositorio, además de los archivos de Drupal, encontraremos una carpeta llamada Extras, dentro estarán el archivo settings.php, que tendremos que copiar a la ubicación: “sites/default/settings.php” y la base de datos que importaremos más adelante, donde tendrás configurado el subtheme y algunos módulos adicionales.

3. Descargar las dependencias de Drupal

      Ahora que ya tenemos los primeros archivos en nuestro entorno local, podremos arrancar nuestro servidor de Lando, para ello ejecutaremos el siguiente comando:

   lando start

       A continuación descargaremos el resto de dependencias de Drupal 8, para esto necesitaremos Composer, así que ejecutaremos el siguiente comando:

   lando composer update

4. Configuración de settings.php y la base de datos

      Ya casi hemos terminado, como hemos mencionado anteriormente, necesitaremos colocar el settings.php, en la ubicación correcta para que Drupal pueda funcionar, pero además de esto, tendremos que añadir nuestra base de datos. 
      Los detalles de la base de datos están configurados en el archivo de configuración de lando .lando.yml, para asegurarte, puedes ejecutar el comando lando info y verás en pantalla, toda la información que necesitarás relacionada con tu proyecto:

Así que nos moveremos a la carpeta Extras y ejecutaremos el siguiente comando:

lando db-import nuestrabase.sql

5.- Accediendo a nuestro Drupal 8

   Ya estamos listos para acceder a nuestro Drupal 8 y comenzar en nuestro viaje de exploración.
    Pero antes nos aseguraremos de que todo esté correcto, por eso ejecutaremos el siguiente comando de Lando:

lando rebuild

   Cómo acceder a la administración del Drupal 8

     Cuando ya tengas funcionando el Drupal 8, necesitarás acceder como administrador para poder comenzar a evaluar, explorar y crear tus propios cambios en dentro del proyecto. Para ello, sólo tendrás que ejecutar el siguiente comando y luego copiar en el navegador a partir de "/user":

lando drush:uli

     Si nunca haz hecho esto de recuperar el acceso utilizando Drush, puedes ver el ejemplo HACIENDO CLIC AQUÍ

    Si estamos trabajando en un proyecto Drupal Healess con Next.js, tendremos que buscar la manera más sencilla y rápida para crear y configurar nuestra aplicación en un entorno local. En este caso, vamos a crear la apliación de Next.js que conectará con nuestro Drupal Commerce, para ello utilizaremos Lando.

     Desde que lo descubrí, recomiendo a todos el uso de Lando, ya que es la forma más sencilla y potente, de configurar casi todo lo que necesitarás, para tus proyectos, sin perder tiempo innecesario en descargas y configuraciones complicadas.

     Si todavía no has trabajado con Lando, te dejo una guía rápida de instalación, para que puedas continuar de inmediato: HAZ CLIC AQUI

   Cómo instalar Next.js creando un archivo de configuración .lando.yml

     A diferencia de la instalación que realizamos para el Drupal Commerce, esta vez crearemos nuestro propio archivo de configuracíon, para tener el control total sobre detalles como la url y el puerto con el que accederemos a nuestra aplicación, o las versiones necesarias de node, yml, etc.

     Así que nos colocaremos en la ubicación destinada a nuestra aplicación Next.js; a continuación, crearemos la carpeta para alojarla, y dentro crearemos el nuevo archivo de configuración para lando:

sudo mkdir nextapp

sudo chmod -R 777 nextapp

cd nextapp

sudo touch .lando.yml

     Ahora abriremos el archivo, con el editor nano o el de tu preferencia, y pegaremos el siguiente código dentro:

name: nextapp
proxy:
  appserver:
    - nextapp.lndo.site
services:
  appserver:
    type: node:14
    command: "yarn dev --hostname 0.0.0.0 --port 80"
    install_dependencies_as_me:
      - yarn install
tooling:
  yarn:
    service: appserver
  npm:
    service: appserver
  node:
    service: appserver

     Guardaremos los cambios y arrancaremos lando, para comenzar con la descarga de los archivos necesarios para nuestra aplicación Next.js, para ello, ejecutaremos el siguiente comando:

lando start

     Una vez arrancado lando, podremos ejecutar uno de los siguientes comando, dependiendo de lo que quieras hacer con tu aplicación:

   Opción 1 - Uso de inicio básico

     En este caso, descargarías el esqueleto básico para tu aplicación Next.js, con el comando siguiente:

lando yarn create next-app -e https://github.com/chapter-three/next-drupal-basic-starter

   Opción 2 - Uso de inicio básico con DrupalClient

     Esta es la opción que utilizaremos para nuestra aplicación, ya que el propósito será conectarla con el Drupal Commerce que hemos instalado previamente:

lando yarn create next-app -e https://github.com/chapter-three/next-drupal-basic-starter-client

     En este ejemplo, hemos optado por la opción dos, para nuestra aplicación Next.js.

     Una vez descargados los archivos de nuestra aplicación my-app, ya sólo nos faltará conectar nuestra recién estrenada aplicación Next.js, con nuestro Drupal Commerce, eso lo veremos en el siguiente capítulo.

Hasta la próxima.

     Este módulo está diseñado para aumentar las posibilidades en la generación de contenidos estático, desde Drupal, para facilitar las tareas de presentación con dicho contenido en una aplicación creada con Next.js y conectada con Drupal en modo Desacoplado (Headless).

  Descarga y Activación:

Para descargar y activar cualquier módulo de Drupal tienes varias opciones:

     Descarga:

          1.- La forma recomendada a partir de Drupal 8, es utilizando el gestor de paquetes Composer, ejecutando en tu consola el comando:

composer require drupal/next

          2.- Descargándolo manualmente el módulo desde la página oficial del Módulo Next.js y una vez descargado y colocado en carpeta "modules/contrib", si haz descargado todos tus módulos manualmente, deberías crear la carpeta "contrib", para que puedas diferenciar entre tus módulos personalizados y los que están disponibles directamente en la Página oficial de Drupal.
 

     Activación:

          1.- Utilizando la herramienta de consola Drush, la opción "-y" activará todos los sub-modulos automáticamente

drush en next -y

          2.- Desde la interfaz de usuario de Drupal, en la url "/admin/modules", y luego marcando el check junto al nombre de tu módulo y haciendo clic en el botón guardar que aparecer al final de la página.

     Ahora que ya tenemos instaladas todas las dependencias del módulo Next.js, podremos comenzar a configurar nuestro sitio Next, dentro de Drupal. Suena un poco confuso, tener un sitio dentro de otro, pero el objetivo es servir la información guardada en Drupal, para que pueda ser consultada desde la aplicación externa, que en este caso estará creada con Next.js.

     Por esta razón, creaemos un servicio, con su propia url, a la que cual podremos acceder una vez comencemos con la creación de nuestra aplicación Next.js, que todavía no hemos creado.

     Paso 1 - Creación del Sitio Next dentro de Drupal

     En este paso, nos dirigiremos a al url "/admin/config/services/next", y a continuación haremos clic en la opción para añadir un nuevo Sitio Next.

     Se nos abrirá una pantalla, donde veremos cualquier Sitio Next que hayamos creado, pero como en nuestro caso, todavía no tenemos ninguno, haremos clic en el botón de Añadir Sitio.

    Ahora rellenaremos los campos con la siguiente información:

Etiqueta: tienda

URL Base: http://drupalcommerce.lndo.site

Preview URL: http://drupalcommerce.lndo.site/api/preview

Preview secret: preview-secret-here

     Una vez hayamos introducido todos los cambios, habremos creado nuesto primer Sitio Next.js dentro de Drupal.

   Paso 2 - Configuración de las URLs o Paths

     El módulo next-drupal utiliza las rutas, para resolver recursos para `getStaticProps`. Por lo tanto, para que esto funcione, necesitaremos configurar los alias de ruta, para nuestros tipos de contenido.

     Para configurar estar rutas, utilizaremos los Patrones, que nos facilita el módulo Pathauto, que ya hemos instalado, como parte de las dependencias para el módulo Next.js.

     Así que vamos a crear nuestro primer patron de url, asignado a los artículos de Drupal.

     Para añadir un nuevo patrón de url, nos dirigiremos a /admin/config/search/path/patterns/add, y una vez allí, seleccionaremos cuál será la entidad o entidades a las que vamos a configurarles dicho patrón. En nuestro caso, vamos a establecer el patrón para los productos:

Paso 3 - Activación del Modo de Previsualización

     El módulo Next.js, junto con el complemento next-drupal, nos facilitará la creación de rutas para la vista previa de Next.js.

     Si queremos configurar el modo de vista previa para un tipo de entidad, en este caso, nuestros productos, debemos configurar:

1. Un consumidor autenticado, para ello, utilizaremos el Módulo Simple OAuth, que se descargó como parte de las dependencias del módulo Next.js.
2. Un site resolver o resolución de sitio para el tipo de entidad.

     Para crar el Consumidor autenticado, antes deberás crear el Rol, con sus respectivos persmisos y a continuación, crear un usuario y asignarle dicho Rol, para que pueda acceder.

   3.1 - Creación y configuración del Consumidor

     Si todavía no has creado un Consumidor, te invito a leer y ver los videos y la documentación siguiente:

• Conectando Nuxt.js con Drupal 9 (Parte 1)
   

• Conectando Nuxt.js con Drupal 9 (Parte 2)

   3.2 - Creación y configuración del Site Resolver

     Un sistema de resolución de sitios le dice a Drupal cómo resolver la URL de vista previa para una entidad.

     Para nuestro sitio, vamos a configurar una resolución para el tipo de entidad Producto. Por lo que accederemos a la url /admin/config/services/next/entity-types

     Una vez, accedamos a la siguiente pantalla, seleccionaremos Configure entity type:

    En esta segunda pantalla, tendremos que seleccionar varias opciones que se nos irán desplegando, en función de nuestra primera opción:

     Nosotros seleccionaremos el Producto, como entidad para nuestro ejemplo.

     Cuando hayamos terminado de seleccionar todo, haremos clic en el botón Guardar.

     Ahora ya podemos comenzar a crear nuestra Aplicación de Next.js... 

     Nos vemos en el siguiente capítulo.

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

     Para poder conectar nuestra tienda de Drupal Commerce, con la aplicación que desarrollaremos en Next.js, tendremos que cumplir con ciertos requisitos, necesarios para realizar dicha operación.

     Ahora que ya tenemos instalado Drupal Commerce, podremos continuar con esta siguiente fase.

   Cómo desacoplar Drupal con Next.js y JSON:API

     Paso 1 - Tener instalado y funcionando un Drupal

           En nuestro caso hemos instalado ya un Drupal Commerce, pero podrías hacer lo mismo con una instalación de Drupal normal. Si todavía no lo tienes instalado, pueder ver cómo hacerlo en el Capítulo 1. HAZ CLIC AQUÍ

     Paso 2 - Descargar e instalar el módulo contribuido Next.js

          Este será el módulo que nos permitirá conectar nuestro Drupal Commerce, con la aplicación en Nuxt.js que crearemos un poco más adelante. Para descargar e instalar el módulo Nuxt.js, utilizaremos el gestor de paquetes Composer, pero en esta ocasión, añadiremos Lando, como parte del comando, ya que en nuestra entorno local hemos preferido utilizar Lando, en lugar de configurar un servidor tradicional del tipo LAMP. Así que nos colocaremos en la carpeta Root de nuestro Drupal Commerce y ejecutaremos los siguientes comandos:

lando composer require 'drupal/next:^1.1'

lando drush en next

lando drush cr

lando drush updb

      Debido a que está cada vez más cerca el lanzamiento de Drupal 10, es posible, que al intentar ejecutar el comando de drush en, te encuentres con un error de compatiblidad, parecido al siguiente:

     Para solucionarlo, sólo tendremos que ejecutar el siguiente comando, que nos asegurará la descarga de las versiones más actuales y compatibles de Drush, para todos nuestros proyectos. Así que ejecutaremos esto:

lando composer require drush/drush  --with-all-dependencies

     Una vez se ejecute, podremos continuar con el proceso de activación de los módulos o cualquier otro procedimiento que necesite de Drush.

     Con la activación del módulo Next.js, verás que se activarán todas sus dependencias, necesarias para que funcione correctamente. Estas son:

• Decoupled_router. Descripción e instalación AQUÍ
   
• Simple_oauth. Descripción e instalación AQUI
   
• Serialization
   
• Consumers. Descripción e instalación AQUI
   
• Subrequests. Descripción e instalación AQUI
   
• Pathauto. Descripción e instalación AQUÍ
   
• Chaos tools

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

    Para comenzar nuestro viaje, hacia la construcción de una tienda virtual, utilizando Drupal Commerce, lo primero que necesitamos configurar, será  nuestro entorno de desarrollo. 

     Desde que lo descubrí, recomiendo a todos el uso de Lando, ya que es la forma más sencilla y potente, de configurar casi todo lo que necesitarás, para tus proyectos, sin perder tiempo innecesario en descargas y configuraciones complicadas.

     Si todavía no has trabajado con Lando, te dejo una guía rápida de instalación, para que puedas continuar de inmediato: HAZ CLIC AQUI

   Cómo instalar Drupal Commerce con Lando

     Ahora que ya tenemos instalado y configurado Lando, en nuestro ordenador, el siguiente paso será, crear la carpeta donde alojaremos nuestra tienda virtual, y a continuación, añadiremos el archivo de configuración de lando, para poder ejecutar los comandos de composer, sin la necesidad de nada más.

   Opciones de configuración para Lando

     Opción 1 - Generar el archivo de configuración de Lando

     Tienes dos opciones para configurar un entorno con lando, la primera sería colocándote dentro de la carpeta donde alojarás tu proyecto, darle permisos totales a la carpeta, para evitar fallos durante la descarga, y a continuación, ejecutar el comando de inicialización para lando:

mkdir drupalcommerce

sudo chmod -R 777 drupalcommerce

cd drupalcommerce

lando init

     Una vez ejecutes lando init, verás en pantalla las preguntas relacionadas con tu configuración, en este caso, utilizaremos el recipe drupal9, para instalar nuestro Drupal Commerce.

     Opción 2 - Crear un archivo de configuración personalizado de Lando

     En este segundo caso, al igual que en el anterior, crearemos la carpeta para nuestro proyecto y le daremos permisos totales, pero en lugar de generar el archivo de configuración para lando, ejecutando el comando lando init, crearemos previamente un archivo de configuración, con los parámetros deseados para trabajar en nuestro proyecto.

     El nombre del archivo será .lando.yml, y el contenido dentro de éste debería ser algo parecido al siguiente:

name: drupalacommerce
recipe: drupal9
config:
  php: 7.2
  webroot: web
  composer_version: '1.10.1'

services:
  phpmyadmin:
    type: phpmyadmin
    hosts:
      - database.drupal9.internal
  drupalcommerce:
    type: mariadb
    portforward: true
    creds:
      user: drupalcommerce
      password: drupalcommerce
      database: drupalcommerce

     Con el archivo de configuración personalizado, estaremos definiendo la versión específica para php y composer, además de los datos relacionados con la base de datos y el servicio de PhpMyAdmin, para administrar nuestras tablas a través de una interfaz gráfica.

     Para nuestro ejemplo, hemos optado por la opción 1, por lo que una vez creada la carpeta para nuestro proyecto, hemos configurados los permisos necesarios, evitando fallos durante el proceso de instalación y a continuación, sólo hemso tenido que descargar el esqueleto del drupal commerce, utililizando el comando composer, ayudado de lando.

   Pasos para instalar Drupal Commerce usando el comando lando init

     Paso 1 - Arrancar Lando

        Como ya tenemos el archivo de configuración .lando.yml, dentro de nuestra carpeta y hemos configurado correctamente los permisos, lo siguiente que haremos será arrancar lando, para poder comenzar a ejecutar los comandos de descarga e instalación de Drupal commerce:

lando init

    Paso 2 - Iniciar la descarga del esqueleto para Drupal Commerce

        Una vez terminado el proceso de arranque para Lando, podremos iniciar la descarga de los archivos necesarios para la instalación de nuestra tienda, así que jecutaremos el siguiente comando, que nos creará una carpeta, con todos los archivos, de la cual tendremos que mover su contenido, una vez terminada la descarga, para que ocupen la carpeta principal de nuestro proyecto:

     lando composer create-project drupalcommerce/project-base mystore --stability dev

    Paso 3 - Extraer los arhivos descargados a la carpeta raiz

     En cuanto termine la descarga de los archivo, extraremos todo el contenido de mystore lo recolocaremos en nuestra carpeta raíz del proyecto:

sudo mv mystore/* .

sudo mv mystore/.* .

     Por último, borraremos la carpeta, para que no nos moleste:

sudo rm -rf mystore

    Paso 4 - Actualizar las dependencias de Drupal Commerce

     Anter de comenzar con la instalación de nuestra tienda virtual, nos aseguraremos de que tenemos todo lo necesario, para ello, ejecutaremos el comando de composer que se encargará de actualizar todas las dependencias definidas en el composer.json:

lando composer update

   Paso 5 - Que comience la fiesta!!!

     Al igual que cualquier instalación de Drupal, una vez tenemos listo todo lo anterior, sólo tendremos que hacer acceder al navegador y hacer clic en las diferentes pantallas, hasta llegar al final del proceso. 

     Si quieres confirmar los datos de tu proyecto, antes de comenzar con la instalacíon, puedes ejecutar el comando de información de Lando:

lando info

     Presta atención especial, en la ventana donde introduces los datos de conexión, ya que en el campo para el host de la base de datos, no te permitirá colocar localhost, como en una instalación común de Drupal, el resto de pasos será el mismo de siempre.

     A medida que vayas avanzando en el proceso de instalación, verás el algún momento que se actualizarán las traducciones, en el caso de que hayas optado por una instalación como yo, en Español.

     Por último rellenarás la pantalla con los datos sobre tu usuario, el nombre del sitio, idioma, etc. y finalmente, verás la pantalla de bienvenida de tu Drupal Commerce, lista para que puedas comenzar a explorar y personalizarla a tu antojo.

     En los próximos capítulos, instalaremos algunos módulos que nos servirán de ayuda y configuraremos la comunicación entre nuestro Drupal Commerce y Next.js.

     Nos vemos pronto!!!