Настройка PWA в Magento 2.3.0

1. Как мы можем использовать его в Magento 2.3.0?
2. В Magento 2.3.0 они утверждают, что PWA поддерживается один?
3. Как мы можем начать с этой замечательной функции, чтобы испытать новое?

Для получения дополнительной информации

** Давайте начнем с установки Magento 2.3 с PWA **

1. Введите следующую команду в DIR / var / www / html / (m230 - это мой каталог Magento 2.3):

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

2. Установите Magento из командной строки:

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. Создайте базовую тему pwa, которая будет для них родительской для [PWA Venia theme.] [25]

• А пока давайте клонируем базовый репозиторий тем pwa.

4. Создайте каталог app/design/frontend/Magento/pwaи скопируйте все файлы и каталоги базовой темы здесь.

• Давайте проверим, доступна ли базовая тема или нет.

• Run: php bin/magento setup:upgrade

• И перейдите к вашему Magento Admin-> Content-> Themes

5. Скачать проект студии PWA.

6. Перейдите в корневой каталог установки Magento и создайте папку символической ссылки Pwa, ссылающуюся на каталог модуля проекта (pwa-studio / packages / pwa-module).

• из этого каталога я запускаю свою команду - / var / www / html / m230

• Это каталог, где мой загруженный исходный код pwa - / var / www / html / PWA /

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

7. Также свяжите каталог тем. Перейдите к корневому каталогу вашей установки Magento и создайте папку символической ссылки Pwa, ссылающуюся на каталог модуля проекта (pwa-studio / packages / venia-concept).

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

8. Теперь перейдите в каталог venia-concept проекта вашего pwa-studio, скопируйте .env.distв новый .envфайл и обновите переменные с помощью URL-адреса вашего магазина разработки Magento.

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

cp .env.dist .env

9. Установите тему Venia и модуль Pwa:

run: php bin/magento setup:upgrade

мы видим, что тема Venia успешно установлена.

10. Настройте тему вены из admin->Content->Configuration

11. Перейдите к пути ( /var/www/html/PWA/pwa-studio) и выполните:

npm install

или

npm install webpack-dev-server -g

12. И, наконец, перейдите к /var/www/html/PWA/pwa-studio/packages/venia-concept

npm start

Поздравляем! Вы настроили среду разработки для тематического проекта Venia.

Если вам нужно что-то готовое к работе как можно скорее: я установил и использовал систему Vue Store Front (система с открытым исходным кодом, сообщество доступно через слабые ответы на вопросы, хотя у меня было несколько проблем, но в целом система очень полезна на данном этапе интеграции PWA)

-> Он использует Vue, а не React. И он также использует ElasticSearch и Docker. В целом, эта система подключается в первую очередь к Magento 2 через API Rest (и есть начало с GraphQL)

для начала:

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

cd vue-storefront
yarn install
npm run installer

а затем yarn devочистить кэш, но изменения vue должны быть скомпилированы через несколько секунд, как процесс наблюдения.

Конечно, PWA, который создает Magento 2, также великолепен, но, к сожалению, он движется быстро, и неясно, когда он будет готов конкурировать с VS (над системой).

-> Я считаю, что лучше изучать graphql и, возможно, легче его настроить, но в то время это, возможно, было по неправильной причине, у этого PWA была необработанная CSS в файлах реакции.

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

npm install

при установке magento 2.3 вам необходимо установить образцы данных Venia (см. 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

и здесь у вас должен быть готов новый PWA: кажется, он движется быстро, как и месяц назад, было много WIP, и сегодня я вижу, например, интеграцию sass, которая отсутствовала. Этот второй вариант может быть лучше, если вы готовы изучать и создавать этот PWA с сообществом Magento.

Прежде всего установите последнюю версию Node js, используя следующую команду

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

Теперь перейдите в корневой каталог Magento:

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

Загрузите каталог клонов PWA и установите npm в этот каталог, используя следующие команды

- 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

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

если npx не найдена ошибка PWA magento 2.3

- sudo npm i -g npx

если ошибка найдена следующим образом: не удается найти модуль 'envalid', выполните следующую команду

- sudo npm install i envalid
- sudo npm install envalid

если возникла такая ошибка, выполните следующую команду: lerna ERR! npm run build -s вышел из 1 в «@ 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

Вы можете перейти в следующий блог.

Как настроить Magento 2.3 PWA

Кроме того, он подробно объяснит, как использовать Magento 2.3 PWA для вашего веб-сайта и использовать.

Проверьте рабочий Magento 2.3 PWA Демо