Перейти к основному содержимому

UI-слой

Установка и компиляция дашборда и общего интерфейса приложений.

Контекст​

Приложения Netuno по умолчанию уже включают набор продвинутых технологий для фронтенда, среди которых React, Vite, Less и Ant.Design.

Внутри приложений есть папка 📁 ui (user interface, пользовательский интерфейс), где мы разрабатываем дашборды и другие компоненты фронтенда.

Перед началом​

Убедитесь, что у вас установлен Bun — это обязательное условие. Подробнее:

Установка модулей зависимостей​

Чтобы установить все зависимости, которые идут по умолчанию, перейдите в папку 📁 ui (user interface) внутри вашего разрабатываемого приложения, например:

cd apps/мое_приложение/ui/

Выполните команду установки модулей зависимостей:

bun install

Bun — это улучшенная и более оптимизированная альтернатива NPM.

Автоматическая компиляция​

Перейдите в папку 📁 ui (user interface) вашего разрабатываемого приложения, например:

cd apps/мое_приложение/ui/

Чтобы автоматически компилировать фронтенд при каждом изменении кода, выполните:

bun run watch

Убедитесь, что у вас установлен Bun.

Автоматическая интеграция фронтенда с Netuno​

Netuno позволяет запускать UI вместе с процессом сервера приложения Netuno.

Все сообщения компиляции React будут интегрированы в тот же терминал, что и приложение Netuno.

Для этого достаточно активировать настройку в commands приложения Netuno в 📂 config/_development.json, то есть в command с path равным ui установить enabled в true следующим образом:

config/_development.json
{
  ...
  "commands": [
    {
      "enabled": true,
      "path": "ui",
      "command": "bun run watch"
    }
  ],
  ...
}

После редактирования файлов конфигурации приложения Netuno необходимо перезапустить сервер, чтобы он применил новые изменения.

Затем запустите/перезапустите сервер с вашим приложением Netuno, чтобы проверить его работу.

Теперь всё будет интегрировано в один централизованный терминал, что избавит вас от необходимости держать несколько разрозненных терминалов. Подробнее:

Другие технологии фронтенда​

В папке 📁 ui можно настроить любую технологию фронтенда или добавить любой необходимый новый модуль зависимостей.

Если вы не хотите использовать ни одну из стандартных технологий, можете заменить их любой другой, особенно адаптировав файлы:

  • package.json
  • vite.config.js