feat: provide deploy-url as runtime property

Dockerfile

@@ -17,7 +17,7 @@ RUN node schematics/customization/service-worker ${serviceWorker} || true
 COPY templates/webpack/* /workspace/templates/webpack/
 ARG testing=false
 ENV TESTING=${testing}
-RUN npm run ng -- build -c ${configuration}
+RUN npm run ng -- build -c ${configuration} --deploy-url=DEPLOY_URL_PLACEHOLDER
 # synchronize-marker:pwa-docker-build:end
 
 # ^ this part above is copied to Dockerfile_noSSR and should be kept in sync

Dockerfile_noSSR

@@ -17,11 +17,14 @@ RUN node schematics/customization/service-worker ${serviceWorker} || true
 COPY templates/webpack/* /workspace/templates/webpack/
 ARG testing=false
 ENV TESTING=${testing}
-RUN npm run ng -- build -c ${configuration}
+RUN npm run ng -- build -c ${configuration} --deploy-url=DEPLOY_URL_PLACEHOLDER
 # synchronize-marker:pwa-docker-build:end
 
 # ^ this part above is copied from the standard Dockerfile and should be kept in sync
 
+ARG deployUrl=/
+RUN npx ts-node scripts/set-deploy-url ${deployUrl}
+
 FROM nginx:alpine
 COPY templates/nginx.conf /etc/nginx/nginx.conf
 COPY --from=buildstep /workspace/dist/browser /usr/share/nginx/html

docker-compose.yml

@@ -18,10 +18,32 @@ services:
       # - PROXY_ICM=true
       - TRUST_ICM=true
       # - PROMETHEUS=on
+
+  # <CDN-Example>
+  # add 127.0.0.1 mypwa.net to your hosts file and
+  # uncomment the following lines
+  #
+  #     - DEPLOY_URL=http://mypwa.net:4222
+  # cdn:
+  #   build:
+  #     context: .
+  #     dockerfile: Dockerfile_noSSR
+  #     args:
+  #       configuration: production
+  #       serviceWorker: 'false'
+  #       deployUrl: http://mypwa.net:4222
+  #   ports:
+  #     - '4222:4200'
+  #
+  # </CDN-Example>
+
   nginx:
     build: nginx
     depends_on:
       - pwa
+    ports:
+      - '4200:80'
+      # - '9113:9113'
     environment:
       UPSTREAM_PWA: 'http://pwa:4200'
       # DEBUG: 1
@@ -54,7 +76,3 @@ services:
             application: smb-responsive
             features: quoting
             theme: "blue|688dc3"
-
-    ports:
-      - '4200:80'
-      # - '9113:9113'

scripts/set-deploy-url.ts

@@ -0,0 +1,26 @@
+// tslint:disable: ish-ordered-imports ban-specific-imports no-console
+import * as fs from 'fs';
+import * as glob from 'glob';
+import * as path from 'path';
+import { setDeployUrlInFile } from '../src/ssr/deploy-url';
+
+if (process.argv.length < 3) {
+  console.error('required argument deployUrl missing');
+  process.exit(1);
+}
+
+let deployUrl = process.argv[2];
+
+if (!deployUrl.endsWith('/')) {
+  deployUrl += '/';
+}
+
+glob.sync('dist/browser/*.{js,css,html}').forEach(file => {
+  console.log(`setting deployUrl "${deployUrl}" in`, file);
+
+  const input = fs.readFileSync(file, { encoding: 'utf-8' });
+
+  const output = setDeployUrlInFile(deployUrl, path.basename(file), input);
+
+  fs.writeFileSync(file, output);
+});

server.ts

@@ -1,17 +1,19 @@
-// tslint:disable: no-console ish-ordered-imports force-jsdoc-comments
+// tslint:disable: no-console ish-ordered-imports force-jsdoc-comments ban-specific-imports
 import 'zone.js/dist/zone-node';
 
 import * as express from 'express';
 import { join } from 'path';
 import * as robots from 'express-robots-txt';
 import * as fs from 'fs';
 import * as proxy from 'express-http-proxy';
-// tslint:disable-next-line: ban-specific-imports
 import { AppServerModule, ICM_WEB_URL, HYBRID_MAPPING_TABLE, environment, APP_BASE_HREF } from './src/main.server';
 import { ngExpressEngine } from '@nguniversal/express-engine';
+import { getDeployURLFromEnv, setDeployUrlInFile } from './src/ssr/deploy-url';
 
 const PORT = process.env.PORT || 4200;
 
+const DEPLOY_URL = getDeployURLFromEnv();
+
 const DIST_FOLDER = join(process.cwd(), 'dist');
 
 // uncomment this block to prevent ssr issues with third-party libraries regarding window, document, HTMLElement and navigator
@@ -28,8 +30,8 @@ global['HTMLElement'] = win.HTMLElement;
 global['navigator'] = win.navigator;
 // tslint:enable:no-string-literal
 */
-
 // The Express app is exported so that it can be used by serverless Functions.
+// not-dead-code
 export function app() {
   const logging = /on|1|true|yes/.test(process.env.LOGGING?.toLowerCase());
 
@@ -65,7 +67,7 @@ export function app() {
   if (logging) {
     server.use(
       require('morgan')('tiny', {
-        skip: req => req.originalUrl.startsWith('/INTERSHOP/static'),
+        skip: (req: express.Request) => req.originalUrl.startsWith('/INTERSHOP/static'),
       })
     );
   }
@@ -95,6 +97,18 @@ export function app() {
     );
   }
 
+  server.get(/\/.*\.(js|css)$/, (req, res) => {
+    const path = req.originalUrl.substring(1);
+    fs.readFile(join(DIST_FOLDER, 'browser', path), { encoding: 'utf-8' }, (err, data) => {
+      if (err) {
+        res.sendStatus(404);
+      } else {
+        res.set('Content-Type', (path.endsWith('css') ? 'text/css' : 'application/javascript') + '; charset=UTF-8');
+        res.send(setDeployUrlInFile(DEPLOY_URL, path, data));
+      }
+    });
+  });
+
   // Serve static files from /browser
   server.get(
     '*.*',
@@ -107,14 +121,22 @@ export function app() {
           // file should be re-checked more frequently -> 5m
           res.set('Cache-Control', 'public, max-age=300');
         }
+        // add cors headers for required resources
+        if (
+          DEPLOY_URL.startsWith('http') &&
+          ['manifest.webmanifest', 'woff2', 'woff', 'json'].some(match => path.endsWith(match))
+        ) {
+          res.set('access-control-allow-origin', '*');
+        }
       },
     })
   );
 
   const icmProxy = proxy(ICM_BASE_URL, {
     // preserve original path
-    proxyReqPathResolver: req => req.originalUrl,
-    proxyReqOptDecorator: options => {
+    proxyReqPathResolver: (req: express.Request) => req.originalUrl,
+    // tslint:disable-next-line: no-any
+    proxyReqOptDecorator: (options: any) => {
       if (process.env.TRUST_ICM) {
         // https://github.com/villadora/express-http-proxy#q-how-to-ignore-self-signed-certificates-
         options.rejectUnauthorized = false;
@@ -173,7 +195,9 @@ export function app() {
           }
           newHtml = newHtml.replace(/<base href="[^>]*>/, `<base href="${baseHref}" />`);
 
-          res.status(res.statusCode).send(newHtml || html);
+          newHtml = setDeployUrlInFile(DEPLOY_URL, req.originalUrl, newHtml);
+
+          res.status(res.statusCode).send(newHtml);
         } else {
           res.status(500).send(err.message);
         }

src/ssr/deploy-url.ts

@@ -0,0 +1,33 @@
+export function getDeployURLFromEnv(): string {
+  const envDeployUrl = process.env.DEPLOY_URL || '/';
+
+  return `${envDeployUrl}${envDeployUrl.endsWith('/') ? '' : '/'}`;
+}
+
+export function setDeployUrlInFile(deployUrl: string, path: string, input: string): string {
+  if (input) {
+    if (path.startsWith('runtime') && path.endsWith('.js')) {
+      return input.replace(/DEPLOY_URL_PLACEHOLDER/g, deployUrl);
+    }
+
+    let newInput = input;
+
+    const cssRegex = /url\(\/?(assets.*?|[a-zA-Z].*?woff2?)\)/g;
+    if (cssRegex.test(newInput)) {
+      newInput = newInput.replace(cssRegex, (...args) => `url(${deployUrl}${args[1]})`);
+    }
+
+    const assetsRegex = /"\/?(assets[^"]*\.(\w{2,5}|webmanifest)|[a-z0-9]+\.css)"/g;
+    if (assetsRegex.test(newInput)) {
+      newInput = newInput.replace(assetsRegex, (...args) => `"${deployUrl}${args[1]}"`);
+    }
+
+    const javascriptRegex = /"(DEPLOY_URL_PLACEHOLDER|\/)?((runtime|vendor|main|polyfills|styles)[^"]*\.(js|css))"/g;
+    if (javascriptRegex.test(newInput)) {
+      newInput = newInput.replace(javascriptRegex, (...args) => `"${deployUrl}${args[2]}"`);
+    }
+
+    return newInput;
+  }
+  return input;
+}

src/typings.d.ts

@@ -5,6 +5,10 @@ declare module '@angular/common/locales/global/de';
 
 declare module '@angular/common/locales/global/fr';
 
+declare module 'express-http-proxy';
+
+declare module 'express-robots-txt';
+
 interface NodeModule {
   id: string;
 }

templates/nginx.conf

@@ -12,7 +12,7 @@ events {
 }
 
 http {
-    include       /etc/nginx/mime.types;
+    include mime.types;
     default_type  application/octet-stream;
 
     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
@@ -26,17 +26,32 @@ http {
     keepalive_timeout  65;
 
     gzip  on;
+    gzip_types text/plain text/xml text/css
+               text/javascript application/javascript;
 
     server {
         listen       4200;
         listen  [::]:4200;
         server_name  localhost;
 
-        location / {
+        location ~* /.*index.html {
             root   /usr/share/nginx/html;
             try_files $uri $uri/ /index.html;
         }
 
+        location / {
+            root   /usr/share/nginx/html;
+
+            if ($request_method = OPTIONS) {
+                return 204;
+            }
+
+            add_header Access-Control-Allow-Origin *;
+            add_header Access-Control-Max-Age 3600;
+            add_header Access-Control-Expose-Headers Content-Length;
+            add_header Access-Control-Allow-Headers Range;
+        }
+
         error_page   500 502 503 504  /50x.html;
         location = /50x.html {
             root   /usr/share/nginx/html;

tsconfig.all.json

@@ -5,5 +5,5 @@
     "outDir": "./node_modules/.out-tsc/all",
     "types": ["jest", "jest-extended", "node"]
   },
-  "include": ["src/**/*.ts", "projects/**/*.ts"]
+  "include": ["src/**/*.ts", "projects/**/*.ts", "server.ts", "src/**/*.d.ts"]
 }

tslint.json

@@ -787,6 +787,7 @@
         ],
         "ignoredFiles": [
           "server.ts$",
+          "src/ssr/.*.ts",
           "src/[^/]*.ts$",
           ".*.spec.ts$",
           "tslint-rules/",