Uno de los discursos que me interesó en Meet Magento Baltics fue la charla de Sander Mangel sobre Vue Storefront (VSF) con Magento.
PWA es un área prometedora de desarrollo en desarrollo web. Los desarrolladores de Magento 2 ofrecen su propio conjunto de herramientas para crear una aplicación web moderna y orientada a dispositivos móviles que cumpla con las tradiciones de Magento, y los desarrolladores de Vue Storefront han tomado el camino de crear un frente universal que pueda interactuar con varios backends a través de adaptadores (Magento, WooComerce, Odoo). ..). Hace unos meses, probé el PWA Studio de Magento y llegué a la conclusión de que la solución aún está húmeda. La versión demo de Vue Storefront me causó una muy buena impresión y quería sentir esta solución más íntimamente.
Rindo homenaje a los muchachos que prepararon la demostración para la implementación : es suficiente para cumplir con las condiciones (tienen preinstalados nodejs, yarn, docker, ...), seleccionan todas las opciones de forma predeterminada durante el proceso de instalación y pueden obtener su propia máquina PWA similar a la versión de demostración. Pero no necesito tener una demostración más, necesito conectar Vue Storefront a los proyectos que ya tengo. Y aquí comienza la emboscada.
Los desarrolladores de Magento tienen una buena comprensión del mundo de PHP y, por regla general, no son muy buenos sobre el mundo de nodejs. Cosas triviales para el segundo mundo causan estupor entre los habitantes del primer mundo. Debajo del corte, describí mi segundo enfoque para implementar Vue Storefront en un intento de conectarlo a mi proyecto existente. Debo decir de inmediato que el resultado del segundo enfoque que tengo es una aplicación que no está conectada a nada, pero que al menos se está cargando en el navegador. Parece que tendré que hacer más de un enfoque hasta obtener el resultado deseado.
Propósito
En el proceso de familiarizarme con Vue Storefront, mis objetivos se volvieron más modestos y modestos, mientras que me decidí por uno muy modesto: ensamblar el proyecto en un servidor separado y cargar la aplicación en el navegador.
Ambiente de trabajo
Para la pureza de los experimentos, uso IaaS . De los proveedores de servicios enumerados en la tabla, me decidí por Exoscale (mi enlace de referencia para el registro). El depósito mínimo en el registro es de 5 EUR (+ 21% de IVA europeo), pero esta cantidad es suficiente para jugar más de una vez. El servicio realmente requiere dinero solo para lo que usa (potencia informática, espacio en disco, red).
Jugué en la versión pequeña de Linux Ubuntu 18.04 LTS de 64 bits (2x CPU de 2198 MHz, 2 GB de RAM, disco de 10GB).
Preparación del ambiente de trabajo:
$ sudo -i # apt update # apt upgrade -y
Instalar nodejs y npm:
# curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash - # apt-get install -y nodejs # node --version && npm --version v12.13.0 6.12.0
Instalación de hilo:
# curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - # echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list # apt-get update && sudo apt-get install yarn # yarn --version 1.19.1
Instalar VSF
Preinstale PM2 y vue-storefront / cli :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
Salimos de root y creamos la aplicación vue-storefront versión 1.10.4 en modo manual:
# exit $ cd ~ $ vsf init Check avalilable versions ? Which version of Vue Storefront you'd like to install? Stable versions (recommended for production) ? Select specific version v1.10.4 ? Would you like to use friendly installer or install Vue Storefront manually? Manual installation Copying Vue Storefront files
Vaya al directorio raíz de la aplicación y cree una configuración local:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
La configuración básica está en el archivo ./config/default.json . Nos conviene con la excepción de la opción server.host , es decir Nos vamos a conectar al servidor de forma remota. Dejé el puerto ( server.port ) por defecto: 3000.
Construir aplicación
Aquí tuve que experimentar, al final llegué a la siguiente secuencia de comandos:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Iniciar y detener la aplicación
$ yarn start $ pm2 stop all
Conexión de la aplicación
Dirección de la aplicación: http : //xxx.xxx.xxx.xxxhaps000/ Como resultado, tenemos un mensaje de error:
Conclusión
Sí, el resultado no es muy impresionante, pero lo hizo sin magic especial. Redis, ElasticSearch, GraphQL: todo esto está configurado en ./config/default.json y actualmente no se encuentra. Y también debería haber vue-storefront-api y un módulo para replicar datos entre vue-storefront-api y Magento 2. Realmente espero poder escribir más sobre ellos.
Eso es todo por ahora. Gracias por leer