Document Tree
Document Properties
Kbid
3A0821
Last Modified
13-Mar-2023
Added to KB
18-Apr-2023
Public Access
Everyone
Status
Online
Doc Type
Guidelines
Product
Intershop Progressive Web App
Guide - Intershop Progressive Web App - Handle Rewritten ICM URLs in the Hybrid Approach

If the ICM is set up with URL Rewriting, further modifications are required to run the deployment with the Hybrid Approach.

The examples in this guide follow the default example for ICM URL rewriting.
In particular we want to focus on the following two examples:

  • Product Detail Pages of the ICM
    • URLs are in the form /Home-Entertainment/SmartHome/google-home-zid201807171
    • They should be handled by the PWA in the form /SmartHome/google-home-sku201807171
  • The help desk of the PWA
    • URLs are in the form /page/systempage.helpdesk.index.pagelet2-Page (generic content page)
    • This URL should be handled by the ICM: /helpdesk

Mapping Incoming Rewritten ICM URLs to the PWA

Considering the example, the incoming product detail page URL mapping must be included in the mapping table:

  {
    id: 'Product Detail Page',
    icm: '(.*\\/)?(?<category>[\\w-]+)\\/(?<slug>[\\w-]+)-zid(?<sku>[\\w-]+)$',
    pwaBuild: `$<category>/$<slug>-$<sku>${PWA_CONFIG_BUILD}`,
    pwa: `^.*sku([\\w-]+)$`,
    // icmBuild not required
    handledBy: 'pwa'
  }

Mapping PWA URLs to Rewritten ICM URLs

First, the mapping table must be adapted to instruct the PWA to leave the single-page application when switching to the help desk content page:

export const ICM_WEB_URL = '/';

...

  {
    id: 'Helpdesk',
    icm: "${ICM_WEB_URL}helpdesk.*",
    // pwaBuild not required
    pwa: '^/page/systempage.helpdesk.index.pagelet2-Page$',
    icmBuild: 'helpdesk',
    handledBy: 'icm'
  }

Then, the nginx configuration must be adapted.
The supplied nginx dynamically adds multi-site configuration parameters to dynamically configure the PWA depending on the incoming URL.
The ICM cannot handle them, so traffic to the ICM must be excluded from adding those parameters.
You can do this by extending the channel configuration:

nginx/channel.conf.tmpl:

-    location ~* ^/INTERSHOP.*$ {
+    location ~* ^/(INTERSHOP|helpdesk).*$ {
         proxy_set_header Host $http_host;

Last but not least, the express.js server must be instructed to proxy traffic to /helpdesk to the ICM upstream:

server.ts:

   app.use('/INTERSHOP', icmProxy);
+  app.use('/helpdesk', icmProxy);
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.