#React + Rspack + Nx

nvm use 20

#Setup

#1. Create an Nx workspace

Run below commands:

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

And select from these options:

? Which stack do you want to use? None. 
? Package-based monorepo, integrated monorepo, or standalone project? Integrated Monorepo. 
? Which CI provider would you like to use? skip 
? Would you like remote caching to make your build faster? No

#2. Add hosts and remote

In your terminal, run:

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

In the terminal select from below answers:

? Which stylesheet format would you like to use? - css 
? Which E2E test runner would you like to use? - cypress 
? What should be the project name and where should it be generated? 
❯ As provided:
    Name: host
    Root: apps/host

Your Nx application's initial setup is complete! If you run:

npx nx run host:serve

You can see your application in the browser.

#3. Naming each application

To understand why these configuration are necessary - Read the complete checklist to deploy Micro-Frontend with Zephyr.

Open the new directory in your selected editor and add package.json as a structure below:

1- apps 
2-- host 
3--- package.json 
4-- remote1 
5--- package.json 
6-- remote2 
7--- package.json

This command will create all 3 files for you

touch apps/host/package.json apps/remote1/package.json apps/remote2/package.json

In host's package.json, add below field (minimal example):

{
  "name": "host",
  "version": "0.0.0"
}

In remote1's package.json, add below field:

{
  "name": "remote1",
  "version": "0.0.0"
}

In remote2's package.json, add below field:

{
  "name": "remote2",
  "version": "0.0.0"
}

#4. Create your first commit

After making sure each application in this project has a package.json and the naming aligns with the unique name in module federation config, you will need to make sure this project is a github repository and has at least one commit hash by running git commit -m "commit something" command.

#5. Adding configuration for Zephyr

Install Zephyr's plugin for Rspack (works in Webpack too):

npm i zephyr-webpack-plugin@latest

Add Zephyr plugin to each application's build config by adding below lines from Nx's auto-generated build config:

1import { composePlugins, withNx, withReact } from '@nx/rspack';
2import {
3  withModuleFederation,
4  ModuleFederationConfig,
5} from '@nx/rspack/module-federation';
6import { withZephyr } from "zephyr-webpack-plugin"
7
8import baseConfig from './module-federation.config';
9
10const config: ModuleFederationConfig = {
11  ...baseConfig,
12};
13
14// Nx plugins for rspack to build config object from Nx options and context.
15/**
16 * DTS Plugin is disabled in Nx Workspaces as Nx already provides Typing support for Module Federation
17 * The DTS Plugin can be enabled by setting dts: true
18 * Learn more about the DTS Plugin here: https://module-federation.io/configure/dts.html
19 */
20export default composePlugins(
21  withNx(),
22  withReact(),
23  withModuleFederation(config, { dts: false }),
24  withZephyr() // the plugin sequence in Nx matters. Do remember to put zephyr at the end of your config file. 
25)

You will need to do the same for rspack.config.prod.ts for host app.

#6. Build the remotes and serve the host

You have to build the remote applications first; this ensures that the host application can properly contact the remotes.

nx run remote1:build

nx run remote2:build

Now you can serve the host application to check if everything is working properly, which through nx magic will start the two remotes.

nx run host:serve

Your host app should start on port 4200 by default and each remote will spin up on its own port. All three applications should be deployed now.

#8. Chrome Extension

You can check the application you just deployed in our chrome extension.

Head to Chrome Web Store to install our chrome extension - Zephyr Mission Control. Click on Add to Chrome and confirm with Add extension. After you finish remember to pin the extension by clicking on on extension management tab to provide you a quicker access to Zephyr's side panel.

Once you click on the Chrome Extension, a login page will pop up and prompt you to log in (if you are using Microsoft Edge you will need to click on Open Side Panel).

rm rf ~/.zephyr

Now that you have logged in and deployed your apps; you should see the versions of the host application, and the versions of our two remotes (remote1 & remote2). Make some changes locally, watch them redeploy and select the new version from the drop down (you may need to refresh the browser to see the latest, if live reload is not checked)

#9. Dashboard

If you want to see all your projects and their versions, sign in on dashboard and you will see all your projects and their dependencies.

A more detailed explaination on how to use our dashboard is coming soon.