Starter проект: quarkus backend, vue.js SPA frontend, Keycloak.

Мотивация

Продолжаю делать личный кабинет моей мечты на quarkus для нового пет-проекта. Предудущий эксперимент описан здесь: part 1.

Что хотелось улучшить:

  • keycloak из quarkus:dev запускался слишком долго (и каждый раз с перезапуском проекта), требовалось ускорить процесс запуска локального окружения
  • SSR (server side rendering) решил заменить на SPA (single page application), обоснование см. в разделе Frontend

Результат:

  • keycloak вынесен во внешний сервис запускаемый через docker, время повторного запуска ускорилось незначительно, но keycloak достаточно теперь запустить 1 раз
  • фронтенд вынесен в отдельный проект на базе vue.js

Репозиторий: https://github.com/achernetsov/quarkus-keycloak-vuespa-starter

Dev workflow

Загрузка keycloak в quarkus dev mode занимает примерно 30 секунд, и происходит каждый раз при запуске mvn quarkus:dev.

Вынес keycloak во внешний docker container.

Используется образ keycloak-x (keycloak на базе Quarkus), см docker-compose.yml »

Чтобы не создавать каждый раз realm с нуля, keycloak работает с локальной базой в postgres, в которой хранится realm.

В результате запуск keycloak для разработки теперь достаточно выполнить 1 раз, и занимает он примерно 20 секунд.

Keycloak доступен на http://localhost:8180, admin/admin

Frontend

В первом эксперименте для фронтенд использовался Qute templating engine ». Qute позволяет быстро реализовать фронтенд через SSR, и в экосистеме quarkus все работает из коробки (см. предыдущую часть).

Однако хотелось реализовать backend предоставляющий только REST API и фронтенд использующий этот API через AJAX. Также данный starter делаю для личного кабинета будущего пет-проекта, в котором не требуется SEO, с упором на возможности UI, и в данном случае SPA выигрывает (погуглите spa vs ssr).

Потому решил вынести фронтенд в самостоятельный проект на базе Vue.js.

Каркас сгенерирован через vite »

Vue изменился с последнего моего опыта работы с ним в ivoice:

  • для взаимодействия с бекендом по REST используется fetch » (раньше использовался axios)
  • для добавления access token в request headers, keycloak instance сохраняется в глобальном store на базе pinia », раньше использовался vuex
  • решил испльзовать composite-API и typescript, раз уж делаю фронтенд своей мечты :)

Demo

Демонстрация системы:

  1. Запуск keycloak
  2. Запуск backend
  3. Запуск frontend
  4. Логин в приложение под alice и просмотр списка роботов принадлежащих alice.

Demo: Demo

Отображаются роботы принадлежашие alice из таблицы: Table