Multi Channel Context Routing

Limitation of Multi-Site Handling with Angular

• how do we do multi-site?

  • dynamic configuration with URL Params
  • handled in nginx before SSR
  • domain switching:
    • de.myshop.com, myshop.de -> German language & German channel

• describe limitation of Angular

  • wants to take control of whole route after domain -> dynamic configuration only per domain
  • possible to set baseHref and deployUrl, but build time setting
  • APP_BASE_HREF injection token

• -> not easily possible to include context-path in multi site handling

Requirements

• there probably won't be a standard solution, so it should not intervene too much in code over all
• probably best if just deployment
• reduce deployment cost

Solutions

#1 Multiple PWAs

• build different PWAs
  • configured via angular.json configurations
• PWA docker build must be made multiple times -> one deployment per context with own configuration
• custom nginx config to upstream to different PWAs

👍 no Angular code modification

👍 properly switch-able with ingress (Kubernetes)

👎 additional deployment slots needed

👎 not exactly multi-channel as reducing deployment cost was a goal

🤷‍♂️ custom nginx configuration

still recommended?: ✔️ - This is probably the cleanest solution

#2 Combine multiple Angular SSRs into one express.js server

• build PWA with multiple contexts
• import those Universal apps into express.js and switch middlewares via incoming paths

👍 no Angular code modification

👎 all hell breaks loose in server.ts

👎 multi-site handling in nginx gets annulled

still recommended?: ❌

#3 Ignore the first part of the URL in PWA and just take it as context path dynamically

• hacky solution like this: https://stackoverflow.com/a/39084260
• I did not get it working

👍 not that much Angular code modification

👎 all hell breaks loose in server.ts (managing custom context-paths)

🤷‍♂️ custom nginx configuration

still recommended?: ❌

#4 Properly implement the first part into Angular routing

• routing must be adapted in app-routing.module and all extensions.

• possibly wrap all routes in RouterModule.forX configuration for maintainability

• SEO compatibility?

  • either generate all routes correctly with context path
    • every routerLink and router.navigate 🙈
  • or no SEO compatibility
    • add a guard, that adds context if it is missing

👎 heavy Angular code modification either way

👎 multi-site handling in nginx gets annulled

still recommended?: ❌

#5 The neat hack

• remove baseHref from index.html and supply it adaptively
  • supply the SSR process with APP_BASE_HREF
  • on outgoing response add <base href='sth'/> tag to html head. << hack
  • client-side application is configured with proper baseHref
• nginx makes multi-channel configuration

👍 few Angular code modification, few code modification overall

👎 not switch-able with ingress (Kubernetes), because deployUrl is not set. Everything depends on /

🤷‍♂️ custom nginx configuration

🤷‍♂️ a hack is still a hack

still recommended?: ✔️ - This is probably the neatest solution, but still a hack 😅

TODO Intershop

Make Dockerfile configuration aware

• it should be possible to pass in the configuration which is built in the Dockerfile as an argument