Налаштування 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 з плагіна

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

// 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"],
  };
}

Додавання кастомного поля на існуючу сторінку

Якщо плагін додає customFields до стандартної сущності, Admin UI автоматично рендерить їх. Для нестандартного рендерингу:

addActionBarItem({
  id: "view-loyalty",
  label: "Loyalty Points",
  locationId: "customer-detail",
  routerLink: (data) => ["/extensions/loyalty", data.entity?.id],
  icon: "star",
});

Переклади

Vendure Admin UI підтримує i18n через ngx-translate:

// loyalty-ui/providers.ts
{
  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";
    }
}

Типові проблеми