Создание нового микросервиса (frontend)¶

Настройка и сборка проекта¶

Для настройки и сборки нового микросервиса frontend необходимо выполнить следующие действия:

Глобально установить в операционную систему пакет с помощью команды:

npm install -g verdaccio

2. Запустить установленный пакет.

<p style="text-align: center;"><img src="../images/Пример запущенного пакета.jpg" alt="img" style="zoom:80%;" /></p>

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

`npm adduser --registry http://localhost:4873`

В рамках создания локального пользователя нужно ввести логин, пароль, электронный адрес, после чего авторизоваться.

4. Обновить глобальную конфигурацию файла «.npmrc», который обычно располагается в корневой папке пользователя ОС.

С более подробной информацией о расположении данного файла в разных операционных системах можно ознакомиться по ссылке: https://docs.npmjs.com/cli/v9/configuring-npm/npmrc#files.

В рамках обновления конфигурации необходимо открыть файл «.npmrc» и добавить следующие строки:

`always-auth=true`

`@docshouse:registry=http://localhost:4873`

Тем самым указав, что зависимость @docshouse необходимо скачивать не с основного репозитория, а с локального.

5. Опубликовать в локальный репозиторий все библиотеки, кроме «ui-base» и «ui-cli».

Для этого необходимо открыть папку, где располагаются все библиотеки.

В качестве примера такая папка здесь и далее по тексту будет называться «public»:

`cd public`

Перейти в библиотеку, которую необходимо опубликовать:

`public cd %наименование библиотеки%.`

Выполнить команду:

`npm publish --registry http://localhost:4873`

Повторить данные действия для каждой библиотеки.

Чтобы убедиться, что пакет опубликован, можно перейти по адресу http://localhost:4873 в браузере. Адрес будет содержать опубликованный пакет.

Генерация приложения¶

Для генерации приложения необходимо выполнить следующие действия:

Установить пакет @vue/cli-init глобально с помощью команды:

npm i -g @vue/cli-init

Прежде чем использовать ui-cli, рекомендуется переключиться на ветку «latest».

2. Запустить команду vue init, передав первым аргументом путь до «dh-ui-cli», а вторым – имя для директории.

Имя директории должно строиться по шаблону «dh-{name}-service-ui», где name – наименование сервиса.

`vue init ./dh-ui-cli dh-{name}-service-ui`

Далее в качестве примера рассматривается установка dh-demo-service-ui.

Cli будет выводить перед каждым шагом информационные подсказки:

- Сообщение, информирующее о необходимости указать имя для сервиса с примером.
- Сообщение, информирующее о необходимости указать путь для роутера с примером.
- Сообщение с предложением указать описание для сервиса. Данный шаг можно пропустить, так как описание сервиса не является обязательным для заполнения.
- Сообщение, информирующее о необходимости указать автора. Cli по умолчанию предлагает автора с git, но значение может быть изменено произвольно.

После завершения процесса установки в папке «dh-demo-service-ui» появится новая папка с готовым каркасом frontend приложения.

Результатом генерации будет работоспособный шаблон сервиса с подготовленной структурой кода и некоторыми примерами используемых подходов.

3. Открыть папку с приложением с помощью команды:

`cd dh-demo-service-ui`

4. Установить зависимости с помощью команды:

`npm install`

5. Обновить библиотеки @docshouse до последней версии с помощью команды:

`npm i @docshouse/dh-ui-components@latest --save-exact`

`npm i @docshouse/dh-ui-types@latest --save-exact`

Прежде чем запустить локальный сервер для разработки, в готовом шаблоне, в функции src/common/utils.ts setupDevelopmentEnvironment, в динамических импортах для файлов «themes» и «global.scss» необходимо указать актуальный путь до директории «ui-base», после чего сохранить изменения.

6. Запустить локальный сервер для разработки с помощью команды:

`npm run serve`

Теперь при переходе по адресу http://127.0.0.1:8081 открывается готовый каркас приложения с базовой структурой.

Проверка приложения в рамках базового фронта¶

Для сборки необходимо выполнить команду:

npm run build

В результате будет создана папка «dist», в которой будет находиться итоговая сборка.

Содержимое папки «dist» необходимо поместить в папку «dh-ui-base/public/dh-demo-service-ui».

Из файла «system-setting.json» в папке «public» необходимо скопировать готовые настройки сервиса и вставить их в аналогичный файл, расположенный в сборке «ui-base», в конец массива сервисов, подключаемых к Системе.

В настройках сервиса поле href отвечает за путь, с которого «ui-base» будет пытаться загрузить бандл для данного фронта.

В результате базовый фронт загрузит новый сервис.

Для работы с созданным сервисом необходимо создать модели и политики доступа. Модели и политики доступа создаются в сервисе «Права доступа». Работа в данном сервисе описана в документе «Руководство администратора ЛДМ. ПЛАТФОРМА КОНТЕНТ-СЕРВИСОВ».