diff --git a/docs/generated/manifests/menus.json b/docs/generated/manifests/menus.json index 1496e19820f2f..c295742503f55 100644 --- a/docs/generated/manifests/menus.json +++ b/docs/generated/manifests/menus.json @@ -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", diff --git a/docs/generated/manifests/nx.json b/docs/generated/manifests/nx.json index 9aee0086cf4d9..77af63ce46821 100644 --- a/docs/generated/manifests/nx.json +++ b/docs/generated/manifests/nx.json @@ -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", diff --git a/docs/generated/manifests/tags.json b/docs/generated/manifests/tags.json index e05f9cb0491a1..72fdedc32a035 100644 --- a/docs/generated/manifests/tags.json +++ b/docs/generated/manifests/tags.json @@ -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,50 +655,43 @@ "path": "/extending-nx/recipes/project-inference-plugins" } ], - "environment-variables": [ - { - "description": "", - "file": "shared/guides/use-environment-variables-in-react", - "id": "use-environment-variables-in-react", - "name": "Use Environment Variables in React", - "path": "/recipes/react/use-environment-variables-in-react" - }, + "module-federation": [ { "description": "", - "file": "shared/guides/use-environment-variables-in-angular", - "id": "use-environment-variables-in-angular", - "name": "Use Environment Variables in Angular", - "path": "/recipes/angular/use-environment-variables-in-angular" + "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/guides/define-environment-variables", - "id": "define-environment-variables", - "name": "Define Environment Variables", - "path": "/recipes/tips-n-tricks/define-environment-variables" + "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/guides/performance-profiling", - "id": "performance-profiling", - "name": "Profiling Build Performance", - "path": "/recipes/troubleshooting/performance-profiling" + "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/reference/environment-variables", - "id": "environment-variables", - "name": "Environment Variables", - "path": "/reference/environment-variables" + "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" } ], - "module-federation": [ + "angular": [ { "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" + "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": "", @@ -709,6 +709,13 @@ } ], "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", @@ -717,20 +724,41 @@ "path": "/recipes/react/module-federation-with-ssr" } ], - "angular": [ + "environment-variables": [ { "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" + "file": "shared/guides/use-environment-variables-in-react", + "id": "use-environment-variables-in-react", + "name": "Use Environment Variables in React", + "path": "/recipes/react/use-environment-variables-in-react" }, { "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" + "file": "shared/guides/use-environment-variables-in-angular", + "id": "use-environment-variables-in-angular", + "name": "Use Environment Variables in Angular", + "path": "/recipes/angular/use-environment-variables-in-angular" + }, + { + "description": "", + "file": "shared/guides/define-environment-variables", + "id": "define-environment-variables", + "name": "Define Environment Variables", + "path": "/recipes/tips-n-tricks/define-environment-variables" + }, + { + "description": "", + "file": "shared/guides/performance-profiling", + "id": "performance-profiling", + "name": "Profiling Build Performance", + "path": "/recipes/troubleshooting/performance-profiling" + }, + { + "description": "", + "file": "shared/reference/environment-variables", + "id": "environment-variables", + "name": "Environment Variables", + "path": "/reference/environment-variables" } ], "deployment": [ diff --git a/docs/generated/packages/angular/documents/overview.md b/docs/generated/packages/angular/documents/overview.md index 94cf1fa3b7e08..8883e2a5db5e3 100644 --- a/docs/generated/packages/angular/documents/overview.md +++ b/docs/generated/packages/angular/documents/overview.md @@ -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) diff --git a/docs/generated/packages/webpack/documents/webpack-config-setup.md b/docs/generated/packages/webpack/documents/webpack-config-setup.md index 51bf80a52a7db..cd48bc0403e8e 100644 --- a/docs/generated/packages/webpack/documents/webpack-config-setup.md +++ b/docs/generated/packages/webpack/documents/webpack-config-setup.md @@ -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" %} diff --git a/docs/generated/packages/webpack/documents/webpack-plugins.md b/docs/generated/packages/webpack/documents/webpack-plugins.md index 2927c83e7b0f7..7d34a3dda3182 100644 --- a/docs/generated/packages/webpack/documents/webpack-plugins.md +++ b/docs/generated/packages/webpack/documents/webpack-plugins.md @@ -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 diff --git a/docs/map.json b/docs/map.json index 0faafd16e9777..5d86ee6808580 100644 --- a/docs/map.json +++ b/docs/map.json @@ -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", diff --git a/docs/shared/guides/module-federation/micro-frontend-architecture.md b/docs/shared/guides/module-federation/micro-frontend-architecture.md index 81b3fa7e03eed..3d9eff4e588b3 100644 --- a/docs/shared/guides/module-federation/micro-frontend-architecture.md +++ b/docs/shared/guides/module-federation/micro-frontend-architecture.md @@ -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. diff --git a/docs/shared/incremental-builds.md b/docs/shared/incremental-builds.md index 32bf95d9da01b..774acbe7c9516 100644 --- a/docs/shared/incremental-builds.md +++ b/docs/shared/incremental-builds.md @@ -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) diff --git a/docs/shared/packages/angular/angular-plugin.md b/docs/shared/packages/angular/angular-plugin.md index 94cf1fa3b7e08..8883e2a5db5e3 100644 --- a/docs/shared/packages/angular/angular-plugin.md +++ b/docs/shared/packages/angular/angular-plugin.md @@ -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) diff --git a/docs/shared/packages/webpack/webpack-config-setup.md b/docs/shared/packages/webpack/webpack-config-setup.md index 51bf80a52a7db..cd48bc0403e8e 100644 --- a/docs/shared/packages/webpack/webpack-config-setup.md +++ b/docs/shared/packages/webpack/webpack-config-setup.md @@ -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" %} diff --git a/docs/shared/packages/webpack/webpack-plugins.md b/docs/shared/packages/webpack/webpack-plugins.md index 2927c83e7b0f7..7d34a3dda3182 100644 --- a/docs/shared/packages/webpack/webpack-plugins.md +++ b/docs/shared/packages/webpack/webpack-plugins.md @@ -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 diff --git a/docs/shared/recipes/module-federation-with-ssr.md b/docs/shared/recipes/module-federation-with-ssr.md index 37f892d41ed3f..82ab3631076fa 100644 --- a/docs/shared/recipes/module-federation-with-ssr.md +++ b/docs/shared/recipes/module-federation-with-ssr.md @@ -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) diff --git a/docs/shared/reference/sitemap.md b/docs/shared/reference/sitemap.md index 92a6b588331fe..a4daf54a488cf 100644 --- a/docs/shared/reference/sitemap.md +++ b/docs/shared/reference/sitemap.md @@ -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) diff --git a/nx-dev/nx-dev/redirect-rules.js b/nx-dev/nx-dev/redirect-rules.js index c9de8d30e22e4..37c93a58b3b9a 100644 --- a/nx-dev/nx-dev/redirect-rules.js +++ b/nx-dev/nx-dev/redirect-rules.js @@ -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', }; /** diff --git a/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts b/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts index 7c2fe37bae1b1..b1b7db1c4b97c 100644 --- a/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts +++ b/packages/react/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts @@ -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` ); } }