The frontend is a React 18 single-page application built with Vite and served by Nginx in production. It talks to the backend only through /api, which Nginx (and the Vite dev server) proxy to the gateway.
Project layout
magicvarsh-frontend— the admin console and public page viewer.magicvarsh-ui-components— a shared component library (including multilingual-awareTextField,TextAreaandRichText).custom-portlet/*— portlet bundles built with Vite via Maven.
Dev workflow
cd magicvarsh-frontend
npm install
npm run dev # http://localhost:5173 with hot reloadThe dev server proxies /api to the gateway on port 8080, so you develop against running backend services.
Multilingual in the UI
Client-side locale resolution helpers live in magicvarsh-frontend/src/utils/ml.js, and the shared multilingual components read and write the per-locale values produced by the backend.
Theme system
A theme is a small bundle (theme.json, CSS, JS and FreeMarker templates for header/footer/content) applied per site. PageViewer.jsx renders the theme's header and footer around the page; if the theme also defines a content template (portlet.ftl), RenderedCanvas mounts the page's rendered content into that template's <div data-portal-content> slot instead of the built-in canvas, and ThemeFooterScript appends the theme's footer.js as a real <script> tag after the footer. A theme with no content template or footer script falls back to the platform's default rendering, so adding theme support to a site is always backwards compatible.
Themes are managed in the admin console under the Themes editor (Content and Footer JS tabs, plus bundle download/upload), backed by page-service's ThemeController/ThemeService and a portal_theme table storing the bundle's parts. The gateway allowlists GET /api/pages/sites/{id}/render-content so the public, unauthenticated page viewer can fetch a site's rendered theme output.