docs(misc): add module-federeation concepts section (#19684)
This commit is contained in:
parent
0b0df51263
commit
0c4889b328
@ -809,6 +809,31 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Module Federation",
|
||||||
|
"path": "/concepts/module-federation",
|
||||||
|
"id": "module-federation",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Faster Builds with Module Federation",
|
||||||
|
"path": "/concepts/module-federation/faster-builds-with-module-federation",
|
||||||
|
"id": "faster-builds-with-module-federation",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "More Concepts",
|
"name": "More Concepts",
|
||||||
"path": "/concepts/more-concepts",
|
"path": "/concepts/more-concepts",
|
||||||
@ -911,22 +936,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"isExternal": false,
|
|
||||||
"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",
|
"name": "Applications and Libraries",
|
||||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||||
@ -1053,6 +1062,47 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Module Federation",
|
||||||
|
"path": "/concepts/module-federation",
|
||||||
|
"id": "module-federation",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Faster Builds with Module Federation",
|
||||||
|
"path": "/concepts/module-federation/faster-builds-with-module-federation",
|
||||||
|
"id": "faster-builds-with-module-federation",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Faster Builds with Module Federation",
|
||||||
|
"path": "/concepts/module-federation/faster-builds-with-module-federation",
|
||||||
|
"id": "faster-builds-with-module-federation",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"isExternal": false,
|
||||||
|
"children": [],
|
||||||
|
"disableCollapsible": false
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "More Concepts",
|
"name": "More Concepts",
|
||||||
"path": "/concepts/more-concepts",
|
"path": "/concepts/more-concepts",
|
||||||
@ -1155,22 +1205,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"isExternal": false,
|
|
||||||
"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",
|
"name": "Applications and Libraries",
|
||||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||||
@ -1334,22 +1368,6 @@
|
|||||||
"children": [],
|
"children": [],
|
||||||
"disableCollapsible": false
|
"disableCollapsible": false
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"path": "/concepts/more-concepts/micro-frontend-architecture",
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"isExternal": false,
|
|
||||||
"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",
|
"name": "Applications and Libraries",
|
||||||
"path": "/concepts/more-concepts/applications-and-libraries",
|
"path": "/concepts/more-concepts/applications-and-libraries",
|
||||||
|
|||||||
@ -1004,6 +1004,42 @@
|
|||||||
"path": "/concepts/affected",
|
"path": "/concepts/affected",
|
||||||
"tags": ["run-tasks"]
|
"tags": ["run-tasks"]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"id": "module-federation",
|
||||||
|
"name": "Module Federation",
|
||||||
|
"description": "Understand more about Module Federation with NX",
|
||||||
|
"file": "",
|
||||||
|
"itemList": [
|
||||||
|
{
|
||||||
|
"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/module-federation/faster-builds-with-module-federation",
|
||||||
|
"tags": [
|
||||||
|
"use-task-executors",
|
||||||
|
"module-federation",
|
||||||
|
"angular",
|
||||||
|
"react"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"tags": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/concepts/module-federation",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"id": "more-concepts",
|
"id": "more-concepts",
|
||||||
"name": "More Concepts",
|
"name": "More Concepts",
|
||||||
@ -1130,31 +1166,6 @@
|
|||||||
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
||||||
"tags": ["create-your-own-plugin"]
|
"tags": ["create-your-own-plugin"]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
|
||||||
"itemList": [],
|
|
||||||
"isExternal": false,
|
|
||||||
"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",
|
"id": "applications-and-libraries",
|
||||||
"name": "Applications and Libraries",
|
"name": "Applications and Libraries",
|
||||||
@ -1315,6 +1326,57 @@
|
|||||||
"path": "/concepts/affected",
|
"path": "/concepts/affected",
|
||||||
"tags": ["run-tasks"]
|
"tags": ["run-tasks"]
|
||||||
},
|
},
|
||||||
|
"/concepts/module-federation": {
|
||||||
|
"id": "module-federation",
|
||||||
|
"name": "Module Federation",
|
||||||
|
"description": "Understand more about Module Federation with NX",
|
||||||
|
"file": "",
|
||||||
|
"itemList": [
|
||||||
|
{
|
||||||
|
"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/module-federation/faster-builds-with-module-federation",
|
||||||
|
"tags": ["use-task-executors", "module-federation", "angular", "react"]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"tags": []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/concepts/module-federation",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
|
"/concepts/module-federation/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/module-federation/faster-builds-with-module-federation",
|
||||||
|
"tags": ["use-task-executors", "module-federation", "angular", "react"]
|
||||||
|
},
|
||||||
|
"/concepts/module-federation/micro-frontend-architecture": {
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"name": "Micro Frontend Architecture",
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
||||||
|
"itemList": [],
|
||||||
|
"isExternal": false,
|
||||||
|
"path": "/concepts/module-federation/micro-frontend-architecture",
|
||||||
|
"tags": []
|
||||||
|
},
|
||||||
"/concepts/more-concepts": {
|
"/concepts/more-concepts": {
|
||||||
"id": "more-concepts",
|
"id": "more-concepts",
|
||||||
"name": "More Concepts",
|
"name": "More Concepts",
|
||||||
@ -1441,26 +1503,6 @@
|
|||||||
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
||||||
"tags": ["create-your-own-plugin"]
|
"tags": ["create-your-own-plugin"]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
|
||||||
"itemList": [],
|
|
||||||
"isExternal": false,
|
|
||||||
"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",
|
"id": "applications-and-libraries",
|
||||||
"name": "Applications and Libraries",
|
"name": "Applications and Libraries",
|
||||||
@ -1666,26 +1708,6 @@
|
|||||||
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
"path": "/concepts/more-concepts/nx-devkit-angular-devkit",
|
||||||
"tags": ["create-your-own-plugin"]
|
"tags": ["create-your-own-plugin"]
|
||||||
},
|
},
|
||||||
"/concepts/more-concepts/micro-frontend-architecture": {
|
|
||||||
"id": "micro-frontend-architecture",
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"description": "",
|
|
||||||
"file": "shared/guides/module-federation/micro-frontend-architecture",
|
|
||||||
"itemList": [],
|
|
||||||
"isExternal": false,
|
|
||||||
"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": {
|
"/concepts/more-concepts/applications-and-libraries": {
|
||||||
"id": "applications-and-libraries",
|
"id": "applications-and-libraries",
|
||||||
"name": "Applications and Libraries",
|
"name": "Applications and Libraries",
|
||||||
|
|||||||
@ -429,6 +429,13 @@
|
|||||||
"name": "Task Pipeline Configuration",
|
"name": "Task Pipeline Configuration",
|
||||||
"path": "/concepts/task-pipeline-configuration"
|
"path": "/concepts/task-pipeline-configuration"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/guides/module-federation/faster-builds",
|
||||||
|
"id": "faster-builds-with-module-federation",
|
||||||
|
"name": "Faster Builds with Module Federation",
|
||||||
|
"path": "/concepts/module-federation/faster-builds-with-module-federation"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"description": "",
|
"description": "",
|
||||||
"file": "shared/incremental-builds",
|
"file": "shared/incremental-builds",
|
||||||
@ -436,13 +443,6 @@
|
|||||||
"name": "Incremental Builds",
|
"name": "Incremental Builds",
|
||||||
"path": "/concepts/more-concepts/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": "",
|
"description": "",
|
||||||
"file": "shared/recipes/module-federation-with-ssr",
|
"file": "shared/recipes/module-federation-with-ssr",
|
||||||
@ -632,6 +632,75 @@
|
|||||||
"path": "/recipes/tips-n-tricks/standalone-to-integrated"
|
"path": "/recipes/tips-n-tricks/standalone-to-integrated"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"module-federation": [
|
||||||
|
{
|
||||||
|
"description": "",
|
||||||
|
"file": "shared/guides/module-federation/faster-builds",
|
||||||
|
"id": "faster-builds-with-module-federation",
|
||||||
|
"name": "Faster Builds with Module Federation",
|
||||||
|
"path": "/concepts/module-federation/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/module-federation/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/module-federation/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"
|
||||||
|
}
|
||||||
|
],
|
||||||
"create-your-own-plugin": [
|
"create-your-own-plugin": [
|
||||||
{
|
{
|
||||||
"description": "",
|
"description": "",
|
||||||
@ -669,75 +738,6 @@
|
|||||||
"path": "/extending-nx/recipes/project-graph-plugins"
|
"path": "/extending-nx/recipes/project-graph-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": [
|
"environment-variables": [
|
||||||
{
|
{
|
||||||
"description": "",
|
"description": "",
|
||||||
|
|||||||
@ -18,7 +18,9 @@ more [here](/recipes/angular/migration/angular).
|
|||||||
## Setting up the Angular plugin
|
## Setting up the Angular plugin
|
||||||
|
|
||||||
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
||||||
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version
|
||||||
|
numbers get out of sync, you can encounter some difficult to debug errors. You
|
||||||
|
can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
||||||
{% /callout %}
|
{% /callout %}
|
||||||
|
|
||||||
Adding the Angular plugin to an existing Nx workspace can be done with the following:
|
Adding the Angular plugin to an existing Nx workspace can be done with the following:
|
||||||
@ -97,6 +99,6 @@ nx g @nx/angular:service my-service
|
|||||||
|
|
||||||
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||||
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
||||||
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation)
|
- [Setup Module Federation with Angular and Nx](/concepts/module-federation/faster-builds-with-module-federation)
|
||||||
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
||||||
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
||||||
|
|||||||
@ -307,6 +307,29 @@
|
|||||||
"id": "affected",
|
"id": "affected",
|
||||||
"file": "shared/using-nx/affected"
|
"file": "shared/using-nx/affected"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Module Federation",
|
||||||
|
"id": "module-federation",
|
||||||
|
"description": "Understand more about Module Federation with NX",
|
||||||
|
"itemList": [
|
||||||
|
{
|
||||||
|
"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": "Micro Frontend Architecture",
|
||||||
|
"id": "micro-frontend-architecture",
|
||||||
|
"file": "shared/guides/module-federation/micro-frontend-architecture"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "More Concepts",
|
"name": "More Concepts",
|
||||||
"id": "more-concepts",
|
"id": "more-concepts",
|
||||||
@ -377,22 +400,6 @@
|
|||||||
"tags": ["create-your-own-plugin"],
|
"tags": ["create-your-own-plugin"],
|
||||||
"file": "shared/guides/nx-devkit-angular-devkit"
|
"file": "shared/guides/nx-devkit-angular-devkit"
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"name": "Micro Frontend Architecture",
|
|
||||||
"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",
|
"name": "Applications and Libraries",
|
||||||
"id": "applications-and-libraries",
|
"id": "applications-and-libraries",
|
||||||
|
|||||||
@ -440,7 +440,8 @@ first before building the remotes.
|
|||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
You could use Module Federation to implement [micro frontends](/concepts/more-concepts/micro-frontend-architecture), but this
|
You could use Module Federation to implement [micro frontends](/concepts/module-federation/micro-frontend-architecture),
|
||||||
|
but this
|
||||||
guide showed how to use it to speed up your builds.
|
guide showed how to use it to speed up your builds.
|
||||||
|
|
||||||
Module Federation allows you to split a single build process into multiple processes which can run in parallel or even
|
Module Federation allows you to split a single build process into multiple processes which can run in parallel or even
|
||||||
|
|||||||
@ -1,9 +1,13 @@
|
|||||||
# Micro Frontend Architecture
|
# Micro Frontend Architecture
|
||||||
|
|
||||||
Since version 14, Nx provides out-of-the-box [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support to both React
|
Since version 14, Nx provides
|
||||||
and Angular. The Micro Frontend (MFE) architecture builds on top of Module Federation by providing _independent deployability_.
|
out-of-the-box [Module Federation](/concepts/module-federation/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](/concepts/more-concepts/faster-builds-with-module-federation) yet, we recommend that you read it
|
If you have not read the [Module Federation guide](/concepts/module-federation/faster-builds-with-module-federation)
|
||||||
|
yet, we recommend that you read it
|
||||||
before continuing with this MFE guide.
|
before continuing with this MFE guide.
|
||||||
|
|
||||||
## When should I use micro frontend architecture?
|
## When should I use micro frontend architecture?
|
||||||
@ -17,9 +21,10 @@ of MFEs and decide whether it makes sense for your own teams.
|
|||||||
logic that breaks compatibility with remotes.
|
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
|
If you are looking at optimizing builds and do not need independent deployments, we recommend reading our guide on
|
||||||
[Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation).
|
[Faster Builds with Module Federation](/concepts/module-federation/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
|
If you need to use MFEs, keep reading, and we'll examine the architecture and strategies to deal with shared libraries
|
||||||
|
and
|
||||||
deployments.
|
deployments.
|
||||||
|
|
||||||
## Architectural overview
|
## Architectural overview
|
||||||
@ -29,7 +34,8 @@ With MFE architecture, a large application is split into:
|
|||||||
1. A single **Host** application that references external...
|
1. A single **Host** application that references external...
|
||||||
2. **Remote** applications, which handle a single domain or feature.
|
2. **Remote** applications, which handle a single domain or feature.
|
||||||
|
|
||||||
In a normal Module Federation setup, we [recommend setting up implicit dependencies](/concepts/more-concepts/faster-builds-with-module-federation#architectural-overview)
|
In a normal Module Federation setup,
|
||||||
|
we [recommend setting up implicit dependencies](/concepts/module-federation/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
|
from the host application to remote applications. However, in an MFE architecture you _do not_ want these dependencies
|
||||||
to exist between host and remotes.
|
to exist between host and remotes.
|
||||||
|
|
||||||
|
|||||||
@ -27,7 +27,8 @@ On the other hand, the executor of a **buildable library**, performs a subset of
|
|||||||
nx g @nx/react:lib mylib --buildable
|
nx g @nx/react:lib mylib --buildable
|
||||||
```
|
```
|
||||||
|
|
||||||
Read more about [Publishable and Buildable Nx Libraries here.](/concepts/more-concepts/buildable-and-publishable-libraries)
|
Read more
|
||||||
|
about [Publishable and Buildable Nx Libraries here.](/concepts/more-concepts/buildable-and-publishable-libraries)
|
||||||
|
|
||||||
## Nx computation cache and Nx Cloud
|
## Nx computation cache and Nx Cloud
|
||||||
|
|
||||||
@ -78,7 +79,7 @@ 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.
|
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](/concepts/more-concepts/faster-builds-with-module-federation)
|
Learn more: [Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation)
|
||||||
|
|
||||||
## See Also
|
## See Also
|
||||||
|
|
||||||
|
|||||||
@ -18,7 +18,9 @@ more [here](/recipes/angular/migration/angular).
|
|||||||
## Setting up the Angular plugin
|
## Setting up the Angular plugin
|
||||||
|
|
||||||
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
{% callout type="note" title="Keep Nx Package Versions In Sync" %}
|
||||||
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version numbers get out of sync, you can encounter some difficult to debug errors. You can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
Make sure to install the `@nx/angular` version that matches the version of `nx` in your repository. If the version
|
||||||
|
numbers get out of sync, you can encounter some difficult to debug errors. You
|
||||||
|
can [fix Nx version mismatches with this recipe](/recipes/tips-n-tricks/keep-nx-versions-in-sync).
|
||||||
{% /callout %}
|
{% /callout %}
|
||||||
|
|
||||||
Adding the Angular plugin to an existing Nx workspace can be done with the following:
|
Adding the Angular plugin to an existing Nx workspace can be done with the following:
|
||||||
@ -97,6 +99,6 @@ nx g @nx/angular:service my-service
|
|||||||
|
|
||||||
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
- [Angular Nx Tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||||
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
- [Migrating from the Angular CLI](/recipes/angular/migration/angular)
|
||||||
- [Setup Module Federation with Angular and Nx](/concepts/more-concepts/faster-builds-with-module-federation)
|
- [Setup Module Federation with Angular and Nx](/concepts/module-federation/faster-builds-with-module-federation)
|
||||||
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
- [Upgrading an AngularJS application to Angular](/recipes/angular/migration/angularjs)
|
||||||
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
- [Using Tailwind CSS with Angular projects](/recipes/angular/using-tailwind-css-with-angular-projects)
|
||||||
|
|||||||
@ -157,7 +157,8 @@ module.exports = composePlugins(withNx(), (config, { options, context }) => {
|
|||||||
|
|
||||||
### Configure webpack for Module Federation
|
### Configure webpack for Module Federation
|
||||||
|
|
||||||
If you use the [Module Federation](/concepts/more-concepts/faster-builds-with-module-federation) support from `@nx/angular` or `@nx/react` then
|
If you use the [Module Federation](/concepts/module-federation/faster-builds-with-module-federation) support
|
||||||
|
from `@nx/angular` or `@nx/react` then
|
||||||
you can customize your webpack configuration as follows.
|
you can customize your webpack configuration as follows.
|
||||||
|
|
||||||
```js {% fileName="apps/my-app/webpack.config.js" %}
|
```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
|
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.
|
[`ModuleFederationPlugin`](https://webpack.js.org/concepts/module-federation/) and provide a simpler API through Nx.
|
||||||
|
|
||||||
For more information, refer to the [Module Federation recipe](/concepts/more-concepts/faster-builds-with-module-federation).
|
For more information, refer to the [Module Federation recipe](/concepts/module-federation/faster-builds-with-module-federation).
|
||||||
|
|
||||||
### Options
|
### Options
|
||||||
|
|
||||||
|
|||||||
@ -137,5 +137,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:
|
To learn more about Module Federation, we have some resources you might find useful:
|
||||||
|
|
||||||
- [Guide: Faster Builds with Module Federation](/concepts/more-concepts/faster-builds-with-module-federation)
|
- [Guide: Faster Builds with Module Federation](/concepts/module-federation/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)
|
- [Video: Speed up your Angular serve and build times with Module Federation and Nx](https://www.youtube.com/watch?v=JkcaGzhRjkc)
|
||||||
|
|||||||
@ -52,6 +52,9 @@
|
|||||||
- [Improve Worst Case CI Times](/concepts/dte)
|
- [Improve Worst Case CI Times](/concepts/dte)
|
||||||
- [Task Pipeline Configuration](/concepts/task-pipeline-configuration)
|
- [Task Pipeline Configuration](/concepts/task-pipeline-configuration)
|
||||||
- [Affected](/concepts/affected)
|
- [Affected](/concepts/affected)
|
||||||
|
- [Module Federation](/concepts/module-federation)
|
||||||
|
- [Faster Builds with Module Federation](/concepts/module-federation/faster-builds-with-module-federation)
|
||||||
|
- [Micro Frontend Architecture](/concepts/module-federation/micro-frontend-architecture)
|
||||||
- [More Concepts](/concepts/more-concepts)
|
- [More Concepts](/concepts/more-concepts)
|
||||||
- [Customizing Inputs](/concepts/more-concepts/customizing-inputs)
|
- [Customizing Inputs](/concepts/more-concepts/customizing-inputs)
|
||||||
- [Incremental Builds](/concepts/more-concepts/incremental-builds)
|
- [Incremental Builds](/concepts/more-concepts/incremental-builds)
|
||||||
@ -65,8 +68,6 @@
|
|||||||
- [Nx and the Angular CLI](/concepts/more-concepts/nx-and-angular)
|
- [Nx and the Angular CLI](/concepts/more-concepts/nx-and-angular)
|
||||||
- [Folder Structure](/concepts/more-concepts/folder-structure)
|
- [Folder Structure](/concepts/more-concepts/folder-structure)
|
||||||
- [Nx Devkit and Angular Devkit](/concepts/more-concepts/nx-devkit-angular-devkit)
|
- [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)
|
- [Applications and Libraries](/concepts/more-concepts/applications-and-libraries)
|
||||||
- [Creating Libraries](/concepts/more-concepts/creating-libraries)
|
- [Creating Libraries](/concepts/more-concepts/creating-libraries)
|
||||||
- [Library Types](/concepts/more-concepts/library-types)
|
- [Library Types](/concepts/more-concepts/library-types)
|
||||||
|
|||||||
@ -661,7 +661,7 @@ const packagesDocuments = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Concept documents Updates (updated 2023-03-31)
|
* Concept documents Updates (updated 2023-10-18)
|
||||||
*/
|
*/
|
||||||
const conceptUrls = {
|
const conceptUrls = {
|
||||||
'/concepts/more-concepts/global-nx':
|
'/concepts/more-concepts/global-nx':
|
||||||
@ -674,6 +674,10 @@ const conceptUrls = {
|
|||||||
'/getting-started/tutorials/react-standalone-tutorial',
|
'/getting-started/tutorials/react-standalone-tutorial',
|
||||||
'/getting-started/angular-standalone-tutorial':
|
'/getting-started/angular-standalone-tutorial':
|
||||||
'/getting-started/tutorials/angular-standalone-tutorial',
|
'/getting-started/tutorials/angular-standalone-tutorial',
|
||||||
|
'/concepts/more-concepts/micro-frontend-architecture':
|
||||||
|
'/concepts/module-federation/micro-frontend-architecture',
|
||||||
|
'/concepts/more-concepts/faster-builds-with-module-federation':
|
||||||
|
'/concepts/module-federation/faster-builds-with-module-federation',
|
||||||
};
|
};
|
||||||
|
|
||||||
const nested5minuteTutorialUrls = {
|
const nested5minuteTutorialUrls = {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user