Iabs-ui-components NPM

iabs ui starter kit Template

Репозиторий для шабона микрофронта

Инфраструктура

репозиторий template для микрофронтов
- шаблон для создания приложений по архитектуре микрофронтенд (Webpack Module Federation)
репозиторий Заглушки opsNext (host)
- в него встраиваются микрофронты для тестирования во время разработки
- воспроизводит раздел системы OPSNext OpsNext dev среда
репозиторий библиотеки общих компонентов
- используется для разработки и публикации общих компонентов для микрофротов
репозиторий микрофронта Сделок (remote)
- фронт для сервисе биржевых сделок, который мы предоставляем для opsNext

dev
- одна пода фронтовая
- одна пода для стаб сервера
ci/cd
kuber

Инициализация и синхрониция микрофронтендов

при инициализации микрофронта, происходит push кодовой базы шабона iabs-ui-starter-kit в только что созданный (в пустой) репозиторий микрофронта
- открываем локально iabs-ui-starter-kit,
- git checkout master
- git push -u <url репозитория> master
для синхронизации микрофронта и шаблона делается git pull (подмёрживается обновлённый iabs-ui-starter-kit с мастера)
- git pull ssh://git@bitbucket.region.vtb.ru:7999/iabs/iabs-ui-starter-kit.git master

Запуск проекта

Авторизоваться в npm

Перед началом работы с проектом запустить настройки аутентификации в нексус репозитории

на основе npmrc.local-auth-settings.example.sh Создать файл в корне проекта npmrc.local-auth-settings.sh и подставить данные своего аккаунта ВТБ вместо данных, предоставленных для примера

# npmrc.local-auth-settings.example.sh
user="VTB0000000"
password="пароль"

для конфиденциальности файл npmrc.local-auth-settings.sh указан в .gitignore
если проект запускается на os windows, то shell script можно запустить с помощью Git Bash (консоли, которая идёт в установочном пакете с Git)
конфигурация npm находится в файле .npmrc

Запустить скрипт npmrc.local-auth-settings.sh

sh npmrc.local-auth-settings.sh

в глобальном конфигурационном файле npm .npmrc должна появиться конфигурация авторизации
для конфиденциальности файл .npmrc указан в .gitignore

# example
//nexus-ci.corp.dev.vtb/repository/pfomb-npm/:_auth="parsed base64 credentials"

Проинсталлировать зависимости

npm i

Старт проекта

Для запуска проекта используются npm scripts прописанные в package.json

start - запуск проекта локально. Микрофронт в режиме встройки
start:standalone - запуск проекта локально. Микрофронт stand alone (без встройки в хост)
build:* - (* - значение ENV_TARGET) сборка проекта в режиме production для деплоя. preprod и prod без sorce map
stub-server - запуск сервера заглушек
start-dev-stand-stub-server - запуск сервера заглушек на стенде (для девопса)

Среды для сборки

переменная окружения ENV_TARGET задана в соответствующем npm-script'е

type ENV_TARGET =
  | 'local' // для локальной разработки
  | 'dev' // для разработки и тестирования
  | 'ift' // для интеграционного тестирования
  | 'preprod' // для тестирования в окружении продакнш
  | 'prod' // и так понятно

Запуск локальной сборки iabs-opsnext-stub

Склонировать репозиторий iabs-opsnext-stub https://bitbucket.region.vtb.ru/projects/IABS/repos/iabs-opsnext-stub/browse
- git clone ssh://git@bitbucket.region.vtb.ru:7999/iabs/iabs-opsnext-stub.git
перейти в ветку demo

  git checkout demo

создать файл npmrc.local-auth-settings.ermo.core.sh на основе npmrc.local-auth-settings.ermo.core.example.sh
внести креденшиалы dev.corp учётки в скрипт npmrc.local-auth-settings.ermo.core.sh и запустить обновив .npmrc
установить зависимости npm i

  npm -v
  9.8.1
  node -v
  v18.18.1

  npm i

запустить npm script c указанием переменной окружения STAND=1 STAND=1 npm run start

Встройка микрофронта в хост iabs-opsnext-stub локально

В файл src/modules/ApplicationsMenu/ApplicationsMenu.tsx в useEffect добавить конфиг встраиваемого микрофронта, заполнив нужные поля

const testCat = {
  categoryName: 'Сервисы операционной поддержки брокерского бизнеса',
  menuItems: [
    {
      itemName: 'Мой микрофронт', // то что будет написано на плашечке микрофронта
      risCode: 'ermo_starter_kit',
      containerName: 'ermo_starter_kit', // значение -- это имя поля в объекте localOverrides
      moduleName: 'ErmoStarterKitApp',
      itemCode: undefined,
      description: undefined,
      path: undefined,
      host: undefined,
      parameters: undefined,
      taskCreationOutOfERM: false,
    },
  ],
}

В файл src/modules/TasksProcessing/components/RemoteController/localOverrides.ts добавить конфиг встраиваемого микрофронта:

    ermo_starter_kit: {
        host: 'http://localhost:3001',
        path: '/remoteEntry.js',
        risCode: 'ermo_starter_kit',
        containerName: 'ermo_starter_kit', // должно совпадать с полем объекта
        moduleName: 'ErmoStarterKitApp',
    },

Важно, чтобы совпадал containerName с именем поля микрофронта в localOverrides и значения полей в ApplicationsMenu.tsx Значение moduleName должно совпадать с неймспейсом приложения, которое exposes из микрофронта Значение containerName должен совпадать с полем name у встраиваемого микрофронта в config/remote.config.json

Общестримовое Demo локально

Для общестримого локального демо

Прописать порты в:

config/webpack.parts.js: devServer.port
config/paths.js: publicUrls.dev - прописываем порт в url локалхоста
stub-server/server.js: https.listen, server.listen
src/utils.ts: case 'local': поле api

В данный момент существуют:

микрофронт шаблона (iabs-ui-starter-kit)
- dev server: 4001
- stub server: 5001
микрофронт сделок (2112.erm_iabs_deals)
- dev server: 4002
- stub server: 5002

Контакты

Андерсон Дмитрий https://t.me/dandgerson +7 905 634 4467 https://dion.vc/event/danderson
Моисеев Илья https://t.me/kennystorm +7 999 829 0458 https://dion.vc/event/imoiseev
Жулмурзин Алибек https://t.me/forhayley + 7 932 849 1750 https://dion.vc/event/azhulmurzin
Данила Бликов https://t.me/blikoff_d +7 985 790 1125 https://dion.vc/event/dblikov