Настройка Vendure Admin UI

Настройка Vendure Admin UI

Vendure Admin UI — Angular-приложение, которое поставляется как отдельный пакет и компилируется с расширениями плагинов. Это не webcomponents и не iframe-подход: расширения встраиваются во время сборки через Angular Lazy Modules, что даёт полноценный доступ к роутингу, компонентам и переводам.

Деплой из коробки

Самый быстрый вариант — AdminUiPlugin без кастомизации:

// vendure-config.ts
import { AdminUiPlugin } from "@vendure/admin-ui-plugin";

export const config: VendureConfig = {
  plugins: [
    AdminUiPlugin.init({
      route: "admin",
      port: 3002,
    }),
  ],
};

Admin UI будет доступен на http://localhost:3002/admin. В production рекомендуется скомпилировать UI заранее (см. ниже) и отдавать как статику через Nginx.

Предварительная компиляция (production)

// compile-admin-ui.ts
import { compileUiExtensions } from "@vendure/ui-devkit/compiler";
import path from "path";

compileUiExtensions({
  outputPath: path.join(__dirname, "../admin-ui"),
  extensions: [
    // Кастомные расширения плагинов (если есть)
    LoyaltyPlugin.uiExtensions,
    B2bPricingPlugin.uiExtensions,
  ],
  devMode: false,
}).compile?.();

npx ts-node compile-admin-ui.ts

Результат — директория admin-ui/dist со статическими файлами. Теперь указываем путь к ней:

AdminUiPlugin.init({
  route: "admin",
  port: 3002,
  app: {
    path: path.join(__dirname, "../admin-ui/dist"),
  },
}),

Брендирование

AdminUiPlugin.init({
  route: "admin",
  port: 3002,
  adminUiConfig: {
    brand: "My Shop Admin",
    hideVendureBranding: true,
    hideVersion: false,
    defaultLanguage: LanguageCode.ru,
    defaultLocale: "ru",
    availableLanguages: [LanguageCode.ru, LanguageCode.en],
  },
}),

Логотип и цвета меняются через расширение темы Angular:

// admin-ui-extension/theme.ts
export default {
  primaryColor: "#1a56db",
  accentColor: "#7c3aed",
  logo: "/assets/logo.svg",
};

Расширение Admin UI из плагина

Каждый плагин может добавить свою вкладку, страницу или поле в существующий раздел:

// loyalty.plugin.ts
@VendurePlugin({
  // ...
  configuration: (config) => config,
})
export class LoyaltyPlugin {
  static uiExtensions: AdminUiExtension = {
    id: "loyalty-ui",
    extensionPath: path.join(__dirname, "loyalty-ui"),
    routes: [
      {
        route: "loyalty",
        filePath: "routes.ts",
      },
    ],
    providers: ["providers.ts"],
  };
}

// loyalty-ui/routes.ts
import { Route } from "@angular/router";
import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker";

export default [
  {
    path: "",
    component: LoyaltyListComponent,
    data: { breadcrumb: _("Программа лояльности") },
  },
  {
    path: ":id",
    component: LoyaltyDetailComponent,
    data: { breadcrumb: _("Аккаунт лояльности") },
  },
] satisfies Route[];

// loyalty-ui/providers.ts
import { addNavMenuItem } from "@vendure/admin-ui/core";

export default [
  addNavMenuItem(
    {
      id: "loyalty",
      label: "Лояльность",
      routerLink: ["/extensions/loyalty"],
      icon: "star",
    },
    "customers" // раздел меню, куда добавить пункт
  ),
];

Добавление кастомного поля в существующую страницу

Если плагин добавляет customFields к стандартной сущности, Admin UI автоматически отобразит их в форме. Для нестандартного рендеринга — кастомный компонент:

// Регистрация кастомного компонента для поля
addActionBarItem({
  id: "view-loyalty",
  label: "Баллы лояльности",
  locationId: "customer-detail",
  routerLink: (data) => ["/extensions/loyalty", data.entity?.id],
  icon: "star",
});

Переводы

Vendure Admin UI поддерживает i18n через ngx-translate. Добавить русский перевод для расширения:

// loyalty-ui/providers.ts
import { registerFormInputComponent } from "@vendure/admin-ui/core";

export default [
  // ...
  {
    provide: VENDURE_UI_CONFIG,
    useValue: {
      translations: {
        ru: {
          "loyalty.title": "Программа лояльности",
          "loyalty.points": "Баллы",
          "loyalty.transactions": "История операций",
        },
      },
    },
  },
];

Nginx для Admin UI в production

location /admin/ {
    root /var/www/vendure/admin-ui/dist;
    try_files $uri $uri/ /admin/index.html;

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

При этом AdminUiPlugin из Vendure-сервера отключается (или остаётся только для прокси Admin API).

Частые проблемы