Настройка PWA Studio для Magento 2

Настройка PWA Studio для Magento 2

PWA Studio — официальный набор инструментов Adobe/Magento для создания Progressive Web App поверх Magento 2 backend. Включает: Venia (готовый storefront), Peregrine (React hooks), Buildpack (сборка), UPWARD (serverside routing).

Архитектура

Browser (React SPA)
    ↕ GraphQL
Magento 2 Backend
    ↕ Commerce API
Venia Storefront (PWA Studio)

PWA Studio работает как отдельное Node.js-приложение. Magento — только API-бэкенд, никакого рендеринга на стороне Magento.

Установка

# Node.js 16+, Yarn
node -v  # 16+

# Создать проект на базе Venia
yarn create @magento/pwa my-storefront
# Выбрать: template = @magento/venia-concept

cd my-storefront
cp .env.example .env

.env:

MAGENTO_BACKEND_URL=https://your-m2-backend.com
BRAINTREE_TOKEN=sandbox_...
CHECKOUT_BRAINTREE_TOKEN=sandbox_...
IMAGE_OPTIMIZING_ORIGIN=backend
USE_COMPUTED_IMAGES=true
NEXT_PUBLIC_GTAG_ID=G-...

yarn start  # dev server на :10000
yarn build  # production build

Структура проекта

my-storefront/
├── src/
│   ├── components/        # Переопределение Venia компонентов
│   ├── queries/           # GraphQL запросы
│   └── index.js
├── venia-ui.yml           # Конфигурация Venia
├── package.json
└── .env

Переопределение компонентов (Targets API)

PWA Studio использует систему extensibility через targets — можно переопределять компоненты без форка:

// intercept.js
module.exports = targets => {
    const builtins = targets.of('@magento/venia-ui');

    // Переопределить компонент Header
    builtins.esModules.tap(esModules => {
        esModules.add({
            module: '@my-store/src/components/Header',
            publish: targets => {
                targets.of('@magento/venia-ui').esModules.tap(modules => {
                    const headerModule = modules.get('Header');
                    if (headerModule) {
                        headerModule.module = '@my-store/src/components/Header';
                    }
                });
            }
        });
    });
};

Кастомная страница продукта

// src/components/ProductFullDetail/productFullDetail.js
import React, { useMemo } from 'react';
import { useProductFullDetail } from '@magento/peregrine/lib/talons/ProductFullDetail/useProductFullDetail';
import { gql, useQuery } from '@apollo/client';

const GET_PRODUCT = gql`
    query GetProduct($urlKey: String!) {
        products(filter: { url_key: { eq: $urlKey } }) {
            items {
                id sku name
                price_range {
                    minimum_price { final_price { value currency } }
                }
                media_gallery { url label }
                description { html }
                ... on ConfigurableProduct {
                    configurable_options {
                        label
                        values { label value_index swatch_data { value } }
                    }
                }
            }
        }
    }
`;

const ProductFullDetail = ({ urlKey }) => {
    const { data } = useQuery(GET_PRODUCT, { variables: { urlKey } });
    const product = data?.products?.items?.[0];

    if (!product) return <div>Loading...</div>;

    return (
        <div className="product-detail">
            <h1>{product.name}</h1>
            <p className="price">{product.price_range.minimum_price.final_price.value} ₽</p>
            <div dangerouslySetInnerHTML={{ __html: product.description.html }} />
        </div>
    );
};

UPWARD конфигурация (routing)

# my-storefront.yml
status:
  resolver: inline
  inline: 200

headers:
  resolver: inline
  inline:
    content-type:
      resolver: inline
      inline: 'text/html'

body:
  resolver: file
  file:
    resolver: inline
    inline: './dist/index.html'

Деплой

# Build
yarn build

# Production server (Node.js)
NODE_ENV=production \
MAGENTO_BACKEND_URL=https://m2-backend.com \
node server.js

# Docker
FROM node:16-alpine
COPY . .
RUN yarn && yarn build
EXPOSE 10000
CMD ["node", "server.js"]

Альтернативы PWA Studio

PWA Studio — официально, но сложно и медленно развивается. Альтернативы:

• Vue Storefront 2 — более активное сообщество, Nuxt.js-based
• ScandiPWA — быстрее, ближе к стандартному Magento UX
• Hyva Themes — НЕ PWA, но лёгкий React/Alpine.js фронтенд, популярен

Сроки

Базовый стор на Venia с переопределёнными ключевыми компонентами — 4–6 недель. Полноценный кастомный сторефронт с дизайн-системой — 3–5 месяцев.