CODEWITHSUNDEEP
reactjswebpacknrwl-nxnrwlwebpack-module-federation
Codehan25
Codehan25

Reputation: 3014

How to add a remote app (micro frontend) that is not part of the NX workspace to it's Webpack config?

I created an NX workspace with a host application (based on react) that consumes 3 micro frontends (two based on React, one based on Angular) using the official documentation.

It's all working fine until I want to add a remote app that is not part of the NX workspace.

The remote app I created is a standard react app (created with create-react-app) with its own Webpack config. The Module Federation part looks like this:

  plugins: [
    new ModuleFederationPlugin({
      name: "RemoteReactApp",
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App.tsx"
      },
      shared: {
        ...dependencies,
        react: {
          singleton: true,
          requiredVersion: dependencies["react"],
        },
        "react-dom": {
          singleton: true,
          requiredVersion: dependencies["react-dom"],
        },
      },
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],

It provides the remoteEntry.js file which I can open in the browser.

Then I add the remote to the Host's Webpack config like this (like all the other micro frontends are added):

const moduleFederationConfig = {
  name: 'shell',
  remotes: [
    ['reactApp1', 'http://localhost:4201/remoteEntry.mjs'],
    ['reactApp2', 'http://localhost:4202/remoteEntry.js'],
    ['angularApp1', 'http://localhost:4203/remoteEntry.mjs'],
    [
      'RemoteReactApp',
      'RemoteReactApp@http://localhost:4204/remoteEntry.js',
    ],
  ],
};

module.exports = moduleFederationConfig;

Running npm start shows the following error:

 >  NX   Could not find project "RemoteReactApp"

Since the external app (RemoteReactApp) is not part of the NX workspace, it cannot be found.

But how can you add external apps to Webpack's remote configuration so that NX is also satisfied?

Upvotes: 1

Views: 2275

Answers (1)

user3344606
user3344606

Reputation: 11

I have a similar situation, but my remote app outside the host workspace was created with Nx workspace (v15.8.9), it worked for me when I tried without the host name @remote_url, in your case you can try something as below

const moduleFederationConfig = {
  name: 'shell',
  remotes: [
    ['reactApp1', 'http://localhost:4201/remoteEntry.mjs'],
    ['reactApp2', 'http://localhost:4202/remoteEntry.js'],
    ['angularApp1', 'http://localhost:4203/remoteEntry.mjs'],
    [
      'RemoteReactApp',
      'http://localhost:4204/remoteEntry.js',
    ],
  ],
};

Upvotes: 0

Related Questions