Deploy Frontend and Gateway

In this module you will deploy the Neuralbank frontend and the Customer Service MCP using Software Templates, and see how the frontend connects to the backend and MCP through Kuadrant gateways using API Key authentication.

Context

You should already have neuralbank-backend running in namespace user1-neuralbank. You will now add:

  • neuralbank-frontend — Web SPA that consumes backend and MCP APIs through a reverse proxy

  • customer-service-mcp — MCP server with Gateway API, HTTPRoute, and Kuadrant policies

Step 1: Deploy Neuralbank Frontend

  1. In Developer Hub, go to Create and choose Neuralbank: Frontend.

  2. Complete the form:

Field Value

Name

neuralbank-frontend

Owner

user1

  1. Click Create and wait for scaffolder steps to finish.

Step 2: Deploy Customer Service MCP

  1. Repeat Create with template Neuralbank: Customer Service MCP.

Field Value

Name

customer-service-mcp

Owner

user1

This template generates the connectivity link pattern with Gateway, HTTPRoute, AuthPolicy, and RateLimitPolicy — all using the same dual-auth model (API Key primary + OIDC JWT fallback).

Step 3: Verify Repositories in Gitea

In Gitea (https://gitea-gitea.apps.cluster.example.com), confirm two new repositories under your user:

  • user1/neuralbank-frontend — Dockerfile, index.html, proxy.conf, manifests

  • user1/customer-service-mcp — Java sources, manifests, and gateway/policy resources

Step 4: Check Applications in ArgoCD

  1. Open ArgoCD: https://openshift-gitops-server-openshift-gitops.apps.cluster.example.com

  2. Locate Applications for frontend and MCP in namespace user1-neuralbank.

  3. Verify sync and health.

Step 5: How the Frontend Connects

The frontend is a static SPA served by Apache HTTPD with a reverse proxy that routes API calls through the Kuadrant gateways:

ProxyPreserveHost Off

# Route /api/backend/* to the backend's Kuadrant Gateway
ProxyPass "/api/backend/" "http://neuralbank-backend-gateway-istio:8080/api/"
ProxyPassReverse "/api/backend/" "http://neuralbank-backend-gateway-istio:8080/api/"

# Route /api/mcp/* to the MCP's Kuadrant Gateway
ProxyPass "/api/mcp/" "http://customer-service-mcp-gateway-istio:8080/"
ProxyPassReverse "/api/mcp/" "http://customer-service-mcp-gateway-istio:8080/"

The frontend uses API Key authentication for all API calls:

function apiFetch(url) {
    return fetch(url, {
        headers: { 'X-API-Key': apiKeyInput.value }
    });
}
graph LR
    Browser -->|HTML/JS| FE[Frontend HTTPD]
    FE -->|X-API-Key| BGW[Backend Gateway<br>Kuadrant AuthPolicy]
    FE -->|X-API-Key| MGW[MCP Gateway<br>Kuadrant AuthPolicy]
    BGW --> BE[Backend Service]
    MGW --> MCP[MCP Service]
The scaffolded frontend does not implement OIDC login (no redirect to Keycloak). It uses API Keys directly via the X-API-Key header. For an interactive OIDC flow with Keycloak, see the pre-deployed neuralbank-stack in Module 9.

Step 6: Inspect Gateway and AuthPolicy

# Check Gateway resources
oc get gateway -n user1-neuralbank

# Check HTTPRoutes
oc get httproute -n user1-neuralbank

# Check AuthPolicies (API Key + OIDC JWT)
oc get authpolicy -n user1-neuralbank -o wide

# Check RateLimitPolicies
oc get ratelimitpolicy -n user1-neuralbank -o wide

Step 7: Try the Frontend

Open the frontend Route in the browser:

https://neuralbank-frontend-{user_name}-neuralbank.{cluster_domain}

  1. Enter an API Key in the input field (retrieve it from the backend’s API Key Secret).

  2. The SPA shows gateway connectivity status, customer data, and MCP server health.

  3. You can view customers, update credits, and check MCP tools — all routed through the Kuadrant gateways.

# Retrieve the API Key for the frontend
oc get secret -n user1-neuralbank \
  -l "app=neuralbank-backend,kuadrant.io/apikey=true" \
  -o jsonpath='\{.items[0].data.api_key}' | base64 -d ; echo

Scaffolded vs Pre-deployed: Authentication Comparison

Scaffolded Apps (your user1-neuralbank) Pre-deployed neuralbank-stack

Frontend auth

API Key input field in SPA

OIDC redirect to Keycloak login

AuthPolicy

API Key (priority 0) + OIDC JWT (priority 1)

OIDCPolicy CR + AuthPolicy API Key

Keycloak integration

JWT validation only (no interactive login)

Full OIDC flow (auth endpoint, callback, cookie)

Frontend URL

https://neuralbank-frontend-user1-neuralbank.apps.cluster.example.com

https://neuralbank.apps.cluster.example.com

Credentials

API Key from Kubernetes Secret

user1 / Welcome123! via Keycloak
To add a full interactive OIDC flow to scaffolded apps, you would need to create an OIDC client in Keycloak’s neuralbank realm, configure the redirect URI, and implement PKCE/Authorization Code flow in the frontend. The pre-deployed neuralbank-stack demonstrates this pattern.

Summary

You added frontend and MCP with templates, verified GitOps and the catalog, and understood how the reverse proxy routes all traffic through Kuadrant gateways with API Key authentication. The pre-deployed neuralbank-stack shows the OIDC alternative.