Um dos discursos que me interessaram no Meet Magento Baltics foi a palestra de Sander Mangel sobre o Vue Storefront (VSF) com o Magento.
PWA é uma área promissora de desenvolvimento em desenvolvimento web. Os desenvolvedores do Magento 2 oferecem seu próprio conjunto de ferramentas para criar um aplicativo Web moderno, orientado para dispositivos móveis, em conformidade com as tradições do Magento, e os desenvolvedores do Vue Storefront adotaram o caminho da criação de um front universal que pode interagir com vários back-end por meio de adaptadores (Magento, WooComerce, Odoo ,. ..) Alguns meses atrás, tentei o PWA Studio do Magento e cheguei à conclusão de que a solução ainda está úmida. A versão demo do Vue Storefront causou uma ótima impressão em mim e eu queria sentir essa solução mais intimamente.
Presto homenagem aos caras que prepararam a demo para implantação - é suficiente para atender às condições (tem nodejs pré-instalados, fios, docker, ...), seleciona todas as opções por padrão durante o processo de instalação e você pode montar sua própria máquina PWA semelhante à versão demo. Mas não preciso ter mais uma demonstração, preciso conectar o Vue Storefront aos projetos que já tenho. E aqui começa a emboscada.
Os desenvolvedores do Magento têm uma boa compreensão do mundo do PHP e, como regra, não são muito bons sobre o mundo dos nodejs. Coisas triviais para o segundo mundo causam estupor entre os habitantes do primeiro mundo. Abaixo, descrevi minha segunda abordagem para implantar o Vue Storefront na tentativa de conectá-lo ao meu projeto existente. Devo dizer imediatamente que o resultado da segunda abordagem que tenho é um aplicativo que não está conectado a nada, mas pelo menos carregando no navegador. É muito provável que eu tenha que fazer mais de uma abordagem até obter o resultado desejado.
Finalidade
No processo de me familiarizar com o Vue Storefront, meus objetivos se tornaram mais modestos e mais modestos, enquanto eu decidi por um modesto - montar o projeto em um servidor separado e carregar o aplicativo no navegador.
Ambiente de trabalho
Para a pureza dos experimentos, uso IaaS . Dos prestadores de serviços listados na tabela, optei pelo Exoscale (meu link de referência para registro). O depósito mínimo no momento da inscrição é de 5 EUR (+ 21% de IVA na Europa), mas esse valor é suficiente para jogar mais de uma vez. O serviço realmente leva dinheiro apenas para o que você usa (poder de computação, espaço em disco, rede).
Joguei na versão pequena do Linux Ubuntu 18.04 LTS de 64 bits (CPU 2x 2198 MHz, 2 GB RAM, disco de 10 GB).
Preparação do ambiente de trabalho:
$ sudo -i # apt update # apt upgrade -y
Instale o 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
Instalação de fios:
# 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
Instale o VSF
Pré- instale o PM2 e o vue-storefront / cli :
# npm install pm2@latest -g # pm2 --version 4.1.2 # npm install @vue-storefront/cli@latest -g
Encerramos o root e criamos o aplicativo vue-storefront versão 1.10.4 no 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
Vá para o diretório raiz do aplicativo e crie uma configuração local:
$ cd vue-storefront/ $ cat > ./config/local.json { "server": { "host": "0.0.0.0" } }
A configuração básica está no arquivo ./config/default.json . Ele nos convém, com exceção da opção server.host , ou seja, nós estamos indo para conectar ao servidor remotamente. Deixei a porta ( server.port ) por padrão - 3000.
Criar aplicativo
Aqui eu tive que experimentar, no final, cheguei à seguinte sequência de comandos:
$ npm install $ yarn install $ yarn build $ yarn upgrade # ,
Iniciando e Parando o Aplicativo
$ yarn start $ pm2 stop all
Conexão de aplicativo
Endereço do aplicativo: http : //xxx.xxx.xxx.xxxhaps000/ Como resultado, temos uma mensagem de erro:
Conclusão
Sim, o resultado não é muito impressionante, mas ocorreu sem magic especial. Redis, ElasticSearch, GraphQL - tudo isso está configurado em ./config/default.json e está ausente no momento. E também deve haver o vue-storefront-api e um módulo para replicar dados entre o vue-storefront-api e o Magento 2. Espero realmente escrever mais sobre eles.
Por enquanto é tudo. Obrigado pela leitura.