Assigning publicPath to individual remotes at run time using the ModuleFederationPlugin

Question

would like to ask your help regarding module federation. I am trying to set a remote from an external server but the loaded scripts from remoteEntry are loaded using the container url.

new ModuleFederationPlugin({
  name: 'container',
  remotes: {
    auth: `auth@${process.env.HOV_MFE_URL}/auth/latest/remoteEntry.js`,
  },
  shared: packageJson.dependencies,
}),

in the network request the results are:

http://localhost:8080/[somethingscript1].js http://localhost:8080/[somethingscript2].js

Answer 1

So this is probably only going to get you part way. First, the environment variable in your example gets evaluated at build time, not run time. So it would never work.

My recommendation is to use proxying. Have a specific path on your application for each micro-fe, and use whatever tech is serving up the page (ie, nginx) to proxy to the micro-fe. That makes it much easier because you can configure the proxy redirect with things like env variables. Or just use pod services with a system like Kubernetes. Regardless, you get a lot more options this way.

For dev testing, the webpack dev server supports very robust proxying too.