Function: createURLResolver

Federated.createURLResolver

▸ createURLResolver(config): URLResolver

Creates URL resolver for Module Federation from provided config.

Parameters

Name	Type	Description
config	URLResolverConfig	Configuration for the resolver.

Returns

URLResolver

A resolver function which will try to resolve URL based on given scriptId and caller.

Example

import { ScriptManager, Script, Federated } from '@callstack/repack/client';

const resolveURL = Federated.createURLResolver({
  containers: {
    app1: 'http://localhost:9001/[name][ext]',
    app2: 'http://localhost:9002/[name].container.js',
  },
  chunks: {
    app2: 'http://localhost:9002/chunks/[name][ext]',
  },
});

ScriptManager.shared.addResolver(async (scriptId, caller) => {
  let url;
  if (caller === 'main') {
    url = __DEV__
      ? Script.getDevServerURL(scriptId)
      : Script.getRemoteURL(`http://localhost:9000/${scriptId}`);
  } else {
    url = resolveURL(scriptId, caller);
  }

  if (!url) {
    return undefined;
  }

  return {
    url,
    query: {
      platform: Platform.OS,
    },
  };
});

createURLResolver is a abstraction over Script.getRemoteURL, for example:

import { ScriptManager, Federated } from '@callstack/repack/client';

ScriptManager.shared.addResolver((scriptId, caller) => {
  const resolveURL = Federated.createURLResolver({
    containers: {
      app1: 'http://localhost:9000/[name][ext]',
    },
  });

  return {
    url: resolveURL(scriptId, caller);
  };
});

is equivalent to:

import { ScriptManager, Script } from '@callstack/repack/client';

ScriptManager.shared.addResolver(async (scriptId, caller) => {
  if (scriptId === 'app1') {
    return {
      url: 'http://localhost:9000/app1.container.bundle',
    };
  }

  if (caller === 'app1') {
    return {
      url: Script.getRemoteURL(`http://localhost:9000/${scriptId}`),
    };
  }
});

Defined in

packages/repack/src/modules/ScriptManager/federated.ts:180