UI Deployment

UI Deployment

The CBOM UI is an Angular 21 application styled with Tailwind CSS. In development it runs standalone; in production it’s embedded in the API JAR.

---

Development Setup

Prerequisites

• Node.js 20+
• npm 9+

Install and Run

cd cbom/ui
npm install
npm start

The UI starts on http://localhost:4200 and proxies API calls to http://localhost:9090.

Proxy Configuration

The dev server proxy is configured in proxy.conf.json:

{
  "/api": {
    "target": "http://localhost:9090",
    "secure": false
  }
}

This means all /api/* requests from the UI are forwarded to the API server during development.

---

Production Build

The production build compiles the Angular app into static files that get embedded in the API JAR.

cd cbom/ui
npm run build

The output goes to dist/ and is copied into the API’s src/main/resources/static/ during the Maven build.

Single JAR Deployment

When the API runs with --spring.profiles.active=prod, it serves the Angular build from classpath resources. The AngularRoutingFilter handles client-side routing by forwarding non-API, non-static requests to index.html.

# Build everything
cd cbom
mvn package -Pprod -DskipTests

# Run — UI is served from the same port as the API
java -jar api/target/cbom-api-*.jar --spring.profiles.active=prod
# Access at http://localhost:9090

---

UI Pages

Route	Page	Description
/dashboard	Dashboard	Risk overview and scan activity
/inventory	Inventory	Crypto asset table with filters
/sensors	Sensors	Sensor management and scan runs
/alerts	Alerts	Alert rules and schedules
/relationships	Relationships	SVG relationship graph
/compliance	Compliance	Policy evaluation
/import-export	Import/Export	CycloneDX import/export
/users	Users	User management
/settings	Settings	Platform configuration
/signin	Sign In	Authentication

---

Authentication

The UI uses JWT-based authentication. On sign-in, the API returns a token that’s stored in the browser and sent with every subsequent request via an HTTP interceptor.

• Token expiration: 24 hours (configurable via CBOM_JWT_EXPIRATION_HOURS)
• Route guard: Unauthenticated users are redirected to /signin
• Roles: admin (full access) and viewer (read-only)

---

Key Libraries

Library	Purpose
Angular 21	Application framework
Tailwind CSS	Utility-first styling
CodeMirror	YAML config editor in Settings

---

Related

• API Deployment — The backend the UI connects to
• Dashboard — What users see first
• Architecture — How UI fits in the system