feat: added static uri support

src/core/build/createWebpackConfig.ts

@@ -9,6 +9,7 @@ import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
 import UglifyJsPlugin from "uglifyjs-webpack-plugin";
 import webpack, { Configuration } from "webpack";
 import ManifestPlugin from "webpack-manifest-plugin";
+import CDNWebpackPlugin from "./plugins/CDNWebpackPlugin";
 
 import paths from "./paths";
 
@@ -438,12 +439,14 @@ export default function createWebpackConfig({
         stream: [
           // We ship polyfills by default
           paths.appPolyfill,
+          paths.appPublicPath,
           ...devServerEntries,
           paths.appStreamIndex,
         ],
         auth: [
           // We ship polyfills by default
           paths.appPolyfill,
+          paths.appPublicPath,
           ...devServerEntries,
           paths.appAuthIndex,
           // Remove deactivated entries.
@@ -451,12 +454,14 @@ export default function createWebpackConfig({
         install: [
           // We ship polyfills by default
           paths.appPolyfill,
+          paths.appPublicPath,
           ...devServerEntries,
           paths.appInstallIndex,
         ],
         admin: [
           // We ship polyfills by default
           paths.appPolyfill,
+          paths.appPublicPath,
           ...devServerEntries,
           paths.appAdminIndex,
         ],
@@ -495,6 +500,9 @@ export default function createWebpackConfig({
           inject: "body",
           ...htmlWebpackConfig,
         }),
+        // Inject the pieces we need here to resolve all the now relative url's
+        // against the CDN if it's provided.
+        new CDNWebpackPlugin({ production: isProduction }),
         // Makes some environment variables available in index.html.
         // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
         // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

src/core/build/paths.ts

@@ -17,6 +17,7 @@ export default {
   appSrc: resolveSrc("."),
   appTsconfig: resolveSrc("core/client/tsconfig.json"),
   appPolyfill: resolveSrc("core/build/polyfills.js"),
+  appPublicPath: resolveSrc("core/build/publicPath.js"),
   appLocales: resolveSrc("locales"),
   appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
   appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),

src/core/build/plugins/CDNWebpackPlugin.ts

@@ -0,0 +1,66 @@
+import { Hooks } from "html-webpack-plugin";
+import { Compiler, Plugin } from "webpack";
+
+export interface CDNWebpackPluginOptions {
+  production: boolean;
+}
+
+export default class CDNWebpackPlugin implements Plugin {
+  private production: boolean;
+
+  constructor({ production }: CDNWebpackPluginOptions) {
+    this.production = production;
+  }
+
+  private prefixAttribute(attr: string | boolean) {
+    if (!attr || typeof attr !== "string" || !attr.startsWith("/")) {
+      return attr;
+    }
+
+    return "{{ staticURI }}" + attr;
+  }
+
+  private prefixTag = (tag: {
+    tagName: string;
+    attributes: Record<string, string | boolean>;
+  }) => {
+    switch (tag.tagName) {
+      case "link":
+        tag.attributes.href = this.prefixAttribute(tag.attributes.href);
+        break;
+      case "script":
+        tag.attributes.src = this.prefixAttribute(tag.attributes.src);
+        break;
+    }
+  };
+
+  public apply = (compiler: Compiler) => {
+    if (!this.production) {
+      return;
+    }
+
+    compiler.hooks.compilation.tap("CDNWebpackPlugin", compilation => {
+      (compilation.hooks as Hooks).htmlWebpackPluginAlterAssetTags.tapAsync(
+        "CDNWebpackPlugin",
+        (htmlPluginData, cb) => {
+          // Prefix all the asset's url's with the template.
+          htmlPluginData.head.forEach(this.prefixTag);
+          htmlPluginData.body.forEach(this.prefixTag);
+
+          // Insert the public path reference.
+          htmlPluginData.body.unshift({
+            tagName: "script",
+            attributes: {
+              type: "application/json",
+              id: "config",
+            },
+            innerHTML: "{{ staticURI | dump | safe }}",
+            voidTag: false,
+          });
+
+          return cb(null, htmlPluginData);
+        }
+      );
+    });
+  };
+}

src/core/build/publicPath.js

@@ -0,0 +1,3 @@
+__webpack_public_path__ = JSON.parse(
+  document.getElementById("config").innerText
+);