lipad/chista-frontend repository overview

⁠CHISTA Frontend

CHISTA Frontend is the web interface for exploring and understanding existing software systems.

It provides project-oriented access to:

• projects
• information sources
• source files
• code analysis
• code symbols
• graph visualization
• connected knowledge
• AI-assisted analysis

⁠Technology

The frontend uses:

React
TypeScript
Vite
React Flow
Nginx

The production container builds the application into static assets and serves them through Nginx.

⁠Docker Image

docker pull lipad/chista-frontend:latest

Supported architectures:

linux/amd64
linux/arm64

⁠Recommended Usage

CHISTA Frontend is intended to run together with the backend and supporting infrastructure.

From the CHISTA repository:

cp infrastructure/.env.example infrastructure/.env

Then:

docker compose \
  --env-file infrastructure/.env \
  -f infrastructure/compose.yaml \
  --profile app \
  up -d --no-build

For local image builds:

docker compose \
  --env-file infrastructure/.env \
  -f infrastructure/compose.yaml \
  --profile app \
  up -d --build

⁠Web Interface

Standard local URL:

http://localhost:8080

⁠Runtime Architecture

Browser
   ↓
Nginx
   ├── static React application
   │
   └── /api/*
          ↓
       Backend

Nginx serves the built frontend and proxies backend API requests.

⁠Backend Routing

Within the Docker network the frontend proxy communicates with:

backend:8081

The browser therefore does not need to know the internal Docker service address.

⁠Development Mode

For frontend development:

cd frontend
npm ci
npm run dev

Vite normally exposes the development application at:

http://localhost:5173

In this mode the frontend development server is different from the production Nginx container.

⁠Build

Production assets are created with:

npm run build

Conceptually:

.ts / .tsx source
     ↓
TypeScript
     ↓
Vite
     ↓
dist/
     ↓
Nginx

⁠Image Tags

⁠latest

lipad/chista-frontend:latest

⁠Commit-specific

lipad/chista-frontend:sha-<commit-sha>

Commit-specific tags are preferred for reproducible deployments.

⁠CI

Frontend CI currently performs:

npm ci
↓
ESLint
↓
TypeScript / Vite build
↓
Docker image build

On main, the image can be published to Docker Hub.

⁠Security

The frontend must never contain private backend credentials.

In particular, the browser must not receive:

database passwords
S3 secrets
Jira API tokens
Confluence API tokens
GitHub tokens

Authentication through Keycloak is planned as the next security step.

The React SPA will be a public OAuth/OpenID Connect client and therefore must not contain a client secret.

⁠Deployment Direction

Current:

Docker Compose + Nginx

Planned:

Helm
Kubernetes
ArgoCD