docs(module-federation): add documentation on NxModuleFederationPlugin (#30518)
## Current Behavior The `NxModuleFederationPlugin` and `NxModuleFederationDevServerPlugin` are currently undocumented on `nx.dev`. ## Expected Behavior Add documentation for the two plugins including what they do, how to use them and an API Reference
This commit is contained in:
parent
9669dfdb62
commit
9a7a4764bf
@ -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",
|
||||
|
||||
@ -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": {},
|
||||
|
||||
@ -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": [
|
||||
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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<string, string>;
|
||||
/**
|
||||
* 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<string | [remoteName: string, remoteUrl: string]>;
|
||||
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'
|
||||
>;
|
||||
```
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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 %}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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<string, string>;
|
||||
/**
|
||||
* 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<string | [remoteName: string, remoteUrl: string]>;
|
||||
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'
|
||||
>;
|
||||
```
|
||||
@ -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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user