Loading the remote url at runtime

[Lemour-sudo]

Is it possible to use this plugin for component's whose remote url (remote_app url) can only be determined at runtime when the host application is running? The remote url is not known before the page loads.

[edusdorneles]

Did you find any solution to that?

[frolovsky]

@edusdorneles @Lemour-sudo Yes, you can try externalType: "promise" inside remotes option

    federation({
      name: "host",
      remotes: {
        some_app: {
          externalType: "promise",
          external: `Promise.resolve(window.VUE_APP_SOME_APP_URL)`, // window.VUE_APP_SOME_APP_URL == "https://link.to/remoteEntry.js"
        },
    }),

Inside Promise.resolve you can put any code. In my case, we generate file config.js with variables (includes remote urls variables). config.js connected inside index.html.

[edusdorneles]

@frolovsky Thats nice, but in config.js can you pass a "runtime function"? Like, pass a new Date() with the remote URL?

My question is for caching problems... Passing a new Date() timestamp with remote URL, "kills" the cache from the browser.

Eg: https://remote.com/remoteEntry.js?v=17282939

[frolovsky]

We encountered the same problem, I also tried to solve it through new Date(). This causes an import error.
We disabled file caching at nginx level

location /assets/remoteEntry.js {
  try_files $uri /index.html;
  # kill cache
  add_header Last-Modified $date_gmt;
  add_header Cache-Control 'no-store, no-cache';
  if_modified_since off;
  expires off;
  etag off;
}

[frolovsky]

I checked it now, all imports with query parameters work, so you can figure out how to wrap the URL in a function that will add a query parameter to reset the cache.

federation({
  name: "host",
  remotes: {
    remote1: {
      externalType: "promise",
      external: `Promise.resolve(window._getRemoteUrlWithQuery(window.REMOTE_URL))`,
    },
  }
})

This code must be executed before the federation is launched (for example, inside index.html)

const getRemoteUrlWithQuery = (url) => `${url}?v=${Date.now()}`;
window._getRemoteUrlWithQuery = getRemoteUrlWithQuery;