Skip to main content

Deploy Frontend

Frontend applications (ORISO-Frontend and ORISO-Admin) are deployed via Helm. This guide covers building Docker images and deploying via Helm.
Frontend applications are deployed as part of the oriso-platform Helm umbrella chart. You need to build Docker images first, then deploy via Helm.
1

Build Frontend Docker Images

Build Docker images for both frontend applications.
# Build ORISO-Frontend
cd ~/online-beratung/caritas-workspace/ORISO-Frontend
docker build -t caritas-frontend:latest .

# Build ORISO-Admin
cd ~/online-beratung/caritas-workspace/ORISO-Admin
docker build -t caritas-admin:latest .

# Verify images
docker images | grep -E "caritas-frontend|caritas-admin"
Both images should be listed with latest tag.
2

Import Images to k3s

Import Docker images to k3s (if using k3s).
# Import frontend image
sudo k3s ctr images import <(docker save caritas-frontend:latest)

# Import admin image
sudo k3s ctr images import <(docker save caritas-admin:latest)

# Verify images in k3s
sudo k3s ctr images list | grep -E "caritas-frontend|caritas-admin"
If not using k3s, push images to a container registry and update Helm values with the registry URL.
3

Deploy via Helm

Deploy frontend applications via Helm (if not already deployed).
cd ~/online-beratung/caritas-workspace/ORISO-Kubernetes/helm

# Update dependencies
cd oriso-platform
helm dependency update
cd ..

# Deploy (or upgrade if already deployed)
helm upgrade oriso-platform ./oriso-platform \
  --namespace caritas \
  -f values.yaml \
  --set frontend.enabled=true \
  --set admin.enabled=true

# Monitor deployment
kubectl get pods -n caritas -l tier=frontend -w
Frontend pods should be created and reach Running state.
4

Verify Frontend Deployment

Verify frontend applications are accessible.
# Check pods
kubectl get pods -n caritas | grep -E "frontend|admin"

# Should see:
# oriso-platform-frontend-xxx    1/1     Running
# oriso-platform-admin-xxx        1/1     Running

# Check services
kubectl get svc -n caritas | grep -E "frontend|admin"

# Test internal access
kubectl exec -n caritas deployment/oriso-platform-frontend -- \
  curl -I http://localhost:80

# Test via Ingress (after Ingress is deployed)
curl -I https://app.oriso-dev.site
curl -I https://admin.oriso-dev.site
  • Pods should be Running
  • Services should be created
  • Ingress should route to services (if configured)

Frontend Applications

ORISO-Frontend (User Portal)

  • Docker Image: caritas-frontend:latest
  • Service: oriso-platform-frontend.caritas.svc.cluster.local:80
  • External: https://app.oriso-dev.site
  • Technology: React 18, Vite 4, TypeScript
  • Features: User portal, Matrix chat, video calls

ORISO-Admin (Admin Panel)

  • Docker Image: caritas-admin:latest
  • Service: oriso-platform-admin.caritas.svc.cluster.local:80
  • External: https://admin.oriso-dev.site
  • Technology: React 18, Vite 4, TypeScript
  • Features: Admin interface, agency management

Build Configuration

Environment Variables

Environment variables are baked into the build at build time:
# .env file in ORISO-Frontend
VITE_API_URL=https://api.oriso-dev.site
VITE_KEYCLOAK_URL=https://auth.oriso-dev.site
VITE_KEYCLOAK_REALM=online-beratung
VITE_KEYCLOAK_CLIENT_ID=app
VITE_MATRIX_HOMESERVER_URL=https://matrix.oriso-dev.site
VITE_MATRIX_SERVER_NAME=caritas.local

Docker Build

# Example Dockerfile structure
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html

Troubleshooting

Build Failures

# Clear node_modules and rebuild
cd ~/online-beratung/caritas-workspace/ORISO-Frontend
rm -rf node_modules package-lock.json
npm install
npm run build

# Check for build errors
npm run build 2>&1 | tee build.log

Image Import Issues

# Check if image exists
docker images | grep caritas-frontend

# Re-export and import
docker save caritas-frontend:latest | sudo k3s ctr images import -

# Check k3s images
sudo k3s ctr images list | grep caritas

Pod Not Starting

# Check pod status
kubectl describe pod -n caritas <pod-name>

# Check logs
kubectl logs -n caritas deployment/oriso-platform-frontend

# Check image pull
kubectl get pod -n caritas <pod-name> -o yaml | grep image

Ingress Not Working

# Check Ingress resources
kubectl get ingress -n caritas | grep frontend

# Check Ingress Controller
kubectl get pods -n ingress-nginx

# Test Ingress
curl -I https://app.oriso-dev.site

Next Steps