add options to let user enable CDN for remote subapps

electrode-io · Apr 19, 2021 · 4051545 · 4051545
1 parent 66e66d7
commit 4051545
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/xarc-app-dev/src/config/opt2/remote-federation.ts b/packages/xarc-app-dev/src/config/opt2/remote-federation.ts
@@ -12,6 +12,16 @@ export type ModuleShareOptions = {
   eager?: boolean;
 };
 
+/**
+ * Options for if you need to serve your remote module federation assets from a CDN server
+ */
+export type RemoteSubAppCDNOptions = {
+  /**
+   * Enable the use of a CDN server for remote subapp assets
+   */
+  enable?: boolean;
+};
+
 /**
  * Options for exposing or consuming remote subapps using webpack5 ModuleFederationPlugin
  *
@@ -30,6 +40,16 @@ export type RemoteSubAppOptions = {
    *
    */
   name: string;
+
+  /**
+   * Options for if you need to serve your remote module federation assets from a CDN server
+   *
+   * @remark - Without CDN mapping, for module federation remote assets to work, it must set
+   *  set `publicPath` to `"auto"`.
+   *  - In development mode, webpack dev server serves the assets at `"/js"` and this
+   *  will have no effect, and `publicPath` is forced to be `"auto"`
+   */
+  cdn?: RemoteSubAppCDNOptions;
   /**
    * Name the remote entry JS file
    *

diff --git a/packages/xarc-webpack/src/partials/subapp-chunks.ts b/packages/xarc-webpack/src/partials/subapp-chunks.ts
@@ -34,6 +34,7 @@ function makeConfig(options) {
 
   if (webpack.v1RemoteSubApps) {
     let exposeRemote = 0;
+    const cdnEnable = _.get(webpack, "v1RemoteSubApps.cdn.enable", false);
     const modFedPlugins = [].concat(webpack.v1RemoteSubApps).map(remote => {
       const missing = [];
       const subAppsToExpose = []
@@ -67,7 +68,8 @@ function makeConfig(options) {
       return new ModuleFederationPlugin({
         name,
         filename: remote.filename || `_remote_~.${idName}.js`,
-        entry: !process.env.WEBPACK_DEV && require.resolve("../client/webpack5-jsonp-cdn"),
+        entry:
+          cdnEnable && !process.env.WEBPACK_DEV && require.resolve("../client/webpack5-jsonp-cdn"),
         exposes,
         shared
       } as any);
@@ -76,7 +78,7 @@ function makeConfig(options) {
 
     // if app is exposing modules for remote loading, then we must set following
     if (exposeRemote > 0) {
-      if (process.env.WEBPACK_DEV) {
+      if (process.env.WEBPACK_DEV || !cdnEnable) {
         // in dev mode there's no CDN mapping, so must set public path to auto for
         // remote container to load its bundles
         options.currentConfig.output.publicPath = "auto";