TypeScript Builds (npm/Vite)

The MATIH platform's frontend applications are React single-page applications built with Vite and managed through npm. A shared component library (shared) provides consistent UI components across all workbenches.

Frontend Application Inventory

Application	Port	Description
bi-workbench	3000	Business Intelligence workbench with dashboards
ml-workbench	3001	Machine Learning experiment management
data-workbench	3002	Data pipeline and quality management
agentic-workbench	3003	Conversational AI agent interface
control-plane-ui	3004	Platform administration console
data-plane-ui	3005	Data plane management interface
ops-workbench	-	Infrastructure operations dashboard
shared	-	Shared component library

Build Process

The build script detects and builds Node.js projects:

build_node_project() {
    local project_path="$1"
    local project_name=$(basename "$project_path")
 
    cd "$project_path"
 
    if [[ ! -f "package.json" ]]; then
        return  # Skip if no package.json
    fi
 
    # Step 1: Install dependencies
    npm install --silent
 
    # Step 2: Build if build script exists
    if grep -q '"build"' package.json; then
        npm run build --silent
    fi
}

Build Order

The shared library must be built before the workbenches:

1. shared (component library)
   └── exports: Button, Table, Modal, Chart, Layout, etc.

2. Workbenches (in parallel or sequence)
   ├── bi-workbench      (imports from shared)
   ├── ml-workbench      (imports from shared)
   ├── data-workbench    (imports from shared)
   ├── agentic-workbench (imports from shared)
   ├── ops-workbench     (imports from shared)
   ├── control-plane-ui  (imports from shared)
   └── data-plane-ui     (imports from shared)

Shared Component Library

Located at frontend/shared/, this package provides:

UI Components: Buttons, forms, tables, modals, charts
API Client: apiClient.ts with JWT authentication, tenant context
Theme: Design tokens, color system, typography
Hooks: Custom React hooks for common patterns
Types: Shared TypeScript interfaces

Key file: frontend/shared/src/utils/apiClient.ts

Vite Configuration

Each workbench uses Vite for development and production builds:

// vite.config.ts (typical pattern)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,  // Varies per workbench
    proxy: {
      '/api': 'http://localhost:8080'  // API gateway
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  }
})

Test Execution

run_node_tests() {
    local project_path="$1"
    cd "$project_path"
 
    if grep -q '"test"' package.json; then
        npm test --silent
    fi
}

Frontend tests typically use:

Vitest for unit tests
React Testing Library for component tests
Playwright for E2E tests (run separately)

Docker Images for Frontend

Frontend applications use Nginx to serve static files:

# Build stage
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build
 
# Production stage
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

The render-service (Node.js data plane service) uses a different pattern as it is a server-side rendering service rather than a static SPA.

Python Builds (pip/poetry)Docker Images & Base Images