#
defineDevRemoteModuleConfig
Creates a webpack configuration object that is adapted for a Squide remote module application in development mode.
This function is a wrapper built on top of @workleap/web-configs. Make sure to read the defineDevConfig documentation first.
#
Reference
const webpackConfig = defineDevRemoteModuleConfig(swcConfig: {}, applicationName, port, options?: {})
#
Parameters
swcConfig
: An SWC configuration object.applicationName
: The remote module application name.port
: The remote module application port.options
: An optional object literal of options:- Accepts most of webpack
definedDevConfig
predefined options. features
: An optional object literal of feature switches to define additional shared dependencies.i18next
: Whether or not to add@squide/i18next
as a shared dependency.
sharedDependencies
: An optional object literal of additional (or updated) module federation shared dependencies.moduleFederationPluginOptions
: An optional object literal of ModuleFederationPlugin options.
- Accepts most of webpack
#
Returns
A webpack configuration object tailored for a Squide remote module application in development mode.
#
Conventions
To fulfill Squide remote module requirements, the defineDevRemoteModuleConfig
function will pre-configure the ModuleFederationPlugin with the following filename
and exposes
properties.
{
filename: "/remoteEntry.js",
exposes: {
"register.js": "./src/register"
}
}
If the remote module port
is 8081
, the remote module bundle is available at http://localhost:8081/remoteEntry.js
.
#
Default shared dependencies
The defineDevRemoteModuleConfig
function will add the following shared dependencies as singleton
by default:
- react
- react-dom
- react-router-dom
- @squide/core
- @squide/react-router
- @squide/module-federation
- @squide/msw
For the full shared dependencies configuration, have a look at the defineConfig.ts file on Github.
#
Usage
#
Define a webpack config
// @ts-check
import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080);
#
Activate additional features
// @ts-check
import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
features: {
i18next: true
}
});
Features must be activated on the host application as well as every remote module.
#
Specify additional shared dependencies
// @ts-check
import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
sharedDependencies: {
"@sample/shared": {
singleton: true
}
}
});
Additional shared dependencies must be configured on the host application as well as every remote module.
#
Extend a default shared dependency
// @ts-check
import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
sharedDependencies: {
"react": {
requiredVersion: "18.2.0"
}
}
});
In the previous code sample, the react
shared dependency will be augmented with the newly provided strictVersion
option. The resulting shared dependency will be:
{
"react": {
eager: true,
singleton: true,
requiredVersion: "18.2.0"
}
}
#
Override a default shared dependency
// @ts-check
import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
sharedDependencies: {
"react": {
singleton: false
}
}
});
In the previous code sample, the react
shared dependency singleton
option will be overrided by the newly provided value. The resulting shared dependency will be:
{
"react": {
eager: true,
singleton: false
}
}
#
Customize module federation configuration
While you could customize the ModuleFederationPlugin configuration by providing your own object literal through the moduleFederationPluginOptions
option, we recommend using the defineRemoteModuleFederationPluginOptions(applicationName, options)
function as it will take care of merging the custom options with the default plugin options.
// @ts-check
import { defineDevRemoteModuleConfig, defineRemoteModuleFederationPluginOptions } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
moduleFederationPluginOptions: defineRemoteModuleFederationPluginOptions("remote1", {
runtime: "my-runtime-name"
})
});
applicationName
: The host application name.moduleFederationPluginOptions
: An object literal of ModuleFederationPlugin options.
#
Expose an additional module
// @ts-check
import { defineDevRemoteModuleConfig, defineRemoteModuleFederationPluginOptions } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";
export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
moduleFederationPluginOptions: defineRemoteModuleFederationPluginOptions("remote1", {
exposes: {
"./foo": "./src/bar"
}
})
});