Configuration de PWA dans Magento 2.3.0

1. Comment pouvons-nous l'utiliser dans Magento 2.3.0?
2. Dans Magento 2.3.0, ils prétendent que PWA est pris en charge?
3. Comment pouvons-nous commencer avec cette grande fonctionnalité pour découvrir la nouvelle chose?

Pour plus de référence

** Commençons par l'installation de Magento 2.3 avec PWA **

1. Entrez la commande suivante dans DIR / var / www / html / (m230 est mon répertoire Magento 2.3):

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

2. Installez Magento par ligne de commande:

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. Créez le thème pwa de base qui sera leur parent pour [Thème PWA Venia.] [25]

• Pour l'instant, permet de cloner le référentiel de thème pwa de base.

4. Créez un répertoire app/design/frontend/Magento/pwaet copiez tous les fichiers et répertoires du thème de base ici.

• Vérifions que le thème de base est disponible ou non.

• Run: php bin/magento setup:upgrade

• Et accédez à votre administrateur Magento-> Contenu-> Thèmes

5. Téléchargez le projet de studio PWA.

6. Accédez au répertoire racine de votre installation Magento et créez un dossier de liens symboliques Pwa reliant au répertoire du module du projet (pwa-studio / packages / pwa-module).

• à partir de ce répertoire, j'exécute ma commande - / var / www / html / m230

• C'est un répertoire où ma source téléchargée pwa est / var / www / html / PWA /

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

7. Liez également le répertoire du thème. Naviguez vers le répertoire racine de votre installation Magento et créez un dossier de liens symboliques Pwa reliant au répertoire du module du projet (pwa-studio / packages / venia-concept).

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

8. Maintenant, accédez au répertoire venia-concept de votre projet pwa-studio, copiez-le .env.distdans un nouveau .envfichier et mettez à jour les variables avec l'URL de votre magasin de développement Magento.

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

cp .env.dist .env

9. Installez le thème venia et le module Pwa:

run: php bin/magento setup:upgrade

nous pouvons voir que le thème venia est installé avec succès.

10. Configurer le thème venia depuis admin->Content->Configuration

11. Accédez à path ( /var/www/html/PWA/pwa-studio) run:

npm install

ou

npm install webpack-dev-server -g

12. Et enfin, accédez à /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Toutes nos félicitations! Vous avez configuré votre environnement de développement pour le projet thématique Venia.

Si vous avez besoin de quelque chose de prêt pour la production dès que possible: j'ai installé et utilisé le système Vue Store Front (système open source, la communauté disponible via des réponses lentes aux questions, bien que j'aie eu quelques réponses aléatoires, mais dans l'ensemble, le système est très utile à ce stade de l'intégration PWA)

-> Il utilise Vue plutôt que React. Et il utilise également ElasticSearch et Docker. Dans l'ensemble, ce système se connecte principalement à Magento 2 via l'API Rest (et il y a un début avec GraphQL)

pour commencer:

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

cd vue-storefront
yarn install
npm run installer

puis yarn devpour vider le cache, mais les changements de vue doivent être compilés après quelques secondes comme un processus de surveillance.

Bien sûr, le PWA que Magento 2 construit est également excellent, mais malheureusement, il évolue rapidement et on ne sait pas quand il sera prêt à rivaliser avec VS (système ci-dessus).

-> J'ai trouvé mieux d'apprendre graphql et peut-être plus facile à personnaliser, mais c'était peut-être pour la mauvaise raison à l'époque, ce PWA avait du CSS brut dans les fichiers React.

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

npm install

sur votre installation magento 2.3, vous devez installer Venia Sample Data (voir 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

et ici, vous devriez avoir une toute nouvelle PWA prête: elle semble évoluer rapidement comme il y a un mois, il y avait beaucoup de WIP et aujourd'hui, je peux voir par exemple l'intégration sass qui manquait. Cette deuxième option peut être meilleure si vous êtes prêt à apprendre et à créer ce PWA avec la communauté Magento

Tout d'abord, installez la dernière version de Node js à l'aide de la commande suivante

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

Maintenant, allez dans le répertoire racine de Magento:

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

Téléchargez le répertoire de clonage PWA et installez npm dans ce répertoire à l'aide des commandes suivantes

- 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 introuvable erreur PWA magento 2.3

- sudo npm i -g npx

si erreur trouvée comme ceci: Impossible de trouver le module 'envalid' puis exécutez la commande suivante

- sudo npm install i envalid
- sudo npm install envalid

si une erreur comme celle-ci, exécutez la commande suivante: lerna ERR! npm run build -s est sorti 1 dans '@ 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

Vous pouvez aller sur le blog suivant.

Comment configurer Magento 2.3 PWA

En outre, il expliquera en détail comment utiliser Magento 2.3 PWA pour votre site Web et votre utilisation.

Vérifiez la démo PWA de Magento 2.3