Konfiguracja PWA w Magento 2.3.0

1. Jak możemy go używać w Magento 2.3.0?
2. W Magento 2.3.0 twierdzą, że PWA jest obsługiwany?
3. Jak zacząć od tej wspaniałej funkcji, aby doświadczyć nowej rzeczy?

Więcej informacji

** Zacznijmy od instalacji Magento 2.3 z PWA **

1. Wpisz następujące polecenie w DIR / var / www / html / (m230 to mój katalog Magento 2.3):

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

2. Zainstaluj Magento za pomocą wiersza poleceń:

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. Utwórz podstawowy motyw pwa, który będzie nadrzędny dla [motywu PWA Venia.] [25]

• Na razie pozwala klonować podstawowe repozytorium motywów pwa.

4. Utwórz katalog app/design/frontend/Magento/pwai skopiuj tutaj wszystkie pliki i katalogi motywu podstawowego.

• Sprawdźmy, czy motyw podstawowy jest dostępny, czy nie.

• Run: php bin/magento setup:upgrade

• I przejdź do Administratora Magento-> Treść-> Motywy

5. Pobierz projekt studia PWA.

6. Przejdź do katalogu głównego instalacji Magento i utwórz folder dowiązania symbolicznego Pwa łączący z katalogiem modułu projektu (pwa-studio / packages / pwa-module).

• z tego katalogu uruchamiam polecenie - / var / www / html / m230

• To jest katalog, w którym moim pobranym źródłem pwa jest / var / www / html / PWA /

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

7. Połącz również katalog motywów. Przejdź do katalogu głównego instalacji Magento i utwórz folder dowiązania symbolicznego Pwa łączący z katalogiem modułów projektu (pwa-studio / packages / venia-concept).

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

8. Teraz przejdź do katalogu venia-concept swojego projektu pwa-studio, skopiuj .env.distdo nowego .envpliku i zaktualizuj zmienne o adres URL do sklepu programistycznego Magento.

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

cp .env.dist .env

9. Zainstaluj motyw Venia i moduł Pwa:

run: php bin/magento setup:upgrade

widzimy, że motyw Venia został pomyślnie zainstalowany.

10. Skonfiguruj motyw Venia z admin->Content->Configuration

11. Przejdź do /var/www/html/PWA/pwa-studiorun path ( ):

npm install

lub

npm install webpack-dev-server -g

12. I wreszcie przejdź do /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Gratulacje! Skonfigurowałeś środowisko programistyczne dla projektu motywu Venia.

Jeśli potrzebujesz czegoś gotowego do produkcji jak najszybciej: zainstalowałem i użyłem systemu Vue Store Front (system open source, społeczność dostępna poprzez luźne odpowiedzi na pytania, chociaż miałem kilka trafień, ale ogólnie system jest bardzo przydatny na tym etapie integracji PWA)

-> Używa Vue zamiast React. Wykorzystuje także ElasticSearch i Docker. Ogólnie rzecz biorąc, ten system łączy się przede wszystkim z Magento 2 poprzez Rest API (i jest start z GraphQL)

rozpocząć:

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

cd vue-storefront
yarn install
npm run installer

a następnie yarn devopróżnić pamięć podręczną, ale zmiany vue powinny zostać skompilowane po kilku sekundach jak proces oglądania.

Oczywiście PWA, które buduje Magento 2, jest również świetne, ale niestety szybko się porusza i nie jest jasne, kiedy będzie gotowy konkurować z VS (powyżej systemu).

-> Uważam, że lepiej jest uczyć się grafql i być może łatwiej go dostosować, ale prawdopodobnie było to z niewłaściwego powodu, gdy ten PWA miał surowy plik css w plikach reagujących.

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

npm install

w instalacji magento 2.3 musisz zainstalować przykładowe dane Venia (patrz 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

i tutaj powinieneś mieć zupełnie nowy PWA: wydaje się, że porusza się szybko jak miesiąc temu, było dużo WIP i dzisiaj widzę na przykład brak integracji sass. Ta druga opcja może być lepsza, jeśli jesteś gotowy do nauki i zbudowania tego PWA ze społecznością Magento

Przede wszystkim zainstaluj najnowszą wersję Node js za pomocą następującego polecenia

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

Teraz przejdź do katalogu głównego Magento:

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

Pobierz katalog klonowania PWA i zainstaluj npm w tym katalogu za pomocą następujących poleceń

- 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

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

jeśli nie znaleziono npx błąd PWA magento 2.3

- sudo npm i -g npx

jeśli znaleziono błąd w ten sposób: Nie można znaleźć modułu „nieważny”, a następnie uruchomić następującą komendę

- sudo npm install i envalid
- sudo npm install envalid

jeśli błąd taki jak ten, uruchom następującą komendę: lerna ERR! npm run build -s zakończył pracę 1 w '@ 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

Możesz przejść do następującego bloga.

Jak skonfigurować Magento 2.3 PWA

Wyjaśni również szczegółowo, jak korzystać z Magento 2.3 PWA na swojej stronie internetowej i użyciu.

Sprawdź działającą wersję demonstracyjną Magento 2.3 PWA