# 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