Module Federation with Server-Side Rendering

This guide will walk you through creating a Module Federated setup with Server Side Rendering (SSR) for Angular and React using Nx and its generators.

Steps

Section titled “Steps”

Create an empty workspace

Section titled “Create an empty workspace”

Run the following command with the options listed to create an empty workspace.

npx create-nx-workspace@latest myorg --preset=apps

NX   Let's create a new workspace [https://nx.dev/getting-started/intro]
✔ Which CI provider would you like to use? · skip
✔ Would you like remote caching to make your build faster? · skip

Opting into Nx CloudYou will also be prompted whether to add Nx Cloud to your workspace. We won't address this in this recipe, but you can see the introduction to Nx Cloud for more details.

Install your framework plugin

Section titled “Install your framework plugin”

Make sure to install the@nx/angular or@nx/react versions that matches the version ofnx 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.

nxadd@nx/angular

nxadd@nx/react

Generating a host and multiple remotes with SSR

Section titled “Generating a host and multiple remotes with SSR”

We will generate the apps required for a storefront application.
We will need the following applications:

Store -host application
Product -remote application
Checkout -remote application

Nx allows you to do this with a single command:

npxnxg@nx/angular:hostapps/store--ssr--remotes=product,checkout

npxnxg@nx/react:hostapps/store--ssr--remotes=product,checkout

This will generate three applications, set up with SSR and Module Federation.

Serving the store application

Section titled “Serving the store application”

When using Module Federation, we want to serve the host application along with the remote applications so that everything works as expected.

To do this, run:

npxnxserve-ssrstore

npxnxservestore

This will run all three application servers but only thestore will be watching for file changes. If you make a change to one of the remote applications (checkout orproduct) the changes will not be hot reloaded.

Serving the store application with file watching for checkout

Section titled “Serving the store application with file watching for checkout”

If working on a remote application, we can still serve it via the host application and have it watch for changes.

To serve thestore application and watch for changes on thecheckout application run:

npxnxserve-ssrstore--devRemotes=checkout

npxnxservestore--devRemotes=checkout

Additional Resources

Section titled “Additional Resources”

To learn more about Module Federation, we have some resources you might find useful:

Movatterモバイル変換