Налаштування Saleor Dashboard

Налаштування Saleor Dashboard

Saleor Dashboard — це окремий React-додаток (TypeScript, Apollo Client, Material UI), який розгортається незалежно від API. Він спілкується з Saleor Core виключно через GraphQL. Налаштування включає збірку для конкретного оточення, конфігурацію CORS/CSP на стороні API та опціональну кастомізацію інтерфейсу.

Вимоги та репозиторій

Dashboard живе в окремому репозиторії: github.com/saleor/saleor-dashboard. Версія Dashboard має відповідати версії Core — основна та промміжна версії мають бути однаковими.

git clone https://github.com/saleor/saleor-dashboard.git
cd saleor-dashboard
git checkout 3.20  # версія = версія вашого Saleor Core
npm install

Змінні оточення

# .env
API_URI=https://api.your-store.com/graphql/
APP_MOUNT_URI=/dashboard/
STATIC_URL=/dashboard/static/
SENTRY_DSN=https://[email protected]/0
SENTR_ENABLED=true
IS_CLOUD_INSTANCE=false

API_URI — єдина обов'язкова змінна. Решта опціональні, але STATIC_URL критична, якщо Dashboard знаходиться не в корені домена.

Збірка та розгортання

npm run build
# dist/ містить статичні файли

Артефакт — чистий SPA без SSR. Розгортається на будь-якому статичному хостингу: S3 + CloudFront, Nginx, Vercel. При розгортанні на субпуть потрібно налаштувати basename React Router — це робиться через APP_MOUNT_URI.

Nginx-конфіг для субпути:

location /dashboard/ {
    alias /var/www/dashboard/dist/;
    try_files $uri $uri/ /dashboard/index.html;

    location ~* \.(js|css|png|jpg|ico|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

Налаштування CORS на стороні API

Dashboard і API можуть бути на різних доменах. Saleor Core (settings.py):

CORS_ALLOWED_ORIGINS = [
    "https://dashboard.your-store.com",
    "https://your-store.com",
]

# Для staging:
CORS_ALLOW_ALL_ORIGINS = False
CORS_ALLOW_CREDENTIALS = True

Без правильного CORS браузер блокуватиме GraphQL-запити — це перша проблема на новій установці.

Налаштування CSP

Якщо на сервері включена Content-Security-Policy, потрібно дозволити:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline';
  connect-src 'self' https://api.your-store.com wss://api.your-store.com;
  img-src 'self' data: https://cdn.your-store.com;
  font-src 'self' https://fonts.gstatic.com;

wss:// потрібен для GraphQL subscriptions (live updates в Dashboard).

Первинне налаштування після розгортання

1. Відкрийте /dashboard/
2. При першому запуску з'явиться майстер створення суперкористувача (якщо база пуста)
3. Налаштуйте канали продажу: Channels → Create Channel
4. Підключіть способи оплати: Plugins → Payment
5. Налаштуйте склади: Warehouses → Create
6. Додайте shipping zones та способи доставки

Брендування інтерфейсу

Dashboard не розроблений для глибокої кастомізації, але базове брендування можливо:

// src/config.ts — можна переопределити:
export const APP_NAME = "My Store Admin";
export const LOGO_URL = "/static/logo.svg";

Заміна логотипу та кольорової схеми (Material UI theme) вимагає правки вихідного коду й пересборки. Це прийнятно, якщо Dashboard форкований.

Інтеграція Saleor Apps

Починаючи з версії 3.x, Dashboard підтримує встановлення Apps через App Store або manifest URL:

Settings → Apps → Install external app:

https://my-app.vercel.app/api/manifest

Додаток має повертати валідний JSON manifest з id, name, permissions та appUrl. Dashboard вбудовує App через iframe із токен-аутентифікацією.

Типові проблеми при налаштуванні

Оновлення Dashboard

Dashboard оновлюється незалежно від Core, але версії мають відповідати. Процедура:

git fetch origin
git checkout 3.21
npm install
npm run build
# розгортання нового dist/

Без міграцій БД, без рестарту API — лише пересборка фронта.