Table of Contents

Nested clusters example

The main goal of this article is to show an example of how to display a UI view of a nested cluster inside a UI view of its main cluster.

Clusters

For this example we have two clusters :

Technicaldemos

TechnicalDemos is the main cluster in which we want to display a UI view of its nested cluster

It has a UI view TrackingUI in which we want to display the cluster TrackingDemo main UI view.

The cluster can be accessed at https://localhost/neos/TechnicalDemos/ in development.

It is also deployed in production at https://technicaldemos.example.com/ in the same namespace as TrackingDemo.

Trackingdemo

TrackingDemo is the nested cluster which main UI view will be displayed inside TechnicalDemos UI view TrackingUI.

The cluster can be accessed at https://localhost/neos/TrackingDemo/ in development. It is also deployed in production at https://trackingdemo.example.com/ in the same namespace as TechnicalDemos.

Nested cluster configuration

To be able to access TrackingDemo inside TechnicalDemos without having to configure CORS policies, we can configure "nested" clusters.

The principle is that a main cluster (TechnicalDemos) url can access one or more clusters (TrackingDemo) resources using url prefix (tracking).

In our case, we want to access TrackingDemo using the following urls :

Development

In the TechnicalDemos configuration yaml file :

NestedClusters:
  - Name: TrackingDemo # The exact name of the nested cluster like configured in its own yml file.
    Prefix: tracking # the url prefix which will redirect to the nested cluster.

With this configuration all HTTP requests matching https://localhost/neos/TechnicalDemos/tracking/* will be forwarded to https://localhost/neos/TrackingDemo/ *.

Production

In the Helm chart yaml configuration file :

---
clusters:
  - name: TechnicalDemos
    host: technicaldemos.example.com
    nestedClusters:
      - name: TrackingDemo
        pathPrefix: tracking
    # ...rest of TechnicalDemos configuration
  - name: TrackingDemo
    host: trackingdemos.example.com
    # ...rest of TrackingDemo configuration

With this configuration all HTTP requests matching https://technicaldemos.example.com/tracking/ * will be forwarded to https://trackingdemos.example.com/ *.

UI view configuration

To display TrackingDemo inside TechnicalDemos we will use a Webview component inside the TrackingUI UI view of TechnicalDemos.

Warning

TechnicalDemos URLs in development and production have different base paths :

  • neos/TechnicalDemo in development
  • / in production

We cannot set ./tracking as the Webview source url because it would mean https://localhost/tracking in development.

One easy way to make our Webview work in both environments is to use a computed as source :

TrackingUI UI view template :

<!-- ... -->
<web-view source="@Computeds.TrackingUrl" expandable="false" />
<!-- ... -->
---

TrackingUrl computed code :

string url = string.Empty;

#if PLATFORM_WEB
url = $"{SystemEnvironment.Window.Current.Location.Pathname}/tracking/".Replace("//", "/");
#endif

return url;

SystemEnvironment.Window.Current.Location.Pathname can have the following values :

  • neos/TechnicalDemo in development
  • / in production

With this configuration, the WebView source url will be :

  • /neos/TechnicalDemo/tracking in development
  • /tracking in production