Document Tree
    Document Properties
    Kbid
    3K0747
    Last Modified
    28-Mar-2025
    Added to KB
    22-Feb-2023
    Public Access
    Everyone
    Status
    Online
    Doc Type
    Concepts
    Product
    Intershop Progressive Web App
    Concept - Intershop Progressive Web App - Multi-Site Handling

    Motivation

    Imagine running an Europe-wide shop with Intershop, where the website is available in 16 different countries with different languages and a varying selection of products, but only little modification of the website appearance over all.
    This would be set up by having 16 channels with one headless application each on the ICM side.

    In a setup before the PWA 0.9 release this would have lead to a deployment with 16 PWA instances combined with one nginx for caching each.
    Of course, a fail-over setup would increase the number of required deployment containers even more.

    Therefore, starting from version 0.9, the PWA features means to dynamically configure ICM channel and application to determine the correct REST endpoint for each incoming top level request.

    The aforementioned scenario can now be run with just one PWA instance and a reverse proxy running in front, implementing this dynamic configuration.

    Configuration

    Warning

    Refer to Multi-Site Configurations for an explanation of what is possible with multi-site configurations and how to define them.

    To set ICM channels and applications dynamically, you have to use URL rewriting in a reverse proxy running in front of the PWA instances.
    The values have to be provided as URL parameters (not to be confused with query parameters).

    nginx URL rewrite snippet

    rewrite ^(.*)$ "$1;channel=inSPIRED-inTRONICS_Business-Site;application=-" break;
    

    The above example configuration snippet shows an nginx rewrite rule on how to map an incoming top level request URL to a dynamically configured URL for the downstream PWA instance.
    It shows both the PWA parameters channel, application and their fixed example values.
    The parameters of each incoming request are then read by the PWA upon initialization and used for the composition of the initial HTML response on the server side.
    Afterwards they are propagated to the client side and re-used for subsequent REST requests.

    In the source code of the project we provide an extended nginx Docker image for easy configuration of multiple channels via sub-domains.

    Multi-Site Production Deployment

    These steps should give an overview of the internal workings:

    Current Deployment

    1. The browser requests the page by URL from the reverse proxy. Nginx appends URL parameters to the incoming request URL for channel, application, etc depending on the incoming domain.

    2. PM2 runs Angular Universal pre-rendering for the requested URL (and theme). Angular Universal dynamically configures itself with the incoming parameters.

    3. The requested page is filled with content retrieved via ICM REST API for this dynamically configured channel.

    4. The configuration parameters are persisted for the client application via state transfer. Afterwards, the response is delivered to Nginx.

    5. The response is delivered to the browser.

    6. The initial page response is displayed to the user and the Angular Client application is booting up in the browser, configuring itself with the transferred parameters for channel, application, etc.

    7. Once booted up, additional REST calls are directed to the matching ICM endpoint for the configured channel.

    Further References

    Disclaimer
    The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.
    The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
    Home
    Knowledge Base
    Product Releases
    Log on to continue
    This Knowledge Base document is reserved for registered customers.
    Log on with your Intershop Entra ID to continue.
    Write an email to supportadmin@intershop.de if you experience login issues,
    or if you want to register as customer.