Related Github Documents
Document Properties
Kbid2943Q8
Last Modified22-Apr-2020
Added to KB18-Jun-2020
Public AccessEveryone
StatusOnline
Doc TypeGuidelines, Concepts & Cookbooks
ProductIntershop Progressive Web App

Guide - Intershop Progressive Web App - Handle Rewritten ICM URLs in Hybrid Mode

Handle Rewritten ICM URLs in Hybrid Mode

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:

     # let ICM handle everything ICM related
-    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);

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.

Customer Support
Knowledge Base
Product Resources
Tickets