PWA-Setup in Magento 2.3.0

1. Wie können wir es in Magento 2.3.0 verwenden?
2. In Magento 2.3.0 behaupten sie, PWA wird unterstützt?
3. Wie können wir mit dieser großartigen Funktion beginnen, um das Neue zu erleben?

Für weitere Informationen

** Beginnen wir mit der Installation von Magento 2.3 mit PWA **

1. Geben Sie den folgenden Befehl in DIR / var / www / html / ein (m230 ist mein Magento 2.3-Verzeichnis):

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

2. Installieren Sie Magento über die Befehlszeile:

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. Erstellen Sie ein Basis-Pwa-Thema, das das übergeordnete Thema für [PWA Venia-Thema] ist. [25]

• Lassen Sie uns jetzt das Basis-Pwa-Theme-Repository klonen.

4. Erstellen Sie hier ein Verzeichnis app/design/frontend/Magento/pwaund kopieren Sie alle Dateien und Verzeichnisse des Basisthemas.

• Lassen Sie uns überprüfen, ob das Basisthema verfügbar ist oder nicht.

• Run: php bin/magento setup:upgrade

• Navigieren Sie zu Ihrem Magento- Administrator-> Inhalt-> Themen

5. Laden Sie das PWA-Studio-Projekt herunter.

6. Navigieren Sie zum Stammverzeichnis Ihrer Magento-Installation und erstellen Sie einen Pwa-Symlink-Ordner, der mit dem Modulverzeichnis des Projekts (pwa-studio / packages / pwa-module) verknüpft ist.

• Von diesem Verzeichnis aus führe ich meinen Befehl aus - / var / www / html / m230

• Dies ist ein Verzeichnis, in dem meine von pwa heruntergeladene Quelle / var / www / html / PWA / lautet.

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

7. Verknüpfen Sie auch das Themenverzeichnis. Navigieren Sie zum Stammverzeichnis Ihrer Magento-Installation und erstellen Sie einen Pwa-Symlink-Ordner, der mit dem Modulverzeichnis des Projekts (pwa-studio / packages / venia-concept) verknüpft ist.

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

8. Navigieren Sie nun zum venia-concept-Verzeichnis Ihres pwa-studio-Projekts, kopieren Sie es .env.distin eine neue .envDatei und aktualisieren Sie die Variablen mit der URL zu Ihrem Magento-Entwicklungsspeicher.

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

cp .env.dist .env

9. Installieren Sie das Venia Theme und das Pwa Modul:

run: php bin/magento setup:upgrade

wir können sehen, dass das venia-thema erfolgreich installiert wurde.

10. Konfigurieren Sie das Thema venia aus admin->Content->Configuration

11. Navigieren Sie zu path ( /var/www/html/PWA/pwa-studio) run:

npm install

oder

npm install webpack-dev-server -g

12. Und schließlich navigieren Sie zu /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Herzliche Glückwünsche! Sie haben Ihre Entwicklungsumgebung für das Venia-Themenprojekt eingerichtet.

Wenn Sie so schnell wie möglich etwas für die Produktion benötigen: Ich habe das System Vue Store Front (Open-Source-System, die Community, die durch lockere Antworten auf Fragen verfügbar ist, installiert und verwendet , obwohl ich einige Probleme hatte, aber insgesamt ist das System in dieser Phase sehr nützlich der PWA-Integration)

-> Es wird eher Vue als React verwendet. Außerdem werden ElasticSearch und Docker verwendet. Insgesamt stellt dieses System hauptsächlich über die Rest-API eine Verbindung zu Magento 2 her (und es gibt einen Anfang mit GraphQL).

um loszulegen:

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

cd vue-storefront
yarn install
npm run installer

und dann yarn dev, um den Cache zu leeren, aber Vue-Änderungen sollten nach ein paar Sekunden wie ein Beobachtungsprozess kompiliert werden.

Natürlich ist die PWA, die Magento 2 erstellt, auch großartig, aber leider bewegt sie sich schnell und es ist nicht klar, wann sie bereit sein wird, mit VS (über dem System) zu konkurrieren.

-> Ich fand es besser, graphql zu lernen und möglicherweise einfacher anzupassen, aber es war möglicherweise aus dem falschen Grund zu der Zeit, dass diese PWA rohes CSS in den Reaktionsdateien hatte.

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

npm install

Bei der Installation von Magento 2.3 müssen Sie Venia Sample Data installieren (siehe 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

und hier sollten Sie eine brandneue PWA bereithalten: Sie scheint sich schnell zu bewegen wie vor einem Monat, es gab viel WIP und heute kann ich zum Beispiel sehen, dass die Sass-Integration fehlte. Diese zweite Option ist möglicherweise besser, wenn Sie bereit sind, diese PWA mit der Magento-Community zu lernen und zu erstellen

Installieren Sie zunächst die neueste Version von Node j mit dem folgenden Befehl

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

Gehen Sie nun zum Magento-Stammverzeichnis:

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

Laden Sie das PWA-Klonverzeichnis herunter und installieren Sie npm mit den folgenden Befehlen in diesem Verzeichnis

- 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

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

wenn npx nicht gefunden Fehler PWA magento 2.3

- sudo npm i -g npx

Wenn ein Fehler wie folgt gefunden wurde: Das Modul 'envalid' kann nicht gefunden werden. Führen Sie dann den folgenden Befehl aus

- sudo npm install i envalid
- sudo npm install envalid

Wenn der Fehler so ist, führen Sie den folgenden Befehl aus: lerna ERR! npm run build -s hat 1 in '@ magento / venia-concept' beendet.

- 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

Sie können zum folgenden Blog gehen.

So richten Sie Magento 2.3 PWA ein

Außerdem wird ausführlich erläutert, wie Sie Magento 2.3 PWA für Ihre Website verwenden und verwenden.

Überprüfen Sie die Working Magento 2.3 PWA-Demo