- Comment pouvons-nous l'utiliser dans Magento 2.3.0?
- Dans Magento 2.3.0, ils prétendent que PWA est pris en charge?
- Comment pouvons-nous commencer avec cette grande fonctionnalité pour découvrir la nouvelle chose?
Réponses:
** 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 --admin-email=admin@admin.com --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]
4. Créez un répertoire app/design/frontend/Magento/pwa
et 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.dist
dans un nouveau .env
fichier 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 dev
pour 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