Налаштування 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-бекенд, без рендерингу.

Установка

# 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 місяців.