drupal commerce

Next.js | Instalación con Lando

Texto

    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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

Hasta la próxima.

Next | Módulo Drupal

Texto

Nextjs Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Nextjs Drupal Module | www.drupaladicto.com - Consultor especializado en drupal y symfony

Next en Drupal Commerce | Creación de un sitio

Texto

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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:

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

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:

   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

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

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

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

    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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Drupal Commerce y Next.js | Prerrequisitos

Video de Youtube
URL de Video remoto
Texto

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

 

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

      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:

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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

Drupal Commerce | Instalación con Lando

Video de Youtube
URL de Video remoto
Texto

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

 

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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.

Curso Drupal Commerce Nextjs | www.drupaladicto.com - Consultor especializado en drupal y symfony

     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!!!

Drupal Commerce Headless con Next.js | Introducción

Video de Youtube
URL de Video remoto

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 esta serie de videos, nos introduciremos en el mundo del e-commerce o tiendas virtuales, utilizando Drupal Commerce, y para hacerlo más interesante, trabajaremos el frontend desacoplado, con el Framework Next.js . 

     Un proyecto Headless o Desacoplado, permite utilizar la potencia y versatilidad de Drupal o Drupal Commerce, para que se ocupe de todas las funcionalidades relacionadas con base de datos y contenidos, en el Backend, complementándolo con herramientas orientadas a la presentación de contenidos, de manera más efectiva, como pueden ser Angular, React, Vue, Nuxt.js o Nextjs.