Discussion on: Tutorial - A Guide to Module Federation for Enterprise

[Zack Jackson]

Heyo! Creator of MF here. This is a great article - very glad to see some enterprise guidance come to light. One note i wanted to point out.. you dont have to use hard coded remotes or .env variables to control the remotes, or even globals through runtime mutation. I support promise new Promise as a remote value which lets you do anything you like to resolve a remote container. I use this with Medusa to fetch the right container or a version of a container for a specific consumer at runtime.

new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: `promise new Promise(resolve => {
      const urlParams = new URLSearchParams(window.location.search)
      const version = urlParams.get('app1VersionParam')
      // This part depends on how you plan on hosting and versioning your federated modules
      const remoteUrlWithVersion = 'http://localhost:3001/' + version + '/remoteEntry.js'
      const script = document.createElement('script')
      script.src = remoteUrlWithVersion
      script.onload = () => {
        // the injected script has loaded and is available on window
        // we can now resolve this Promise
        const proxy = {
          get: (request) => window.app1.get(request),
          init: (arg) => {
            try {
              return window.app1.init(arg)
            } catch(e) {
              console.log('remote container already initialized')
            }
          }
        }
        resolve(proxy)
      }
      // inject this script with the src set to the versioned remoteEntry.js
      document.head.appendChild(script);
    })
    `,
      },
      // ...
    }),

[Matthew Waldron]

Hi Zack thank you for sharing! 🙏 I'm looking forward to trying out this approach. With this we can simplify the entire process for getting remotes for different environments.

[Zack Jackson]

Working out a few bugs in RMM still, but you can point your applications to my Medusa which is now hosted in alpha medusa-example-home.vercel.app/

[Rishi Agarwal]

Hey @scriptedalchemy , so can we also make an API call inside this promise new Promise block ,assuming that API returns us the version needed?

[Zack Jackson]

Or in Medusa's case we have Remote Module Management.

      remotes: {
        dsl: clientVersion({
          currentHost: "home",
          remoteName: "dsl",
          dashboardURL:
            "http://localhost:3000/api/graphql?token=d9a72038-a1cd-4069-85e2-d8f56d843732e",
        }),
      }