# defineDevHostConfig

This is an experimental feature.

If the application does not include any remote modules, use the defineDevConfig function from @workleap/rsbuild-configs instead of the defineDevHostConfig function.

Creates an Rsbuild configuration object that is adapted for a Squide host application in development mode. This function is a wrapper built on top of @workleap/rsbuild-configs. Make sure to read the defineDevConfig documentation first.

# Reference

const rsbuildConfig = defineDevHostConfig(port, remotes: [], options?: {})

# Parameters

port: The host application port.
remotes: An array of RemoteDefinition (view the Remote definition section).
options: An optional object literal of options:
- Accepts most of Rsbuild 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

An Rsbuild configuration object tailored for a Squide host application in development mode.

# Default shared dependencies

The defineDevHostConfig 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 an Rsbuild config

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(8080, Remotes);

# Activate optional features

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(8080, Remotes, {
    features: {
        i18next: true
    }
});

Features must be activated on the host application as well as every remote module.

# Specify additional shared dependencies

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(8080, Remotes, {
    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

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(8080, Remotes, {
    sharedDependencies: {
        "react": {
            requiredVersion: "18.2.0"
        }
    }
});

In the previous code sample, the react shared dependency will be augmented with the strictVersion option. The resulting shared dependency will be:

{
    "react": {
        eager: true,
        singleton: true,
        requiredVersion: "18.2.0"
    }
}

# Override a default shared dependency

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(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

host/rsbuild.dev.ts
import { defineDevHostConfig, type RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineDevHostConfig(8080, Remotes, {
    moduleFederationPluginOptions: defaultOptions => {
        defaultOptions.name = "my-application";

        return defaultOptions;
    }
});

# Remote definition

# `name`

The name option of a remote definition must match the name option defined in the remote module ModuleFederationPlugin configuration.

If you are relying on the Squide defineDevRemoteModuleConfig function to add the ModuleFederationPlugin to the remote module Rsbuild configuration object, then the remote module name is the first argument of the function.

In the following exemple, the remote module name is remote1.

host/rsbuild.dev.ts
import type { RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: `http://localhost:8081` }
];

remote-module/rsbuild.dev.ts
import { defineDevRemoteModuleConfig } from "@squide/firefly-rsbuild-configs";

export default defineDevRemoteModuleConfig("remote1", 8081);

# `url`

The url option of a remote definition must match the assetPrefix of the remote module Rsbuild configuration object.

In the following exemple, the remote module assetPrefix is http://localhost:8081.

host/rsbuild.dev.ts
import type { RemoteDefinition } from "@squide/firefly-rsbuild-configs";

const Remotes: RemoteDefinition[] = [
    { name: "remote1", url: "http://localhost:8081" }
];

The assetPrefix is built from the provided host and port values. Therefore, if the port value is 8081, then the generated assetPrefix would be http://localhost:8081:

remote-module/rsbuild.dev.ts
import { defineDevRemoteModuleConfig } from "@squide/firefly-rsbuild-configs";

export default defineDevRemoteModuleConfig("remote1", 8081, {
    host: "localhost" // (This is the default value)
});