NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin
The NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin are Rspack plugins that handle the development server for module federation in Nx Workspaces. They aim to provide the same Developer Experience(DX) that you would normally receive from using Nx's module-federation-dev-server executors in a non-executor (Inferred Tasks) project.
Usage
To use the plugin, you need to add it to your rspack.config.ts file. You can do this by adding the following to your config.
Client Side Rendering
1import { NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack';
2import config from './module-federation.config';
3
4export default {
5 ...otherRspackConfigOptions,
6 plugins: [
7 new NxModuleFederationDevServerPlugin({
8 config,
9 }),
10 ],
11};
12Server Side Rendering
1import { NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack';
2import config from './module-federation.config';
3
4export default {
5 ...otherRspackConfigOptions,
6 plugins: [
7 new NxModuleFederationSSRDevServerPlugin({
8 config,
9 }),
10 ],
11};
12How it works
The NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin will serve the remote applications in via a single file server (using http-server) and proxy requests to the remote applications to the correct port. This allows for a more streamlined development experience when working with module federation. You can learn more about this experience in the Module Federation Technical Overview.
The key difference between NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin is that the latter will handle both browser and server bundles to support Server Side Rendering (SSR). It will also serve the host/consumer application by forking (child_process.fork) the server.js output from the server bundle of the host application.
API Reference
NxModuleFederationDevServerPlugin
1export class NxModuleFederationDevServerPlugin {
2 constructor(
3 private _options: {
4 config: ModuleFederationConfig;
5 devServerConfig?: NxModuleFederationDevServerConfig;
6 }
7 ) {
8 this._options.devServerConfig ??= {
9 host: 'localhost',
10 };
11 }
12}
13NxModuleFederationSSRDevServerPlugin
1export class NxModuleFederationSSRDevServerPlugin {
2 constructor(
3 private _options: {
4 config: ModuleFederationConfig;
5 devServerConfig?: NxModuleFederationDevServerConfig;
6 }
7 ) {
8 this._options.devServerConfig ??= {
9 host: 'localhost',
10 };
11 }
12}
13NxModuleFederationDevServerConfig
1export interface NxModuleFederationDevServerConfig {
2 /**
3 * The URL hostname to use for the dev server.
4 */
5 host?: string;
6 /**
7 * The port to use for the static remotes.
8 */
9 staticRemotesPort?: number;
10 /**
11 * The path to the module federation manifest file when using Dynamic Module Federation.
12 */
13 pathToManifestFile?: string;
14 /**
15 * Whether to use SSL for the remote applications.
16 */
17 ssl?: boolean;
18 /**
19 * The path to the SSL certificate file.
20 */
21 sslCert?: string;
22 /**
23 * The path to the SSL key file.
24 */
25 sslKey?: string;
26 /**
27 * The number of parallel processes to use when building the static remotes.
28 */
29 parallel?: number;
30 /**
31 * Options to proivde fine-grained control over how the dev server finds the remote applications.
32 */
33 devRemoteFindOptions?: DevRemoteFindOptions;
34}
35
36export interface DevRemoteFindOptions {
37 retries?: number;
38 retryDelay?: number;
39}
40