fix(nx-dev): fix rebase
This commit is contained in:
parent
3105203248
commit
e05ca1fd2f
@ -1130,6 +1130,14 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Applications and Libraries",
|
||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||
@ -1358,6 +1366,14 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Applications and Libraries",
|
||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||
@ -1529,6 +1545,14 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Applications and Libraries",
|
||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||
|
||||
@ -1403,6 +1403,21 @@
|
||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"tags": [
|
||||
"use-task-executors",
|
||||
"module-federation",
|
||||
"angular",
|
||||
"react"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "applications-and-libraries",
|
||||
"name": "Applications and Libraries",
|
||||
@ -1689,6 +1704,16 @@
|
||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"tags": ["use-task-executors", "module-federation", "angular", "react"]
|
||||
},
|
||||
{
|
||||
"id": "applications-and-libraries",
|
||||
"name": "Applications and Libraries",
|
||||
@ -1904,6 +1929,16 @@
|
||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
||||
"tags": []
|
||||
},
|
||||
"/concepts/more-concepts/faster-builds-with-module-federation": {
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation",
|
||||
"tags": ["use-task-executors", "module-federation", "angular", "react"]
|
||||
},
|
||||
"/concepts/more-concepts/applications-and-libraries": {
|
||||
"id": "applications-and-libraries",
|
||||
"name": "Applications and Libraries",
|
||||
|
||||
@ -436,6 +436,13 @@
|
||||
"name": "Incremental Builds",
|
||||
"path": "/concepts/more-concepts/incremental-builds"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
@ -648,6 +655,75 @@
|
||||
"path": "/extending-nx/recipes/project-inference-plugins"
|
||||
}
|
||||
],
|
||||
"module-federation": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for React",
|
||||
"path": "/recipes/react/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for Angular",
|
||||
"path": "/recipes/angular/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/dynamic-mfe-angular",
|
||||
"id": "dynamic-module-federation-with-angular",
|
||||
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
|
||||
"path": "/recipes/angular/dynamic-module-federation-with-angular"
|
||||
}
|
||||
],
|
||||
"angular": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for Angular",
|
||||
"path": "/recipes/angular/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/dynamic-mfe-angular",
|
||||
"id": "dynamic-module-federation-with-angular",
|
||||
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
|
||||
"path": "/recipes/angular/dynamic-module-federation-with-angular"
|
||||
}
|
||||
],
|
||||
"react": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/faster-builds",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"path": "/concepts/more-concepts/faster-builds-with-module-federation"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for React",
|
||||
"path": "/recipes/react/module-federation-with-ssr"
|
||||
}
|
||||
],
|
||||
"environment-variables": [
|
||||
{
|
||||
"description": "",
|
||||
@ -685,54 +761,6 @@
|
||||
"path": "/reference/environment-variables"
|
||||
}
|
||||
],
|
||||
"module-federation": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for React",
|
||||
"path": "/recipes/react/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for Angular",
|
||||
"path": "/recipes/angular/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/dynamic-mfe-angular",
|
||||
"id": "dynamic-module-federation-with-angular",
|
||||
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
|
||||
"path": "/recipes/angular/dynamic-module-federation-with-angular"
|
||||
}
|
||||
],
|
||||
"react": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for React",
|
||||
"path": "/recipes/react/module-federation-with-ssr"
|
||||
}
|
||||
],
|
||||
"angular": [
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/recipes/module-federation-with-ssr",
|
||||
"id": "module-federation-with-ssr",
|
||||
"name": "Setup Module Federation with SSR for Angular",
|
||||
"path": "/recipes/angular/module-federation-with-ssr"
|
||||
},
|
||||
{
|
||||
"description": "",
|
||||
"file": "shared/guides/module-federation/dynamic-mfe-angular",
|
||||
"id": "dynamic-module-federation-with-angular",
|
||||
"name": "Advanced Micro Frontends with Angular using Dynamic Federation",
|
||||
"path": "/recipes/angular/dynamic-module-federation-with-angular"
|
||||
}
|
||||
],
|
||||
"deployment": [
|
||||
{
|
||||
"description": "",
|
||||
|
||||
@ -93,6 +93,6 @@ nx g @nx/angular:service my-service
|
||||
|
||||
- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)
|
||||
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
||||
- [Setup Module Federation with Angular and Nx](/more-concepts/faster-builds-with-module-federation)
|
||||
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation)
|
||||
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
||||
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
||||
|
||||
@ -157,7 +157,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
|
||||
|
||||
### Configure webpack for Module Federation
|
||||
|
||||
If you use the [Module Federation](/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
|
||||
If you use the [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
|
||||
you can customize your webpack configuration as follows.
|
||||
|
||||
```js {% fileName="apps/my-app/webpack.config.js" %}
|
||||
|
||||
@ -165,7 +165,7 @@ module.exports = composePlugins(
|
||||
The `withModuleFederation` and `withModuleFederationForSSR` plugins add module federation support to the webpack build. These plugins use
|
||||
[`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx.
|
||||
|
||||
For more information, refer to the [Module Federation recipe](/more-concepts/faster-builds-with-module-federation).
|
||||
For more information, refer to the [Module Federation recipe](/concepts/more-concepts/faster-builds-with-module-federation).
|
||||
|
||||
### Options
|
||||
|
||||
|
||||
@ -454,6 +454,17 @@
|
||||
"id": "micro-frontend-architecture",
|
||||
"file": "shared/guides/module-federation/micro-frontend-architecture"
|
||||
},
|
||||
{
|
||||
"name": "Faster Builds with Module Federation",
|
||||
"id": "faster-builds-with-module-federation",
|
||||
"tags": [
|
||||
"use-task-executors",
|
||||
"module-federation",
|
||||
"angular",
|
||||
"react"
|
||||
],
|
||||
"file": "shared/guides/module-federation/faster-builds"
|
||||
},
|
||||
{
|
||||
"name": "Applications and Libraries",
|
||||
"id": "applications-and-libraries",
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
# Micro Frontend Architecture
|
||||
|
||||
Since version 14, Nx provides out-of-the-box [Module Federation](/more-concepts/faster-builds-with-module-federation) support to both React
|
||||
Since version 14, Nx provides out-of-the-box [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support to both React
|
||||
and Angular. The Micro Frontend (MFE) architecture builds on top of Module Federation by providing _independent deployability_.
|
||||
|
||||
If you have not read the [Module Federation guide](/more-concepts/faster-builds-with-module-federation) yet, we recommend that you read it
|
||||
If you have not read the [Module Federation guide](/concepts/more-concepts/faster-builds-with-module-federation) yet, we recommend that you read it
|
||||
before continuing with this MFE guide.
|
||||
|
||||
## When should I use micro frontend architecture?
|
||||
@ -17,7 +17,7 @@ of MFEs and decide whether it makes sense for your own teams.
|
||||
logic that breaks compatibility with remotes.
|
||||
|
||||
If you are looking at optimizing builds and do not need independent deployments, we recommend reading our guide on
|
||||
[Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation).
|
||||
[Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation).
|
||||
|
||||
If you need to use MFEs, keep reading, and we'll examine the architecture and strategies to deal with shared libraries and
|
||||
deployments.
|
||||
@ -29,7 +29,7 @@ With MFE architecture, a large application is split into:
|
||||
1. A single **Host** application that references external...
|
||||
2. **Remote** applications, which handle a single domain or feature.
|
||||
|
||||
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/more-concepts/faster-builds-with-module-federation#architectural-overview)
|
||||
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/concepts/more-concepts/faster-builds-with-module-federation#architectural-overview)
|
||||
from the host application to remote applications. However, in an MFE architecture you _do not_ want these dependencies
|
||||
to exist between host and remotes.
|
||||
|
||||
|
||||
@ -100,4 +100,4 @@ But there are other ways to make the build process incremental. One of them is u
|
||||
|
||||
When using WebPack Module Federation, you split the application into multiple webpack builds. Imagine the application has 3 big sections, and they are built using 3 webpack builds: `W1`, `W2`, and `W3`. Each of them has to build shared code in addition to building the corresponding application section code. So the time it takes to build all of them (`W1` + `W2` + `W3`) will be greater than `W`. However, if you change only Section 1, you will only need to run `W1`. `W2` and `W3` will be retrieved from cache. In addition, `W1`, `W2`, and `W3` can run on separate machines. Because of that, both the CI time and the local serve time can be drastically reduced.
|
||||
|
||||
Learn more: [Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation)
|
||||
Learn more: [Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation)
|
||||
|
||||
@ -93,6 +93,6 @@ nx g @nx/angular:service my-service
|
||||
|
||||
- [Angular Nx Tutorial](/angular-tutorial/1-code-generation)
|
||||
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
||||
- [Setup Module Federation with Angular and Nx](/more-concepts/faster-builds-with-module-federation)
|
||||
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation)
|
||||
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
||||
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
||||
|
||||
@ -157,7 +157,7 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
|
||||
|
||||
### Configure webpack for Module Federation
|
||||
|
||||
If you use the [Module Federation](/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
|
||||
If you use the [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
|
||||
you can customize your webpack configuration as follows.
|
||||
|
||||
```js {% fileName="apps/my-app/webpack.config.js" %}
|
||||
|
||||
@ -165,7 +165,7 @@ module.exports = composePlugins(
|
||||
The `withModuleFederation` and `withModuleFederationForSSR` plugins add module federation support to the webpack build. These plugins use
|
||||
[`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx.
|
||||
|
||||
For more information, refer to the [Module Federation recipe](/more-concepts/faster-builds-with-module-federation).
|
||||
For more information, refer to the [Module Federation recipe](/concepts/more-concepts/faster-builds-with-module-federation).
|
||||
|
||||
### Options
|
||||
|
||||
|
||||
@ -133,5 +133,5 @@ To serve the `store` application and watch for changes on the `checkout` applica
|
||||
|
||||
To learn more about Module Federation, we have some resources you might find useful:
|
||||
|
||||
- [Guide: Faster Builds with Module Federation](/more-concepts/faster-builds-with-module-federation)
|
||||
- [Guide: Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation)
|
||||
- [Video: Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc)
|
||||
|
||||
@ -81,6 +81,7 @@
|
||||
- [Folder Structure](/concepts/more-concepts/folder-structure)
|
||||
- [Nx Devkit and Angular Devkit](/concepts/more-concepts/nx-devkit-angular-devkit)
|
||||
- [Micro Frontend Architecture](/concepts/more-concepts/micro-frontend-architecture)
|
||||
- [Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation)
|
||||
- [Applications and Libraries](/concepts/more-concepts/applications-and-libraries)
|
||||
- [Creating Libraries](/concepts/more-concepts/creating-libraries)
|
||||
- [Library Types](/concepts/more-concepts/library-types)
|
||||
|
||||
@ -824,7 +824,7 @@ const latestRecipesRefactoring = {
|
||||
|
||||
// nx concepts
|
||||
'/recipes/module-federation/faster-builds':
|
||||
'/more-concepts/faster-builds-with-module-federation',
|
||||
'/concepts/more-concepts/faster-builds-with-module-federation',
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -63,7 +63,7 @@ function getModuleFederationConfig(
|
||||
return config.default || config;
|
||||
} catch {
|
||||
throw new Error(
|
||||
`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/more-concepts/faster-builds-with-module-federation`
|
||||
`Could not load ${moduleFederationConfigPath}. Was this project generated with "@nx/react:host"?\nSee: https://nx.dev/concepts/more-concepts/faster-builds-with-module-federation`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user