@nx/module-federation 20.6.2 → 20.6.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nx/module-federation",
   "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.",
-  "version": "20.6.2",
+  "version": "20.6.3",
   "type": "commonjs",
   "repository": {
     "type": "git",
@@ -25,9 +25,9 @@
   "executors": "./executors.json",
   "dependencies": {
     "tslib": "^2.3.0",
-    "@nx/devkit": "20.6.2",
-    "@nx/js": "20.6.2",
-    "@nx/web": "20.6.2",
+    "@nx/devkit": "20.6.3",
+    "@nx/js": "20.6.3",
+    "@nx/web": "20.6.3",
     "picocolors": "^1.1.0",
     "webpack": "^5.88.0",
     "@module-federation/enhanced": "^0.9.0",

package/rspack.d.ts

@@ -2,3 +2,4 @@ export * from './src/with-module-federation/rspack/with-module-federation';
 export * from './src/with-module-federation/rspack/with-module-federation-ssr';
 export * from './src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin';
 export * from './src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin';
+export * from './src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-ssr-dev-server-plugin';

package/rspack.js

@@ -5,3 +5,4 @@ tslib_1.__exportStar(require("./src/with-module-federation/rspack/with-module-fe
 tslib_1.__exportStar(require("./src/with-module-federation/rspack/with-module-federation-ssr"), exports);
 tslib_1.__exportStar(require("./src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin"), exports);
 tslib_1.__exportStar(require("./src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin"), exports);
+tslib_1.__exportStar(require("./src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-ssr-dev-server-plugin"), exports);

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin.d.ts

@@ -3,10 +3,11 @@ import { ModuleFederationConfig } from '../../../utils/models';
 import { NxModuleFederationDevServerConfig } from '../../models';
 export declare class NxModuleFederationDevServerPlugin implements RspackPluginInstance {
     private _options;
+    private devServerProcess;
     private nxBin;
     constructor(_options: {
         config: ModuleFederationConfig;
-        devServerConfig: NxModuleFederationDevServerConfig;
+        devServerConfig?: NxModuleFederationDevServerConfig;
     });
     apply(compiler: Compiler): void;
     private setup;

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-dev-server-plugin.js

@@ -12,10 +12,13 @@ class NxModuleFederationDevServerPlugin {
     constructor(_options) {
         this._options = _options;
         this.nxBin = require.resolve('nx/bin/nx');
+        this._options.devServerConfig ??= {
+            host: 'localhost',
+        };
     }
     apply(compiler) {
         compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, async (params, callback) => {
-            const staticRemotesConfig = await this.setup();
+            const staticRemotesConfig = await this.setup(compiler);
             devkit_1.logger.info(`NX Starting module federation dev-server for ${pc.bold(this._options.config.name)} with ${Object.keys(staticRemotesConfig).length} remotes`);
             const mappedLocationOfRemotes = await (0, utils_1.buildStaticRemotes)(staticRemotesConfig, this._options.devServerConfig, this.nxBin);
             (0, utils_1.startStaticRemotesFileServer)(staticRemotesConfig, devkit_1.workspaceRoot, this._options.devServerConfig.staticRemotesPort);
@@ -29,7 +32,7 @@ class NxModuleFederationDevServerPlugin {
             callback();
         });
     }
-    async setup() {
+    async setup(compiler) {
         const projectGraph = (0, devkit_1.readCachedProjectGraph)();
         const { projects: workspaceProjects } = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
         const project = workspaceProjects[this._options.config.name];

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin.d.ts

@@ -7,6 +7,7 @@ export declare class NxModuleFederationPlugin implements RspackPluginInstance {
     constructor(_options: {
         config: ModuleFederationConfig;
         devServerConfig?: NxModuleFederationDevServerConfig;
+        isServer?: boolean;
     }, configOverride?: NxModuleFederationConfigOverride);
     apply(compiler: Compiler): void;
 }

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-plugin.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NxModuleFederationPlugin = void 0;
 const utils_1 = require("../../../with-module-federation/rspack/utils");
-const nx_module_federation_dev_server_plugin_1 = require("./nx-module-federation-dev-server-plugin");
 class NxModuleFederationPlugin {
     constructor(_options, configOverride) {
         this._options = _options;
@@ -14,12 +13,27 @@ class NxModuleFederationPlugin {
         }
         // This is required to ensure Module Federation will build the project correctly
         compiler.options.optimization.runtimeChunk = false;
-        const isDevServer = !!process.env['WEBPACK_SERVE'];
-        // TODO(colum): Add support for SSR
-        const config = (0, utils_1.getModuleFederationConfig)(this._options.config);
+        compiler.options.output.uniqueName = this._options.config.name;
+        if (this._options.isServer) {
+            compiler.options.target = 'async-node';
+            compiler.options.output.library ??= {
+                type: 'commonjs-module',
+            };
+            compiler.options.output.library.type = 'commonjs-module';
+        }
+        const config = (0, utils_1.getModuleFederationConfig)(this._options.config, {
+            isServer: this._options.isServer,
+        });
         const sharedLibraries = config.sharedLibraries;
         const sharedDependencies = config.sharedDependencies;
         const mappedRemotes = config.mappedRemotes;
+        const runtimePlugins = [];
+        if (this.configOverride?.runtimePlugins) {
+            runtimePlugins.push(...(this.configOverride.runtimePlugins ?? []));
+        }
+        if (this._options.isServer) {
+            runtimePlugins.push(require.resolve('@module-federation/node/runtimePlugin'));
+        }
         new (require('@module-federation/enhanced/rspack').ModuleFederationPlugin)({
             name: this._options.config.name.replace(/-/g, '_'),
             filename: 'remoteEntry.js',
@@ -28,24 +42,21 @@ class NxModuleFederationPlugin {
             shared: {
                 ...(sharedDependencies ?? {}),
             },
+            ...(this._options.isServer
+                ? {
+                    library: {
+                        type: 'commonjs-module',
+                    },
+                    remoteType: 'script',
+                }
+                : {}),
             ...(this.configOverride ? this.configOverride : {}),
-            runtimePlugins: this.configOverride
-                ? this.configOverride.runtimePlugins ?? []
-                : [],
+            runtimePlugins,
             virtualRuntimeEntry: true,
         }).apply(compiler);
         if (sharedLibraries) {
             sharedLibraries.getReplacementPlugin().apply(compiler);
         }
-        if (isDevServer) {
-            new nx_module_federation_dev_server_plugin_1.NxModuleFederationDevServerPlugin({
-                config: this._options.config,
-                devServerConfig: {
-                    ...(this._options.devServerConfig ?? {}),
-                    host: this._options.devServerConfig?.host ?? 'localhost',
-                },
-            }).apply(compiler);
-        }
     }
 }
 exports.NxModuleFederationPlugin = NxModuleFederationPlugin;

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-ssr-dev-server-plugin.d.ts

@@ -0,0 +1,15 @@
+import { Compiler, RspackPluginInstance } from '@rspack/core';
+import { ModuleFederationConfig } from '../../../utils/models';
+import { NxModuleFederationDevServerConfig } from '../../models';
+export declare class NxModuleFederationSSRDevServerPlugin implements RspackPluginInstance {
+    private _options;
+    private devServerProcess;
+    private nxBin;
+    constructor(_options: {
+        config: ModuleFederationConfig;
+        devServerConfig?: NxModuleFederationDevServerConfig;
+    });
+    apply(compiler: Compiler): void;
+    private startServer;
+    private setup;
+}

package/src/plugins/nx-module-federation-plugin/rspack/nx-module-federation-ssr-dev-server-plugin.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NxModuleFederationSSRDevServerPlugin = void 0;
+const core_1 = require("@rspack/core");
+const pc = require("picocolors");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
+const fs_1 = require("fs");
+const utils_1 = require("../../utils");
+const node_child_process_1 = require("node:child_process");
+const PLUGIN_NAME = 'NxModuleFederationSSRDevServerPlugin';
+class NxModuleFederationSSRDevServerPlugin {
+    constructor(_options) {
+        this._options = _options;
+        this.nxBin = require.resolve('nx/bin/nx');
+        this._options.devServerConfig ??= {
+            host: 'localhost',
+        };
+    }
+    apply(compiler) {
+        compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, async (compiler, callback) => {
+            compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, async (params, callback) => {
+                const staticRemotesConfig = await this.setup(compiler);
+                devkit_1.logger.info(`NX Starting module federation dev-server for ${pc.bold(this._options.config.name)} with ${Object.keys(staticRemotesConfig).length} remotes`);
+                const mappedLocationOfRemotes = await (0, utils_1.buildStaticRemotes)(staticRemotesConfig, this._options.devServerConfig, this.nxBin);
+                (0, utils_1.startStaticRemotesFileServer)(staticRemotesConfig, devkit_1.workspaceRoot, this._options.devServerConfig.staticRemotesPort);
+                (0, utils_1.startRemoteProxies)(staticRemotesConfig, mappedLocationOfRemotes, {
+                    pathToCert: this._options.devServerConfig.sslCert,
+                    pathToKey: this._options.devServerConfig.sslCert,
+                }, true);
+                new core_1.DefinePlugin({
+                    'process.env.NX_MF_DEV_REMOTES': process.env.NX_MF_DEV_REMOTES,
+                }).apply(compiler);
+                await this.startServer(compiler);
+                callback();
+            });
+            callback();
+        });
+    }
+    async startServer(compiler) {
+        compiler.hooks.afterEmit.tapAsync(PLUGIN_NAME, async (_, callback) => {
+            const serverPath = (0, path_1.join)(compiler.options.output.path, compiler.options.output.filename ?? 'server.js');
+            if (this.devServerProcess) {
+                await new Promise((res) => {
+                    this.devServerProcess.on('exit', () => {
+                        res();
+                    });
+                    this.devServerProcess.kill();
+                    this.devServerProcess = undefined;
+                });
+            }
+            if (!(0, fs_1.existsSync)(serverPath)) {
+                for (let retries = 0; retries < 10; retries++) {
+                    await new Promise((res) => setTimeout(res, 100));
+                    if ((0, fs_1.existsSync)(serverPath)) {
+                        break;
+                    }
+                }
+                if (!(0, fs_1.existsSync)(serverPath)) {
+                    throw new Error(`Could not find server bundle at ${serverPath}.`);
+                }
+            }
+            this.devServerProcess = (0, node_child_process_1.fork)(serverPath);
+            process.on('exit', () => {
+                this.devServerProcess?.kill();
+            });
+            process.on('SIGINT', () => {
+                this.devServerProcess?.kill();
+            });
+            callback();
+        });
+    }
+    async setup(compiler) {
+        const projectGraph = (0, devkit_1.readCachedProjectGraph)();
+        const { projects: workspaceProjects } = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
+        const project = workspaceProjects[this._options.config.name];
+        if (!this._options.devServerConfig.pathToManifestFile) {
+            this._options.devServerConfig.pathToManifestFile =
+                (0, utils_1.getDynamicMfManifestFile)(project, devkit_1.workspaceRoot);
+        }
+        else {
+            const userPathToManifestFile = (0, path_1.join)(devkit_1.workspaceRoot, this._options.devServerConfig.pathToManifestFile);
+            if (!(0, fs_1.existsSync)(userPathToManifestFile)) {
+                throw new Error(`The provided Module Federation manifest file path does not exist. Please check the file exists at "${userPathToManifestFile}".`);
+            }
+            else if ((0, path_1.extname)(this._options.devServerConfig.pathToManifestFile) !== '.json') {
+                throw new Error(`The Module Federation manifest file must be a JSON. Please ensure the file at ${userPathToManifestFile} is a JSON.`);
+            }
+            this._options.devServerConfig.pathToManifestFile = userPathToManifestFile;
+        }
+        const { remotes, staticRemotePort } = (0, utils_1.getRemotes)(this._options.config, projectGraph, this._options.devServerConfig.pathToManifestFile);
+        this._options.devServerConfig.staticRemotesPort ??= staticRemotePort;
+        const remotesConfig = (0, utils_1.parseRemotesConfig)(remotes, devkit_1.workspaceRoot, projectGraph, true);
+        const staticRemotesConfig = await (0, utils_1.getStaticRemotes)(remotesConfig.config ?? {});
+        const devRemotes = remotes.filter((r) => !staticRemotesConfig[r]);
+        process.env.NX_MF_DEV_REMOTES = JSON.stringify([
+            ...(devRemotes.length > 0 ? devRemotes : []),
+            project.name,
+        ]);
+        return staticRemotesConfig ?? {};
+    }
+}
+exports.NxModuleFederationSSRDevServerPlugin = NxModuleFederationSSRDevServerPlugin;

package/src/plugins/utils/parse-remotes-config.d.ts

@@ -1,6 +1,6 @@
 import { ProjectGraph } from '@nx/devkit';
 import { StaticRemoteConfig } from '../../utils';
-export declare function parseRemotesConfig(remotes: string[] | undefined, workspaceRoot: string, projectGraph: ProjectGraph): {
+export declare function parseRemotesConfig(remotes: string[] | undefined, workspaceRoot: string, projectGraph: ProjectGraph, isServer?: boolean): {
     remotes: string[];
     config: Record<string, StaticRemoteConfig>;
 };

package/src/plugins/utils/parse-remotes-config.js

@@ -4,7 +4,7 @@ exports.parseRemotesConfig = parseRemotesConfig;
 const path_1 = require("path");
 const devkit_internals_1 = require("nx/src/devkit-internals");
 const devkit_1 = require("@nx/devkit");
-function parseRemotesConfig(remotes, workspaceRoot, projectGraph) {
+function parseRemotesConfig(remotes, workspaceRoot, projectGraph, isServer) {
     if (!remotes?.length) {
         return { remotes: [], config: undefined };
     }
@@ -24,7 +24,12 @@ function parseRemotesConfig(remotes, workspaceRoot, projectGraph) {
         const basePath = (0, path_1.dirname)(outputPath);
         const urlSegment = app;
         const port = projectGraph.nodes[app].data.targets?.['serve']?.options.port;
-        config[app] = { basePath, outputPath, urlSegment, port };
+        config[app] = {
+            basePath,
+            outputPath: isServer ? (0, path_1.dirname)(outputPath) : outputPath,
+            urlSegment,
+            port,
+        };
     }
     return { remotes, config };
 }

package/src/plugins/utils/start-remote-proxies.d.ts

@@ -2,4 +2,4 @@ import { StaticRemoteConfig } from '../../utils';
 export declare function startRemoteProxies(staticRemotesConfig: Record<string, StaticRemoteConfig>, mappedLocationsOfRemotes: Record<string, string>, sslOptions?: {
     pathToCert: string;
     pathToKey: string;
-}): void;
+}, isServer?: boolean): void;

package/src/plugins/utils/start-remote-proxies.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.startRemoteProxies = startRemoteProxies;
 const fs_1 = require("fs");
-function startRemoteProxies(staticRemotesConfig, mappedLocationsOfRemotes, sslOptions) {
+function startRemoteProxies(staticRemotesConfig, mappedLocationsOfRemotes, sslOptions, isServer) {
     const { createProxyMiddleware } = require('http-proxy-middleware');
     const express = require('express');
     let sslCert;
@@ -28,6 +28,16 @@ function startRemoteProxies(staticRemotesConfig, mappedLocationsOfRemotes, sslOp
             target: mappedLocationsOfRemotes[app],
             changeOrigin: true,
             secure: sslCert ? false : undefined,
+            pathRewrite: isServer
+                ? (path) => {
+                    if (path.includes('/server')) {
+                        return path;
+                    }
+                    else {
+                        return `browser/${path}`;
+                    }
+                }
+                : undefined,
         }));
         const proxyServer = (sslCert ? https : http)
             .createServer({ cert: sslCert, key: sslKey }, expressProxy)