L'un des discours qui m'ont intéressé lors de Meet Magento Baltics était le discours de Sander Mangel sur Vue Storefront (VSF) avec Magento.
PWA est un domaine de développement prometteur dans le développement Web. Les développeurs de Magento 2 proposent leur propre ensemble d'outils pour créer une application Web moderne et mobile conforme aux traditions de Magento, et les développeurs de Vue Storefront ont choisi de créer un front universel pouvant interagir avec divers backends via des adaptateurs (Magento, WooComerce, Odoo, etc.). ..). Il y a quelques mois, j'ai essayé le PWA Studio de Magento et je suis arrivé à la conclusion que la solution était encore humide. La version de démonstration de Vue Storefront m'a fait une très bonne impression et je voulais ressentir cette solution plus intimement.
Je rends hommage aux gars qui ont préparé la démo pour le déploiement - il suffit de remplir les conditions (avoir préinstallé nodejs, yarn, docker, ...), sélectionner toutes les options par défaut lors du processus d'installation, et vous pouvez obtenir votre propre machine PWA similaire à la version démo. Mais je n'ai pas besoin d'avoir une autre démonstration, je dois connecter Vue Storefront aux projets que j'ai déjà. Et ici, l'embuscade commence.
Les développeurs de Magento ont une bonne compréhension du monde de PHP et, en règle générale, pas très bien du monde de nodejs. Les choses insignifiantes pour le deuxième monde provoquent la stupeur chez les habitants du premier monde. Sous la coupe, j'ai décrit ma deuxième approche pour déployer Vue Storefront dans une tentative de le connecter à mon projet existant. Je dois dire tout de suite que le résultat de la deuxième approche que j'ai est une application qui n'est connectée à rien, mais qui au moins se charge dans le navigateur. Il est très probable que je devrai faire plus d'une approche jusqu'à ce que j'obtienne le résultat souhaité.
But
Dans le processus de familiarisation avec Vue Storefront, mes objectifs sont devenus plus modestes et plus modestes, tandis que j'en ai choisi un très modeste - assembler le projet sur un serveur séparé et charger l'application dans le navigateur.
Environnement de travail
Pour la pureté des expériences, j'utilise IaaS . Parmi les prestataires de services répertoriés dans le tableau, j'ai opté pour Exoscale (mon lien de parrainage pour l'inscription). Le dépôt minimum à l'inscription est de 5 EUR (+ 21% de TVA Européenne), mais ce montant est suffisant pour jouer plus d'une fois. Le service ne prend vraiment de l'argent que pour ce que vous utilisez (puissance de calcul, espace disque, réseau).
J'ai joué sur la petite version de Linux Ubuntu 18.04 LTS 64 bits (2x CPU 2198 MHz, 2 Go de RAM, 10 Go de disque).
Préparation de l'environnement de travail:
$ sudo -i # apt update # apt upgrade -y
Installez nodejs & 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
Installation de fil:
# 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
Installer VSF
Préinstallez PM2 et vue-storefront / cli :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
Nous quittons root et créons l'application vue-storefront version 1.10.4 en mode manuel:
# 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
Accédez au répertoire racine de l'application et créez une configuration locale:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
La configuration de base se trouve dans le fichier ./config/default.json . Cela nous convient à l'exception de l'option server.host , c'est-à-dire nous allons nous connecter à distance au serveur. J'ai quitté le port ( server.port ) par défaut - 3000.
Créer une application
Ici, je devais expérimenter, à la fin je suis arrivé à la séquence de commandes suivante:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Démarrage et arrêt de l'application
$ yarn start $ pm2 stop all
Connexion d'application
Adresse de l'application: http : //xxx.xxx.xxx.xxxhaps000/ Par conséquent, nous avons un message d'erreur:
Conclusion
Oui, le résultat n'est pas très impressionnant, mais cela s'est passé sans magic particulière. Redis, ElasticSearch, GraphQL - tout cela est configuré dans ./config/default.json et est actuellement manquant. Et il devrait également y avoir vue-storefront-api et un module de réplication de données entre vue-storefront-api et Magento 2. J'espère vraiment que j'écrirai plus à leur sujet.
C'est tout pour l'instant. Merci d'avoir lu.