diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 2e47b5818d..a069f962fc 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -8581,6 +8581,31 @@ "path": "/nx-api/module-federation", "name": "module-federation", "children": [ + { + "id": "documents", + "path": "/nx-api/module-federation/documents", + "name": "documents", + "children": [ + { + "name": "NxModuleFederationPlugin", + "path": "/nx-api/module-federation/documents/nx-module-federation-plugin", + "id": "nx-module-federation-plugin", + "isExternal": false, + "children": [], + "disableCollapsible": false + }, + { + "name": "NxModuleFederationDevServerPlugin", + "path": "/nx-api/module-federation/documents/nx-module-federation-dev-server-plugin", + "id": "nx-module-federation-dev-server-plugin", + "isExternal": false, + "children": [], + "disableCollapsible": false + } + ], + "isExternal": false, + "disableCollapsible": false + }, { "id": "migrations", "path": "/nx-api/module-federation/migrations", diff --git a/docs/generated/manifests/nx-api.json b/docs/generated/manifests/nx-api.json index 0705d48491..98146c9231 100644 --- a/docs/generated/manifests/nx-api.json +++ b/docs/generated/manifests/nx-api.json @@ -2772,7 +2772,30 @@ "name": "module-federation", "packageName": "@nx/module-federation", "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", - "documents": {}, + "documents": { + "/nx-api/module-federation/documents/nx-module-federation-plugin": { + "id": "nx-module-federation-plugin", + "name": "NxModuleFederationPlugin", + "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", + "file": "generated/packages/module-federation/documents/nx-module-federation-plugin", + "itemList": [], + "isExternal": false, + "path": "/nx-api/module-federation/documents/nx-module-federation-plugin", + "tags": [], + "originalFilePath": "shared/packages/module-federation/nx-module-federation-plugin" + }, + "/nx-api/module-federation/documents/nx-module-federation-dev-server-plugin": { + "id": "nx-module-federation-dev-server-plugin", + "name": "NxModuleFederationDevServerPlugin", + "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", + "file": "generated/packages/module-federation/documents/nx-module-federation-dev-server-plugin", + "itemList": [], + "isExternal": false, + "path": "/nx-api/module-federation/documents/nx-module-federation-dev-server-plugin", + "tags": [], + "originalFilePath": "shared/packages/module-federation/nx-module-federation-dev-server-plugin" + } + }, "root": "/packages/module-federation", "source": "/packages/module-federation/src", "executors": {}, diff --git a/docs/generated/packages-metadata.json b/docs/generated/packages-metadata.json index c77f9e3797..2bd6b28c7f 100644 --- a/docs/generated/packages-metadata.json +++ b/docs/generated/packages-metadata.json @@ -2755,7 +2755,30 @@ }, { "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", - "documents": [], + "documents": [ + { + "id": "nx-module-federation-plugin", + "name": "NxModuleFederationPlugin", + "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", + "file": "generated/packages/module-federation/documents/nx-module-federation-plugin", + "itemList": [], + "isExternal": false, + "path": "module-federation/documents/nx-module-federation-plugin", + "tags": [], + "originalFilePath": "shared/packages/module-federation/nx-module-federation-plugin" + }, + { + "id": "nx-module-federation-dev-server-plugin", + "name": "NxModuleFederationDevServerPlugin", + "description": "The Nx Plugin for Module Federation contains executors and utilities that support building applications using Module Federation.", + "file": "generated/packages/module-federation/documents/nx-module-federation-dev-server-plugin", + "itemList": [], + "isExternal": false, + "path": "module-federation/documents/nx-module-federation-dev-server-plugin", + "tags": [], + "originalFilePath": "shared/packages/module-federation/nx-module-federation-dev-server-plugin" + } + ], "executors": [], "generators": [], "migrations": [ diff --git a/docs/generated/packages/module-federation/documents/nx-module-federation-dev-server-plugin.md b/docs/generated/packages/module-federation/documents/nx-module-federation-dev-server-plugin.md new file mode 100644 index 0000000000..572d15d47f --- /dev/null +++ b/docs/generated/packages/module-federation/documents/nx-module-federation-dev-server-plugin.md @@ -0,0 +1,143 @@ +--- +title: NxModuleFederationDevServerPlugin +description: Details about the NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin +--- + +# NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin + +The `NxModuleFederationDevServerPlugin` and `NxModuleFederationSSRDevServerPlugin` are [Rspack](https://rspack.dev) 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](/concepts/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 + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +### Server Side Rendering + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationSSRDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +## How 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](/concepts/module-federation/nx-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](https://nodejs.org/api/child_process.html#child_processforkmodulepath-args-options)) the `server.js` output from the `server` bundle of the host application. + +## API Reference + +### NxModuleFederationDevServerPlugin + +```ts +export class NxModuleFederationDevServerPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + devServerConfig?: NxModuleFederationDevServerConfig; + } + ) { + this._options.devServerConfig ??= { + host: 'localhost', + }; + } +} +``` + +### NxModuleFederationSSRDevServerPlugin + +```ts +export class NxModuleFederationSSRDevServerPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + devServerConfig?: NxModuleFederationDevServerConfig; + } + ) { + this._options.devServerConfig ??= { + host: 'localhost', + }; + } +} +``` + +### NxModuleFederationDevServerConfig + +```ts +export interface NxModuleFederationDevServerConfig { + /** + * The URL hostname to use for the dev server. + */ + host?: string; + /** + * The port to use for the static remotes. + */ + staticRemotesPort?: number; + /** + * The path to the module federation manifest file when using Dynamic Module Federation. + */ + pathToManifestFile?: string; + /** + * Whether to use SSL for the remote applications. + */ + ssl?: boolean; + /** + * The path to the SSL certificate file. + */ + sslCert?: string; + /** + * The path to the SSL key file. + */ + sslKey?: string; + /** + * The number of parallel processes to use when building the static remotes. + */ + parallel?: number; + /** + * Options to proivde fine-grained control over how the dev server finds the remote applications. + */ + devRemoteFindOptions?: DevRemoteFindOptions; +} + +export interface DevRemoteFindOptions { + retries?: number; + retryDelay?: number; +} +``` diff --git a/docs/generated/packages/module-federation/documents/nx-module-federation-plugin.md b/docs/generated/packages/module-federation/documents/nx-module-federation-plugin.md new file mode 100644 index 0000000000..3b92afe97d --- /dev/null +++ b/docs/generated/packages/module-federation/documents/nx-module-federation-plugin.md @@ -0,0 +1,181 @@ +--- +title: NxModuleFederationPlugin +description: Details about the NxModuleFederationPlugin +--- + +# NxModuleFederationPlugin + +The `NxModuleFederationPlugin` is a [Rspack](https://rspack.dev) plugin that handles module federation in Nx Workspaces. It aims to provide the same Developer Experience(DX) that you would normally receive from using Nx's `withModuleFederation` function. + +## 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 + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { + NxModuleFederationPlugin, + NxModuleFederationDevServerPlugin, +} from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationPlugin({ + config, + }), + new NxModuleFederationDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +### Server Side Rendering + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { + NxModuleFederationPlugin, + NxModuleFederationSSRDevServerPlugin, +} from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationPlugin({ + config, + isServer: true, + }), + new NxModuleFederationSSRDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +## How it works + +The NxModuleFederationPlugin wraps and configures the Module Federation plugin from `@module-federation/enhanced` to provide a streamlined experience in Nx workspaces. Here's what the plugin does: + +1. **Base Configuration**: It sets up essential Rspack configurations: + + - Disables runtime chunking (`runtimeChunk: false`) + - Sets a unique name for the output + - Configures specific settings for server-side rendering when needed + +2. **Module Federation Setup**: The plugin automatically: + + - Configures the remote entry filename (`remoteEntry.js`) + - Sets up exposed modules based on your configuration + - Manages remote module connections + - Handles shared dependencies and libraries + +3. **Runtime Plugins**: It supports additional runtime plugins, including special handling for Node.js environments when running in server mode. + +4. **Shared Libraries**: The plugin includes a dedicated system for managing shared libraries across federated modules, helping to avoid duplicate code and ensure consistent versions. + +You can learn more about how Nx handles Module Federation in the [Module Federation and Nx Guide](/concepts/module-federation/module-federation-and-nx#nx-support-for-module-federation). + +## API Reference + +### NxModuleFederationPlugin + +```ts +export class NxModuleFederationPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + isServer?: boolean; + }, + private configOverride?: NxModuleFederationConfigOverride + ) {} +} +``` + +### ModuleFederationConfig + +```ts +export interface ModuleFederationConfig { + /** + * The name of the module federation application. + */ + name: string; + /** + * The remotes that the module federation application uses. + */ + remotes?: Remotes; + /** + * The library type and name the ModuleFederationPlugin uses to expose and load the federated modules. + */ + library?: ModuleFederationLibrary; + /** + * The federated modules to expose for consumption by host/consumer applications. + */ + exposes?: Record; + /** + * A function that allows you to configure shared libraries. + * This function is called for each shared library that is used by the module federation application. + * The function is passed the library name and the shared library configuration. + * If the function returns `undefined` the default shared library configuration is used. + * If the function returns `false` the shared library is not shared. + * If the function returns a shared library configuration object, that configuration is used. + */ + shared?: SharedFunction; + /** + * Additional shared libraries that are shared by the module federation application. + * This is useful when you want to share a library that is not found as part of the direct dependencies of the application found in the Nx Graph. + */ + additionalShared?: AdditionalSharedConfig; + /** + * `nxRuntimeLibraryControlPlugin` is a runtime module federation plugin to ensure + * that shared libraries are resolved from a remote with live reload capabilities. + * If you run into any issues with loading shared libraries, try disabling this option. + */ + disableNxRuntimeLibraryControlPlugin?: boolean; +} + +export type Remotes = Array; +export type ModuleFederationLibrary = { type: string; name: string }; +export type SharedFunction = ( + libraryName: string, + sharedConfig: SharedLibraryConfig +) => undefined | false | SharedLibraryConfig; +export interface SharedLibraryConfig { + singleton?: boolean; + strictVersion?: boolean; + requiredVersion?: false | string; + eager?: boolean; +} +export type AdditionalSharedConfig = Array< + | string + | [libraryName: string, sharedConfig: SharedLibraryConfig] + | { libraryName: string; sharedConfig: SharedLibraryConfig } +>; +``` + +### NxModuleFederationConfigOverride + +```ts +/** + * Used to override the options passed to the ModuleFederationPlugin. + */ +export type NxModuleFederationConfigOverride = Omit< + moduleFederationPlugin.ModuleFederationPluginOptions, + 'exposes' | 'remotes' | 'name' | 'shared' | 'filename' +>; +``` diff --git a/docs/map.json b/docs/map.json index 074ab8183a..1f5412f1b2 100644 --- a/docs/map.json +++ b/docs/map.json @@ -2833,6 +2833,25 @@ "file": "shared/packages/gradle/gradle-plugin" } ] + }, + { + "name": "Module Federation", + "id": "module-federation", + "description": "Module Federation package.", + "itemList": [ + { + "name": "NxModuleFederationPlugin", + "id": "nx-module-federation-plugin", + "path": "/nx-api/module-federation/documents/nx-module-federation-plugin", + "file": "shared/packages/module-federation/nx-module-federation-plugin" + }, + { + "name": "NxModuleFederationDevServerPlugin", + "id": "nx-module-federation-dev-server-plugin", + "path": "/nx-api/module-federation/documents/nx-module-federation-dev-server-plugin", + "file": "shared/packages/module-federation/nx-module-federation-dev-server-plugin" + } + ] } ] } diff --git a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md index bea4e86c89..e69dc350d1 100644 --- a/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md +++ b/docs/shared/concepts/module-federation/nx-module-federation-technical-overview.md @@ -5,14 +5,15 @@ description: Understand the technical details of how Nx implements Module Federa # Nx Module Federation Technical Overview -Nx's Module Federation support is provided through a mixture of `executors` and the `withModuleFederation()` util that is used in you `webpack.config` file. Understanding what is happening under the hood can help when developing applications that use Module Federation as well as debugging any potential issues you run into. +Nx's Module Federation support is provided through a mixture of `executors` and the `withModuleFederation()` util that is used in your `webpack.config` or `rspack.config` file. Understanding what is happening under the hood can help when developing applications that use Module Federation as well as debugging any potential issues you run into. +With Rspack, Module Federation support can also be provided through the [`NxModuleFederationPlugin`](nx-api/module-federation/documents/nx-module-federation-plugin) and [`NxModuleFederationDevServerPlugin`](nx-api/module-federation/documents/nx-module-federation-dev-server-plugin) plugins that can be used in the `rspack.config` file when utilizing [Inferred Tasks](). ## What happens when you serve your host? -When you serve your host application via `nx serve host`, the Nx `module-federation-dev-server` executor is invoked. This executor does a few things that aim to provide a more holistic local development while ensuring a great DX (development experience). +When you serve your host application via `nx serve host`, the Nx `module-federation-dev-server` executor or `NxModuleFederationDevServerPlugin` is invoked. These do a few things that aim to provide a more holistic local development while ensuring a great DX (development experience). {% callout type="note" title="Using Module Federation with SSR?" %} -The same technique outlined below also applies to the `module-federation-ssr-dev-server`. +The same technique outlined below also applies to the `module-federation-ssr-dev-server` and the `NxModuleFederationSSRDevServerPlugin`. This is important to know when it comes to deploying your SSR Module Federation application as it indicates that you can place the build artifacts from the `remotes` onto something like an Amazon S3 Bucket and your `host` will be able to find these files correctly. {% /callout %} diff --git a/docs/shared/packages/module-federation/nx-module-federation-dev-server-plugin.md b/docs/shared/packages/module-federation/nx-module-federation-dev-server-plugin.md new file mode 100644 index 0000000000..572d15d47f --- /dev/null +++ b/docs/shared/packages/module-federation/nx-module-federation-dev-server-plugin.md @@ -0,0 +1,143 @@ +--- +title: NxModuleFederationDevServerPlugin +description: Details about the NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin +--- + +# NxModuleFederationDevServerPlugin and NxModuleFederationSSRDevServerPlugin + +The `NxModuleFederationDevServerPlugin` and `NxModuleFederationSSRDevServerPlugin` are [Rspack](https://rspack.dev) 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](/concepts/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 + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { NxModuleFederationDevServerPlugin } from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +### Server Side Rendering + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { NxModuleFederationSSRDevServerPlugin } from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationSSRDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +## How 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](/concepts/module-federation/nx-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](https://nodejs.org/api/child_process.html#child_processforkmodulepath-args-options)) the `server.js` output from the `server` bundle of the host application. + +## API Reference + +### NxModuleFederationDevServerPlugin + +```ts +export class NxModuleFederationDevServerPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + devServerConfig?: NxModuleFederationDevServerConfig; + } + ) { + this._options.devServerConfig ??= { + host: 'localhost', + }; + } +} +``` + +### NxModuleFederationSSRDevServerPlugin + +```ts +export class NxModuleFederationSSRDevServerPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + devServerConfig?: NxModuleFederationDevServerConfig; + } + ) { + this._options.devServerConfig ??= { + host: 'localhost', + }; + } +} +``` + +### NxModuleFederationDevServerConfig + +```ts +export interface NxModuleFederationDevServerConfig { + /** + * The URL hostname to use for the dev server. + */ + host?: string; + /** + * The port to use for the static remotes. + */ + staticRemotesPort?: number; + /** + * The path to the module federation manifest file when using Dynamic Module Federation. + */ + pathToManifestFile?: string; + /** + * Whether to use SSL for the remote applications. + */ + ssl?: boolean; + /** + * The path to the SSL certificate file. + */ + sslCert?: string; + /** + * The path to the SSL key file. + */ + sslKey?: string; + /** + * The number of parallel processes to use when building the static remotes. + */ + parallel?: number; + /** + * Options to proivde fine-grained control over how the dev server finds the remote applications. + */ + devRemoteFindOptions?: DevRemoteFindOptions; +} + +export interface DevRemoteFindOptions { + retries?: number; + retryDelay?: number; +} +``` diff --git a/docs/shared/packages/module-federation/nx-module-federation-plugin.md b/docs/shared/packages/module-federation/nx-module-federation-plugin.md new file mode 100644 index 0000000000..3b92afe97d --- /dev/null +++ b/docs/shared/packages/module-federation/nx-module-federation-plugin.md @@ -0,0 +1,181 @@ +--- +title: NxModuleFederationPlugin +description: Details about the NxModuleFederationPlugin +--- + +# NxModuleFederationPlugin + +The `NxModuleFederationPlugin` is a [Rspack](https://rspack.dev) plugin that handles module federation in Nx Workspaces. It aims to provide the same Developer Experience(DX) that you would normally receive from using Nx's `withModuleFederation` function. + +## 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 + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { + NxModuleFederationPlugin, + NxModuleFederationDevServerPlugin, +} from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationPlugin({ + config, + }), + new NxModuleFederationDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +### Server Side Rendering + +{% tabs %} +{% tab label="rspack.config.ts" %} + +```ts +import { + NxModuleFederationPlugin, + NxModuleFederationSSRDevServerPlugin, +} from '@nx/module-federation/rspack'; +import config from './module-federation.config'; + +export default { + ...otherRspackConfigOptions, + plugins: [ + new NxModuleFederationPlugin({ + config, + isServer: true, + }), + new NxModuleFederationSSRDevServerPlugin({ + config, + }), + ], +}; +``` + +{% /tab %} +{% /tabs %} + +## How it works + +The NxModuleFederationPlugin wraps and configures the Module Federation plugin from `@module-federation/enhanced` to provide a streamlined experience in Nx workspaces. Here's what the plugin does: + +1. **Base Configuration**: It sets up essential Rspack configurations: + + - Disables runtime chunking (`runtimeChunk: false`) + - Sets a unique name for the output + - Configures specific settings for server-side rendering when needed + +2. **Module Federation Setup**: The plugin automatically: + + - Configures the remote entry filename (`remoteEntry.js`) + - Sets up exposed modules based on your configuration + - Manages remote module connections + - Handles shared dependencies and libraries + +3. **Runtime Plugins**: It supports additional runtime plugins, including special handling for Node.js environments when running in server mode. + +4. **Shared Libraries**: The plugin includes a dedicated system for managing shared libraries across federated modules, helping to avoid duplicate code and ensure consistent versions. + +You can learn more about how Nx handles Module Federation in the [Module Federation and Nx Guide](/concepts/module-federation/module-federation-and-nx#nx-support-for-module-federation). + +## API Reference + +### NxModuleFederationPlugin + +```ts +export class NxModuleFederationPlugin { + constructor( + private _options: { + config: ModuleFederationConfig; + isServer?: boolean; + }, + private configOverride?: NxModuleFederationConfigOverride + ) {} +} +``` + +### ModuleFederationConfig + +```ts +export interface ModuleFederationConfig { + /** + * The name of the module federation application. + */ + name: string; + /** + * The remotes that the module federation application uses. + */ + remotes?: Remotes; + /** + * The library type and name the ModuleFederationPlugin uses to expose and load the federated modules. + */ + library?: ModuleFederationLibrary; + /** + * The federated modules to expose for consumption by host/consumer applications. + */ + exposes?: Record; + /** + * A function that allows you to configure shared libraries. + * This function is called for each shared library that is used by the module federation application. + * The function is passed the library name and the shared library configuration. + * If the function returns `undefined` the default shared library configuration is used. + * If the function returns `false` the shared library is not shared. + * If the function returns a shared library configuration object, that configuration is used. + */ + shared?: SharedFunction; + /** + * Additional shared libraries that are shared by the module federation application. + * This is useful when you want to share a library that is not found as part of the direct dependencies of the application found in the Nx Graph. + */ + additionalShared?: AdditionalSharedConfig; + /** + * `nxRuntimeLibraryControlPlugin` is a runtime module federation plugin to ensure + * that shared libraries are resolved from a remote with live reload capabilities. + * If you run into any issues with loading shared libraries, try disabling this option. + */ + disableNxRuntimeLibraryControlPlugin?: boolean; +} + +export type Remotes = Array; +export type ModuleFederationLibrary = { type: string; name: string }; +export type SharedFunction = ( + libraryName: string, + sharedConfig: SharedLibraryConfig +) => undefined | false | SharedLibraryConfig; +export interface SharedLibraryConfig { + singleton?: boolean; + strictVersion?: boolean; + requiredVersion?: false | string; + eager?: boolean; +} +export type AdditionalSharedConfig = Array< + | string + | [libraryName: string, sharedConfig: SharedLibraryConfig] + | { libraryName: string; sharedConfig: SharedLibraryConfig } +>; +``` + +### NxModuleFederationConfigOverride + +```ts +/** + * Used to override the options passed to the ModuleFederationPlugin. + */ +export type NxModuleFederationConfigOverride = Omit< + moduleFederationPlugin.ModuleFederationPluginOptions, + 'exposes' | 'remotes' | 'name' | 'shared' | 'filename' +>; +``` diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index ac5644707d..98a3256747 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -516,6 +516,9 @@ - [setup-prettier](/nx-api/js/generators/setup-prettier) - [migrations](/nx-api/js/migrations) - [module-federation](/nx-api/module-federation) + - [documents](/nx-api/module-federation/documents) + - [NxModuleFederationPlugin](/nx-api/module-federation/documents/nx-module-federation-plugin) + - [NxModuleFederationDevServerPlugin](/nx-api/module-federation/documents/nx-module-federation-dev-server-plugin) - [migrations](/nx-api/module-federation/migrations) - [nest](/nx-api/nest) - [documents](/nx-api/nest/documents)