-
Notifications
You must be signed in to change notification settings - Fork 367
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/refactor-generator-logger
- Loading branch information
Showing
15 changed files
with
791 additions
and
0 deletions.
There are no files selected for viewing
6 changes: 6 additions & 0 deletions
6
packages/document/main-doc/docs/en/guides/topic-detail/_meta.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
packages/document/main-doc/docs/en/guides/topic-detail/module-federation/_meta.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
["introduce", "usage", "application", "ssr", "deploy"] |
112 changes: 112 additions & 0 deletions
112
...document/main-doc/docs/en/guides/topic-detail/module-federation/application.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
# Application-Level Modules | ||
|
||
Modern.js provides runtime APIs to quickly export application-level Module Federation modules from your application. | ||
|
||
We use the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage) as an example to further explain how to import application-level modules. | ||
|
||
## Install Dependencies | ||
|
||
Building on the existing application, we need to install the `@module-federation/bridge-react` dependency to use Bridge for loading application-level modules. | ||
|
||
import { PackageManagerTabs } from '@theme'; | ||
|
||
<PackageManagerTabs command="add @module-federation/bridge-react" /> | ||
|
||
## Exporting Modules from Producer | ||
|
||
Unlike directly exporting component-level modules, we need to create a separate entry for application-level modules to be exported via `Module Federation`. | ||
|
||
We create the `src/export-App.tsx` file: | ||
|
||
:::note | ||
The filename can be arbitrary; Modern.js does not enforce a specific naming convention. | ||
::: | ||
|
||
```ts title="src/export-App.tsx" | ||
import '@modern-js/runtime/registry/main'; // This line must be included, it will import micro frontend runtime dependencies by default | ||
import { render } from '@modern-js/runtime/browser'; | ||
import { createRoot } from '@modern-js/runtime/react'; | ||
import { createBridgeComponent } from '@module-federation/bridge-react'; | ||
|
||
const ModernRoot = createRoot(); | ||
export const provider = createBridgeComponent({ | ||
rootComponent: ModernRoot, | ||
render: (Component, dom) => render(Component, dom), | ||
}); | ||
|
||
export default provider; | ||
``` | ||
|
||
This file will pass the root component of the `main` entry application to the Bridge API and render it to the specified node via Bridge's render function. | ||
|
||
Next, we configure `module-federation.config.ts` to modify the export to `src/export-App.tsx`: | ||
|
||
```ts title="module-federation.config.ts" | ||
import { createModuleFederationConfig } from '@module-federation/modern-js'; | ||
|
||
export default createModuleFederationConfig({ | ||
name: 'remote', | ||
filename: 'remoteEntry.js', | ||
exposes: { | ||
'./app': './src/export-App.tsx', | ||
}, | ||
shared: { | ||
react: { singleton: true }, | ||
'react-dom': { singleton: true }, | ||
}, | ||
}); | ||
``` | ||
|
||
:::info | ||
[`createBridgeComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createbridgecomponent) is used to export application-level modules. Modern.js related APIs can be found at [createRoot](/apis/app/runtime/core/create-root) and [render](/apis/app/runtime/core/render). | ||
::: | ||
|
||
## Using Modules in Consumer | ||
|
||
We then modify the consumer configuration by removing the previously created `src/routes/remote/page.tsx` route file. | ||
|
||
We want all routes that access `/remote` to enter the aforementioned application-level module, so we add `src/routes/remote/$.tsx` instead. | ||
|
||
:::note | ||
If you are not familiar with the capabilities of `$.tsx`, please read [Wildcard Routes](/guides/basic-features/routes.html#通配路由). | ||
::: | ||
|
||
```tsx title="src/routes/remote/$.tsx" | ||
import { createRemoteComponent } from '@module-federation/bridge-react'; | ||
import { loadRemote } from '@module-federation/modern-js/runtime'; | ||
|
||
const ErrorBoundary = (info?: { error: { message: string } }) => { | ||
return ( | ||
<div> | ||
<h2>This is ErrorBoundary Component, Something went wrong:</h2> | ||
<pre style={{ color: 'red' }}>{info?.error.message}</pre> | ||
</div> | ||
); | ||
}; | ||
const Loading = <div>loading...</div>; | ||
const RemoteApp = createRemoteComponent({ | ||
loader: () => loadRemote('remote/app'), | ||
fallback: ErrorBoundary, | ||
loading: Loading, | ||
}); | ||
|
||
export default RemoteApp; | ||
``` | ||
|
||
:::info | ||
[`createRemoteComponent`](https://module-federation.io/zh/practice/bridge/react-bridge.html#createremotecomponent) is used to load application-level modules. | ||
::: | ||
|
||
## Start the Application | ||
|
||
Now, both the producer and consumer applications are set up. We can run `modern dev` locally to start both applications. | ||
|
||
After startup, when the consumer application accesses the `/remote` route, it will enter the producer application. Accessing `http://localhost:8080/remote` will display a complete page of the producer's remote module in the browser. | ||
|
||
You can create new route files in the producer application and add route navigation in the code. These functionalities will also work as expected. | ||
|
||
You can refer to the example here: [Modern.js & Module Federation Application-Level Modules](https://github.com/web-infra-dev/modern-js-examples/tree/main/examples/module-federation/app-export). | ||
|
||
## Related Documentation | ||
|
||
- [Module Federation Bridge](https://module-federation.io/zh/practice/bridge/index.html) |
28 changes: 28 additions & 0 deletions
28
...ages/document/main-doc/docs/en/guides/topic-detail/module-federation/deploy.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# Deployment | ||
|
||
Typically, deploying a Module Federation application requires adjusting the remote module address on the consumer side to its online address. | ||
|
||
For example, if the producer is deployed to the domain `https://my-remote-module`, you can modify the consumer's `module-federation.config.ts` file as follows: | ||
|
||
```ts title="module-federation.config.ts" | ||
import { createModuleFederationConfig } from '@module-federation/modern-js'; | ||
|
||
export default createModuleFederationConfig({ | ||
name: 'host', | ||
remotes: { | ||
remote: 'remote@http://my-remote-module/mf-manifest.json', | ||
}, | ||
shared: { | ||
react: { singleton: true }, | ||
'react-dom': { singleton: true }, | ||
}, | ||
}); | ||
``` | ||
|
||
At this point, the consumer will load the `manifest` configuration file of the `remote` module in the production environment. | ||
|
||
## Deployment via Platform | ||
|
||
The above deployment method is merely the simplest practice. In real-world scenarios, there are many constraints, such as version management, release sequencing, and more. Within ByteDance, we have set up a deployment process for Module Federation applications on our deployment platform, which helps developers address these issues. | ||
|
||
We will continue to keep an eye on platforms with similar functionalities in the community and, in the future, enhance the documentation for deploying Modern.js + Module Federation on these types of platforms. |
35 changes: 35 additions & 0 deletions
35
...s/document/main-doc/docs/en/guides/topic-detail/module-federation/introduce.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# Introduction | ||
|
||
Module Federation is an architectural pattern for dividing JavaScript applications, allowing you to share code and resources among multiple JavaScript applications. | ||
|
||
In this divided model, it can help improve application performance, enhance code maintainability, and more. | ||
|
||
## Module Federation 2.0 | ||
|
||
Module Federation, a highlight feature introduced with Webpack 5, has been around for more than three years. This year, ByteDance, along with the author of Module Federation, [@Zack Jackson](https://github.com/ScriptedAlchemy), and community members jointly launched **Module Federation 2.0**. | ||
|
||
Module Federation 2.0 is based on internal practices at ByteDance and the existing community ecosystem of Module Federation, addressing many issues in the previous version. | ||
|
||
Within ByteDance, frameworks based on Modern.js have already deeply integrated with Module Federation 2.0. We are gradually integrating these features into Modern.js and hope to explore the future together with community developers. | ||
|
||
:::info | ||
Refer to [Module Federation 2.0 Announcement](https://module-federation.io/zh/blog/announcement.html) for more related content. | ||
::: | ||
|
||
## Modern.js MF Plugin | ||
|
||
Based on internal practices at ByteDance, the Module Federation team officially provides the [Modern.js Plugin](https://www.npmjs.com/package/@module-federation/modern-js) to help developers use Module Federation more easily. | ||
|
||
The plugin recognizes the current build engine (Webpack or Rspack), injects the corresponding Module Federation plugin into Modern.js applications, and automatically handles build configurations and adds runtime code. | ||
|
||
Moreover, the plugin also supports the use of Module Federation in Modern.js SSR applications, providing a better performance experience. | ||
|
||
For more details, refer to [Using Module Federation](/guides/topic-detail/module-federation/usage) and [Module Federation Server-Side Rendering](/guides/topic-detail/module-federation/ssr). | ||
|
||
## Application-Level Modules | ||
|
||
**Application-level modules** possess the application's framework rendering capabilities and routing capabilities, allowing them to operate like applications. Application-level modules are a crucial capability in **micro-frontend frameworks**, providing the ability to load and render across application frameworks (React, Vue) and supporting the loading of modules with routing. | ||
|
||
Module Federation 2.0 offers the [Bridge](https://module-federation.io/zh/practice/bridge/index.html) capability to load application-level modules. | ||
|
||
Modern.js, based on Bridge and its internal implementation, provides APIs to easily export application-level modules. For more details, refer to [Application-Level Modules](/guides/topic-detail/module-federation/application). |
31 changes: 31 additions & 0 deletions
31
packages/document/main-doc/docs/en/guides/topic-detail/module-federation/ssr.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
# Server-Side Rendering | ||
|
||
`@module-federation/modern-js` offers powerful capabilities, enabling developers to easily combine Module Federation with server-side rendering (SSR) in Modern.js applications. | ||
|
||
## Enable SSR | ||
|
||
Using the application created in [Using Module Federation](/guides/topic-detail/module-federation/usage) as an example, you only need to add the `server.ssr` configuration to both the producer and the consumer: | ||
|
||
```ts title="modern.config.ts" | ||
import { appTools, defineConfig } from '@modern-js/app-tools'; | ||
|
||
export default defineConfig({ | ||
server: { | ||
ssr: { | ||
mode: 'stream', | ||
}, | ||
}, | ||
}); | ||
``` | ||
|
||
For better performance, we only support using this capability combination in Streaming SSR scenarios. | ||
|
||
:::warning | ||
Currently, `@module-federation/bridge-react` is not compatible with the Node environment. You must remove it from the dependencies to use Module Federation and server-side rendering correctly. This means Bridge cannot work with server-side rendering. | ||
::: | ||
|
||
## Data Fetching | ||
|
||
:::note | ||
Stay tuned | ||
::: |
Oops, something went wrong.