Configuração do PWA no Magento 2.3.0

1. Como podemos usá-lo no Magento 2.3.0?
2. No Magento 2.3.0, eles afirmam que o PWA é suportado?
3. Como podemos começar com esse ótimo recurso para experimentar a novidade?

Para mais referência

** Vamos começar com a instalação do Magento 2.3 com PWA **

1. Digite o seguinte comando em DIR / var / www / html / (m230 é o meu diretório Magento 2.3):

composer create-project --repository=https://repo.magento.com/ magento/project-community-edition=2.3.* --stability=beta m230

2. Instale o Magento por linha de comando:

bin/magento setup:install --base-url=http://localhost/m230 --db-host=localhost --db-name=m230 --db-user=root --db-password=root --backend-frontname=admin --admin-firstname=admin --admin-lastname=admin [email protected] --admin-user=admin --admin-password=admin123 --language=en_US --currency=USD --timezone=America/Chicago --use-rewrites=1

3. Crie o tema pwa base, que será o pai deles para [PWA Venia theme.] [25]

• Por enquanto, vamos clonar o repositório de temas pwa base.

4. Crie um diretório app/design/frontend/Magento/pwae copie todos os arquivos e diretórios do tema base aqui.

• Vamos verificar se o tema base está disponível ou não.

• Run: php bin/magento setup:upgrade

• E navegue até o Magento Admin-> Conteúdo-> Temas

5. Faça o download do projeto do estúdio PWA.

6. Navegue até o diretório raiz da instalação do Magento e crie uma pasta de link simbólico do Pwa com o link para o diretório do módulo do projeto (pwa-studio / packages / pwa-module).

• deste diretório, eu executo meu comando - / var / www / html / m230

• Este é um diretório em que minha fonte baixada do pwa é / var / www / html / PWA /

ln -s /var/www/html/PWA/pwa-studio/packages/pwa-module app/code/Magento/Pwa

7. Vincule também o diretório do tema. Navegue até o diretório raiz da instalação do Magento e crie uma pasta de link simbólico Pwa vinculando ao diretório do módulo do projeto (pwa-studio / packages / venia-concept).

ln -s /var/www/html/PWA/pwa-studio/packages/venia-concept app/design/frontend/Magento/venia

8. Agora navegue até o diretório venia-concept do seu projeto pwa-studio, copie .env.distpara um novo .envarquivo e atualize as variáveis ​​com o URL para sua loja de desenvolvimento Magento.

cd /var/www/html/PWA/pwa-studio/packages/venia-concept

cp .env.dist .env

9. Instale o tema venia e o módulo Pwa:

run: php bin/magento setup:upgrade

podemos ver que o tema venia foi instalado com sucesso.

10. Configure o tema venia a partir de admin->Content->Configuration

11. Navegue até o caminho ( /var/www/html/PWA/pwa-studio) executado:

npm install

ou

npm install webpack-dev-server -g

12. E finalmente, navegue até /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Parabéns! Você configurou seu ambiente de desenvolvimento para o projeto temático Venia.

Se você precisar de algo pronto para produção o mais cedo possível: Instalei e usei o sistema Vue Store Front (sistema de código aberto, a comunidade disponível através de respostas frouxas às perguntas, embora eu tenha sofrido algumas falhas, mas no geral o sistema é muito útil nesta fase da integração do PWA)

-> Utiliza Vue em vez de React. E também usa ElasticSearch e Docker. No geral, este sistema está se conectando principalmente ao Magento 2 via Rest API (e começa o GraphQL)

para começar:

Git clone https://github.com/DivanteLtd/vue-storefront

cd vue-storefront
yarn install
npm run installer

e, em seguida, yarn devliberar o cache, mas alterações no vue devem ser compiladas após alguns segundos, como um processo de observação.

Obviamente, o PWA que o Magento 2 constrói também é ótimo, mas infelizmente está se movendo rapidamente e não está claro quando estará pronto para competir com o VS (acima do sistema).

-> Achei melhor aprender graphql e possivelmente mais fácil de personalizar, mas possivelmente pelo motivo errado na época, esse PWA estava tendo css bruto nos arquivos de reação.

https://magento-research.github.io/pwa-studio/venia-pwa-concept/setup/

npm install

na instalação do magento 2.3, é necessário instalar o Venia Sample Data (consulte https://magento-research.github.io/pwa-studio/venia-pwa-concept/install-sample-data/ )

cd packages/venia-concept && npm run build

cd ../.. && npm run watch:venia

e aqui você deve ter um novo PWA pronto: ele parece se mover rapidamente há um mês, havia muito WIP e hoje, posso ver, por exemplo, falta de integração sass. Esta segunda opção pode ser melhor se você estiver pronto para aprender e criar este PWA com a comunidade Magento

Antes de tudo, instale a versão mais recente do Nó js usando o seguinte comando

- curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -
- sudo apt-get install -y nodejs
- sudo apt install npm

Agora vá para o diretório raiz do Magento:

- cd var/www/html/pwa-magento/

Faça o download do diretório clone do PWA e instale o npm nesse diretório usando os seguintes comandos

- git clone https://github.com/magento-research/pwa-studio.git
- cd pwa-studio/
- sudo npm install
- cp packages/venia-concept/.env.dist packages/venia-concept/.env
- sudo npm run build

==========================================

se npx não encontrou erro PWA magento 2.3

- sudo npm i -g npx

se o erro for encontrado assim: Não é possível encontrar o módulo 'envalid', execute o seguinte comando

- sudo npm install i envalid
- sudo npm install envalid

se ocorrer um erro como esse, execute o seguinte comando: lerna ERR! npm run build -s saiu 1 em '@ magento / venia-concept'

- sudo npm restart
- sudo npm run stage:venia
- sudo npm cache clean -f
- sudo npm install -g n
- sudo n stable / sudo n latest (depends on version)

===========================================

- sudo npm i @magento/pwa-buildpack
- sudo npm i @magento/upward-js
- sudo npm i @magento/venia-concept

- sudo npm run build
- sudo npm run watch:venia
- sudo npm run watch:all

Você pode ir para o blog a seguir.

Como configurar o Magento 2.3 PWA

Além disso, ele explicará em detalhes sobre como usar o Magento 2.3 PWA para o seu site e usar.

Verificar Working Magento 2.3 PWA Demo