Eine der Reden, die mich bei Meet Magento Baltics interessierten, war das Gespräch von Sander Mangel über Vue Storefront (VSF) mit Magento.
PWA ist ein vielversprechender Entwicklungsbereich in der Webentwicklung. Magento 2-Entwickler bieten ihre eigenen Tools zum Erstellen einer modernen, mobil ausgerichteten Webanwendung an, die den Magento-Traditionen entspricht, und Vue Storefront-Entwickler haben den Weg eingeschlagen, eine universelle Front zu erstellen, die über Adapter mit verschiedenen Backends interagieren kann (Magento, WooComerce, Odoo ,. ..). Vor ein paar Monaten habe ich Magentos PWA Studio ausprobiert und bin zu dem Schluss gekommen, dass die Lösung noch feucht ist. Die Demoversion von Vue Storefront hat mich sehr beeindruckt und ich wollte diese Lösung intensiver erleben.
Ich möchte den Leuten danken, die die Demo für den Einsatz vorbereitet haben - es reicht aus, die Bedingungen zu erfüllen (Knoten, Garn, Andockfenster vorinstalliert zu haben, ...), alle Optionen während des Installationsvorgangs standardmäßig auszuwählen, und Sie können ähnlich wie bei der Demoversion auf Ihrem eigenen PWA-Computer arbeiten. Aber ich brauche keine Demo mehr, ich muss Vue Storefront mit den Projekten verbinden, die ich bereits habe. Und hier beginnt der Hinterhalt.
Magento-Entwickler haben ein gutes Verständnis der Welt von PHP und in der Regel nicht sehr gut über die Welt von NodeJS. Dinge, die für die zweite Welt trivial sind, verursachen Stupor bei den Bewohnern der ersten Welt. Im Folgenden habe ich meinen zweiten Ansatz für die Bereitstellung von Vue Storefront beschrieben, um eine Verbindung zu meinem vorhandenen Projekt herzustellen. Ich muss sofort sagen, dass das Ergebnis meines zweiten Ansatzes eine Anwendung ist, die mit nichts verbunden ist, sondern zumindest in den Browser geladen wird. Es ist sehr wahrscheinlich, dass ich mehr als einen Ansatz ausführen muss, bis ich das gewünschte Ergebnis erhalte.
Zweck
Während ich mich mit Vue Storefront vertraut machte, wurden meine Ziele immer bescheidener, während ich mich für ein sehr bescheidenes Ziel entschied - das Projekt auf einem separaten Server zusammenzustellen und die Anwendung in den Browser zu laden.
Arbeitsumgebung
Für die Reinheit der Experimente verwende ich IaaS . Von den in der Tabelle aufgeführten Dienstleistern habe ich mich für Exoscale entschieden (mein Verweislink zur Registrierung). Die Mindesteinzahlung bei der Registrierung beträgt 5 EUR (+ 21% europäische Mehrwertsteuer), aber dieser Betrag reicht aus, um mehr als einmal zu spielen. Der Dienst kostet wirklich nur das, was Sie verwenden (Rechenleistung, Speicherplatz, Netzwerk).
Ich habe auf der kleinen Version von Linux Ubuntu 18.04 LTS 64-Bit (2x 2198 MHz CPU, 2 GB RAM, 10 GB Festplatte) gespielt.
Vorbereitung des Arbeitsumfelds:
$ sudo -i # apt update # apt upgrade -y
Installieren Sie 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
Garninstallation:
# 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
Installieren Sie VSF
Installieren Sie PM2 und vue-storefront / cli vor :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
Wir verlassen root und erstellen die vue-storefront storefront vue-storefront Anwendung Version 1.10.4 im manuellen Modus:
# 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
Wechseln Sie in das Stammverzeichnis der Anwendung und erstellen Sie eine lokale Konfiguration:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
Die Grundkonfiguration befindet sich in der Datei ./config/default.json . Es passt zu uns mit Ausnahme der Option server.host , d.h. Wir werden uns remote mit dem Server verbinden. Ich habe den Port ( server.port ) standardmäßig verlassen - 3000.
Anwendung erstellen
Hier musste ich experimentieren, am Ende kam ich zu folgender Befehlsfolge:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Anwendung starten und stoppen
$ yarn start $ pm2 stop all
Anwendungsverbindung
Anwendungsadresse: http : //xxx.xxx.xxx.xxxhaps000/ Als Ergebnis haben wir eine Fehlermeldung:
Fazit
Ja, das Ergebnis ist nicht sehr beeindruckend, aber ohne besondere magic . Redis, ElasticSearch, GraphQL - all dies ist in ./config/default.json konfiguriert und fehlt derzeit. Außerdem sollte es vue-storefront-api und ein Modul zum Replizieren von Daten zwischen vue-storefront-api und Magento 2 geben. Ich hoffe wirklich, dass ich mehr darüber schreiben werde.
Das ist alles für jetzt. Danke fürs Lesen.