Blog
Colum Ferry
May 8, 2025

New and Improved Module Federation Experience with Nx

New and Improved Module Federation Experience with Nx
Nx 21 Launch Week

Nx 21 saw the introduction of many new and exciting features. Continuous Tasks was one such feature that I found particularly exciting because of what it could mean for the Developer Experience (DX) with Module Federation.

However, before even being able to contemplate that, a different feature needed to be completed first: the ability to use Module Federation with Nx’s Inferred Tasks.

Inferred Tasks with Module Federation

We have introduced three new Rspack Plugins for Module Federation that can be used with Nx.

These are true Rspack Plugins that should be added to the plugins: [] of an rspack.config file.

Their intention is to replace withModuleFederation helpers and module-federation-dev-server executors we used to provide the Nx Module Federation Experience previously.

With these plugins, we can now set up a very standard rspack.config file that can be used with the @nx/rspack/plugin Inference Plugin - or you could even just run rspack build or rspack serve.

Not only does this mean that the config files that we create for your Module Federation projects are now compliant with the underlying tooling, but it has enabled us to take full advantage of Continuous Tasks.

Continuous Tasks with Module Federation

This is where things get interesting. Continuous Tasks in Nx allows for tasks to depend on tasks that may not end. The Nx Module Federation Experience has always relied on the serving of multiple applications.

Previously, you would run nx serve shell --devRemotes=remote1 where shell is your host application and remote1 is the remote application that you or a feature team would be currently working on to allow for HMR with remote1.

Under the hood this would start up the webpack-dev-server for both shell and remote1.

However, it always felt slightly strange for individual contributors on feature teams to be told they cannot run “their" application by simply running nx serve remote1 .

Well, now they can!

With Continuous Tasks and the new NxModuleFederationDevServer plugins, we can generate remote applications that dependsOn["shell:serve"].

Running nx serve remote1 will serve both remote1 and shell!

The NxModuleFederationDevServer plugin for the shell application will check which remotes are already running and simply ignore them - serving only the remotes that are not already served.

Getting Started with the New Nx Module Federation Experience

1. Create a new Nx Workspace

~/

npx create-nx-workspace@latest myorg

1 2NX Let's create a new workspace [[https://nx.dev/getting-started/intro](/getting-started/intro)] 3 4✔ Which stack do you want to use? · none 5✔ Would you like to use Prettier for code formatting? · Yes 6✔ Which CI provider would you like to use? · skip 7✔ Would you like remote caching to make your build faster? · skip 8 9NX Creating your v21.0.0 workspace. 10 11✔ Installing dependencies with npm 12✔ Successfully created the workspace: myorg. 13 14NX Welcome to the Nx community! 👋 15 16🌟 Star Nx on GitHub: [https://github.com/nrwl/nx](https://github.com/nrwl/nx) 17📢 Stay up to date on X: [https://x.com/nxdevtools](https://x.com/nxdevtools) 18💬 Discuss Nx on Discord: [https://go.nx.dev/community](https://go.nx.dev/community) 19 20

2. Add the @nx/react Plugin

~/myorg

npx nx add @nx/react

1 2✔ Installing @nx/react@21.0.0 3 4NX Generating @nx/react:init 5 6UPDATE package.json 7UPDATE nx.json 8 9added 3 packages in 1s 10 1191 packages are looking for funding 12run `npm fund` for details 13✔ Initializing @nx/react... 14 15NX Package @nx/react added successfully. 16 17

3. Generate Host and Remote Applications

~/myorg

npx nx g @nx/react:host apps/shell --remotes=remote1,remote2 --bundler=rspack

1 2NX Generating @nx/react:host 3 4✔ Which stylesheet format would you like to use? · css 5✔ Which E2E test runner would you like to use? · none 6Fetching @nx/rspack... 7Fetching @nx/jest... 8 9UPDATE nx.json 10UPDATE package.json 11CREATE apps/shell/src/app/app.spec.tsx 12CREATE apps/shell/src/assets/.gitkeep 13CREATE … 14 15

4. Serve the Remote Application for Development

npx nx serve remote1

Module Federation with Continuous Tasks Output

With the new Terminal UI you can very easily see the logs for each application in specific frames also.

Further Reading