Developer Guide / Frontend Development

Frontend Development

The React admin console and shared component library.

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-aware TextField, TextArea and RichText).
  • custom-portlet/* — portlet bundles built with Vite via Maven.

Dev workflow

cd magicvarsh-frontend
npm install
npm run dev      # http://localhost:5173 with hot reload

The 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.

The admin console running from the Vite dev server.
The admin console running from the Vite dev server.