Skip to main content
Version: 3x

Function: createURLResolver

Federated.createURLResolver

createURLResolver(config): URLResolver

Creates URL resolver for Module Federation from provided config.

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}`),
};
}
});

Parameters

NameTypeDescription
configURLResolverConfigConfiguration for the resolver.

Returns

URLResolver

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

Defined in

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