Настройка Medusa.js Admin Dashboard

Настройка Medusa.js Admin Dashboard

Medusa Admin — React-приложение на Vite, поставляемое отдельным пакетом @medusajs/dashboard. В Medusa 2.x Admin полностью отделён от бэкенда и подключается как плагин или деплоится самостоятельно. Расширение Admin происходит через систему Extensions — кастомные страницы, виджеты, роуты.

Варианты подключения Admin

# Вариант 1: Встроенный в бэкенд (рекомендуется для старта)
npm install @medusajs/dashboard
# в medusa-config.ts добавляется автоматически при create-medusa-app

# Вариант 2: Standalone деплой
npx create-medusa-app@latest --no-boilerplate
cd my-admin && npm install
VITE_MEDUSA_BACKEND_URL=https://api.example.com npm run build
# деплой dist/ на Vercel/Nginx

Кастомные виджеты для страниц продуктов

// src/admin/widgets/product-loyalty-stats.tsx
import { defineWidgetConfig } from '@medusajs/admin-sdk';
import { Container, Heading, Text } from '@medusajs/ui';
import { useQuery } from '@tanstack/react-query';
import { sdk } from '../lib/sdk';

const ProductLoyaltyWidget = ({ data }: { data: { id: string } }) => {
  const { data: stats } = useQuery({
    queryKey: ['loyalty-stats', data.id],
    queryFn: () => sdk.client.fetch(`/admin/products/${data.id}/loyalty-stats`),
  });

  return (
    <Container>
      <Heading level="h2">Лояльность</Heading>
      <Text>Начислено баллов: {stats?.total_points_given ?? '—'}</Text>
      <Text>Заказов с баллами: {stats?.orders_with_loyalty ?? '—'}</Text>
    </Container>
  );
};

export const config = defineWidgetConfig({
  zone: 'product.details.after',  // позиция на странице товара
});

export default ProductLoyaltyWidget;

Кастомные страницы в Admin

// src/admin/routes/loyalty/page.tsx
import { defineRouteConfig } from '@medusajs/admin-sdk';
import { GiftSolid } from '@medusajs/icons';
import { Container, DataTable, useDataTable } from '@medusajs/ui';

const LoyaltyPage = () => {
  const { table } = useDataTable({ /* config */ });

  return (
    <Container>
      <DataTable instance={table}>
        <DataTable.Toolbar>
          <DataTable.Search placeholder="Поиск клиентов..." />
        </DataTable.Toolbar>
        <DataTable.Table />
        <DataTable.Pagination />
      </DataTable>
    </Container>
  );
};

export const config = defineRouteConfig({
  label: 'Программа лояльности',
  icon: GiftSolid,
});

export default LoyaltyPage;

Запуск и конфигурация

# Запуск Admin в dev-режиме
VITE_MEDUSA_BACKEND_URL=http://localhost:9000 npm run dev

# Сборка для production
VITE_MEDUSA_BACKEND_URL=https://api.example.com npm run build

# Применение расширений — автоматически при наличии файлов в src/admin/

Сроки: базовая настройка + подключение к бэкенду — 2–4 часа; кастомные виджеты и страницы под бизнес-задачи — 2–5 дней.