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

:thumbsup: no Angular code modification

:thumbsup: properly switch-able with ingress (Kubernetes)

:thumbsdown: additional deployment slots needed

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

:man_shrugging: custom nginx configuration

still recommended?: :heavy_check_mark: - 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

:thumbsup: no Angular code modification

:thumbsdown: all hell breaks loose in server.ts

:thumbsdown: multi-site handling in nginx gets annulled

still recommended?: :x:

#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

:thumbsup: not that much Angular code modification

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

:man_shrugging: custom nginx configuration

still recommended?: :x:

#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 :see_no_evil:
  • or no SEO compatibility
    • add a guard, that adds context if it is missing

:thumbsdown: heavy Angular code modification either way

:thumbsdown: multi-site handling in nginx gets annulled

still recommended?: :x:

#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

:thumbsup: few Angular code modification, few code modification overall

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

:man_shrugging: custom nginx configuration

:man_shrugging: a hack is still a hack

still recommended?: :heavy_check_mark: - This is probably the neatest solution, but still a hack :sweat_smile:

TODO Intershop

Make Dockerfile configuration aware

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