Налаштування 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-> Вміст-> Теми

5. Завантажте проект студії PWA.

6. Перейдіть до кореневого каталогу установки Magento та створіть папку символьної посилання Pwa, що посилається на каталог модулів проекту (pwa-studio / пакети / pwa-модуль).

• з цього каталогу я запускаю свою команду - / 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 / пакети / venia-concept).

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

8. Тепер перейдіть до каталогу venia-концепції вашого проекту 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. Налаштуйте тему venia від 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 через Rest API (і починається з 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 Root:

- 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