# 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/webpack-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.
      • environmentVariables: false to remove @squide/env-vars from shared dependencies.
      • honeycomb: false to remove Honeycomb packages from shared dependencies.
      • launchDarkly: false to remove LaunchDarkly packages from shared dependencies.
      • msw: false to remove @squide/msw from shared dependencies.
    • sharedDependencies: An optional object literal of additional (or updated) module federation shared dependencies.
    • moduleFederationPluginOptions: An optional object literal of ModuleFederationPlugin options.

# 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"
    }
}

# Default shared dependencies

The defineDevRemoteModuleConfig function will add the following shared dependencies as singleton by default:

For the full shared dependencies configuration, have a look at the defineConfig.ts file on Github.

# Usage

# Define a webpack config

remote-module/webpack.dev.js
// @ts-check

import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";

export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080);

# Activate additional features

remote-module/webpack.dev.js
// @ts-check

import { defineDevRemoteModuleConfig } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.dev.js";

export default defineDevRemoteModuleConfig(swcConfig, "remote1", 8080, {
    features: {
        i18next: true
    }
});

# Specify additional shared dependencies

remote-module/webpack.dev.js
// @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
        }
    }
});

# Extend a default shared dependency

remote-module/webpack.dev.js
// @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

remote-module/webpack.dev.js
// @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.

remote-module/webpack.dev.js
// @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

remote-module/webpack.dev.js
// @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"
            }
        })
});