One of the speeches I was interested in at the Meet Magento Baltics conference was Sander Mangel's talk about the possibilities of using Vue Storefront (VSF) together with Magento.
PWA is a promising area of development in web development. Magento 2 developers offer their own set of tools for creating a modern, mobile-oriented web application that complies with Magento traditions, and Vue Storefront developers have taken the path of creating a universal front that can interact with various backends via adapters (Magento, WooComerce, Odoo,. ..). A few months ago I tried Magento's PWA Studio and came to the conclusion that the solution is still damp. The demo version of Vue Storefront made a very good impression on me and I wanted to feel this solution more intimately.
I pay tribute to the guys who prepared the demo for deployment - it is enough to meet the conditions (have pre-installed nodejs, yarn, docker, ...), select all the options by default during the installation, and you can get on your own PWA machine similar to the demo version. But I don’t need to have one more demo, I need to connect Vue Storefront to the projects I already have. And here the ambush begins.
Magento developers have a good understanding of the world of PHP and, as a rule, not very good about the world of nodejs. Things trivial for the second world cause stupor among the inhabitants of the first world. Under the cut, I described my second approach to deploying Vue Storefront in an attempt to connect it to my existing project. I must say right away that the result of the second approach I have is an application that is not connected to anything, but at least loading into the browser. It looks like I will have to do more than one approach until I get the desired result.
purpose
In the process of getting acquainted with Vue Storefront, my goals became more modest and more modest, while I settled on a very modest one - to assemble the project on a separate server and load the application into the browser.
Work environment
For the purity of the experiments, I use IaaS . Of the service providers listed in the table, I settled on Exoscale (my referral link for registration). The minimum deposit at registration is 5 EUR (+ 21% European VAT), but this amount is enough to play more than once. The service really takes money only for what you use (computing power, disk space, network).
I played on the small version of Linux Ubuntu 18.04 LTS 64-bit (2x 2198 MHz CPU, 2 GB RAM, 10GB disk).
Preparation of the working environment:
$ sudo -i # apt update # apt upgrade -y
Install 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
Yarn installation:
# 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
Install VSF
Preinstall PM2 and vue-storefront / cli :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
We quit root and create the vue-storefront application version 1.10.4 in manual mode:
# 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
Go to the root directory of the application and create a local configuration:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
The basic configuration is in the ./config/default.json file. It suits us with the exception of the server.host option, i.e. we are going to connect to the server remotely. I left the port ( server.port ) by default - 3000.
Build application
Here I had to experiment, in the end I came to the following sequence of commands:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Starting and stopping the application
$ yarn start $ pm2 stop all
Application Connection
Application address: http://xxx.xxx.xxx.xxx{000/ As a result, we have an error message:
Conclusion
Yes, the result is not very impressive, but it did without special magic . Redis, ElasticSearch, GraphQL - all this is configured in ./config/default.json and is currently missing. And there should also be vue-storefront-api and a module for replicating data between vue-storefront-api and Magento 2. I really hope that I will write more about them.
That's all for now. Thanks for reading.