Configuración de PWA en Magento 2.3.0

1. ¿Cómo podemos usarlo en Magento 2.3.0?
2. En Magento 2.3.0, ¿afirman que PWA es compatible con uno?
3. ¿Cómo podemos comenzar con esta gran característica para experimentar lo nuevo?

Para más referencia

** Comencemos con la instalación de Magento 2.3 con PWA **

1. Ingrese el siguiente comando en DIR / var / www / html / (m230 es mi directorio de Magento 2.3):

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

2. Instale Magento por línea 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. Cree el tema base pwa que será el padre de ellos para [tema Venia PWA.] [25]

• Por ahora vamos a clonar el repositorio de temas pwa base.

4. Cree un directorio app/design/frontend/Magento/pway copie todos los archivos y directorios del tema base aquí.

• Verifiquemos que el tema base esté disponible o no.

• Run: php bin/magento setup:upgrade

• Y navegue a su Magento Admin-> Contenido-> Temas

5. Descargue el proyecto de estudio PWA.

6. Navegue al directorio raíz de su instalación de Magento y cree una carpeta de enlaces simbólicos Pwa que se vincule al directorio de módulos del proyecto (pwa-studio / packages / pwa-module).

• desde este directorio ejecuto mi comando - / var / www / html / m230

• Este es un directorio donde mi fuente descargada pwa es / var / www / html / PWA /

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

7. Enlace el directorio del tema también. Navegue al directorio raíz de su instalación de Magento y cree una carpeta de enlaces simbólicos Pwa que se vincule al directorio del módulo del proyecto (pwa-studio / packages / venia-concept).

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

8. Ahora navegue al directorio venia-concept de su proyecto pwa-studio, copie .env.disten un nuevo .envarchivo y actualice las variables con la URL a su tienda de desarrollo Magento.

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

cp .env.dist .env

9. Instale el tema venia y el Módulo Pwa:

run: php bin/magento setup:upgrade

podemos ver que el tema venia se instaló con éxito.

10. Configure el tema de venia desde admin->Content->Configuration

11. Navegue a la ruta ( /var/www/html/PWA/pwa-studio) ejecute:

npm install

o

npm install webpack-dev-server -g

12. Y finalmente navega a /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

¡Felicidades! Ha configurado su entorno de desarrollo para el proyecto temático Venia.

Si necesita algo listo para la producción lo antes posible: instalé y utilicé el sistema Vue Store Front (sistema de código abierto, la comunidad disponible a través de respuestas flojas a las preguntas, aunque tuve algunos aciertos y errores, pero en general el sistema es muy útil en esta etapa de la integración PWA)

-> Utiliza Vue en lugar de React. Y también usa ElasticSearch y Docker. En general, este sistema se conecta principalmente a Magento 2 a través de Rest API (y hay un comienzo con GraphQL)

Para empezar:

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

cd vue-storefront
yarn install
npm run installer

y luego yarn devpara vaciar la memoria caché, pero los cambios vue deben compilarse después de unos segundos como un proceso de observación.

Por supuesto, el PWA que Magento 2 construye también es excelente, pero desafortunadamente se está moviendo rápido y no está claro cuándo estará listo para competir con VS (sistema anterior).

-> Encontré mejor aprender graphql y posiblemente más fácil de personalizar, pero posiblemente fue por la razón incorrecta en ese momento, este PWA tenía CSS sin procesar en los archivos de reacción.

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

npm install

en su instalación de magento 2.3, necesita instalar 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

y aquí debería tener una nueva PWA lista: parece que se movió rápido como hace un mes, había mucho WIP y hoy, puedo ver, por ejemplo, la falta de integración sass. Esta segunda opción puede ser mejor si está listo para aprender y construir este PWA con la comunidad de Magento

En primer lugar, instale la última versión de Node js con el siguiente comando

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

Ahora vaya al directorio raíz de Magento:

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

Descargue el directorio de clonación PWA e instale npm en este directorio utilizando los siguientes 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

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

si npx no se encuentra el error PWA magento 2.3

- sudo npm i -g npx

si se encuentra un error como este: No se puede encontrar el módulo 'inválido' y luego ejecute el siguiente comando

- sudo npm install i envalid
- sudo npm install envalid

si hay un error como este, ejecute el siguiente comando: lerna ERR! npm run build -s salió 1 en '@ 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

Puedes ir al siguiente blog.

Cómo configurar Magento 2.3 PWA

Además, explicará en detalle cómo usar Magento 2.3 PWA para su sitio web y su uso.

Verifique la demostración de Working Magento 2.3 PWA