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.