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 :
- https://localhost/neos/TechnicalDemos/tracking/
- https://technicaldemos.example.com/tracking/
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