# defineBuildHostConfig

If the application does not include any remote modules, use the defineBuildConfig function from @workleap/webpack-configs instead of the defineBuildHostConfig function.

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

# Reference

const webpackConfig = defineBuildHostConfig(swcConfig: {}, remotes: [], options?: {})

# Parameters

swcConfig: An SWC configuration object.
remotes: An array of RemoteDefinition (view the Remote definition section).
options: An optional object literal of options:
- Accepts most of webpack definedBuildConfig predefined options.
- htmlWebpackPluginOptions: An optional object literal accepting any options of the HtmlWebpackPlugin.
- 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.
- runtimePlugins: An optional array of module federation runtime plugins.
- 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 host application in build mode.

# Default shared dependencies

The defineBuildHostConfig 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

host/webpack.build.js
// @ts-check

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

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, Remotes);

# Activate additional features

host/webpack.build.js
// @ts-check

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

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, Remotes, {
    features: {
        i18next: true
    }
});

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

# Specify additional shared dependencies

host/webpack.build.js
// @ts-check

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

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, 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/webpack.build.js
// @ts-check

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

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, 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/webpack.build.js
// @ts-check

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

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, Remotes, {
    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 defineHostModuleFederationPluginOptions(options) function as it will take care of merging the custom options with the default plugin options.

host/webpack.build.js
// @ts-check

import { defineBuildHostConfig, defineHostModuleFederationPluginOptions } from "@squide/firefly-webpack-configs";
import { swcConfig } from "./swc.build.js";

/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

export default defineBuildHostConfig(swcConfig, Remotes, {
    moduleFederationPluginOptions: defineHostModuleFederationPluginOptions({
        runtime: "my-runtime-name"
    })
});

applicationName: The host application name.
moduleFederationPluginOptions: An object literal of ModuleFederationPlugin options.

# 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 defineBuildRemoteModuleConfig function to add the ModuleFederationPlugin to the remote module webpack configuration object, then the remote module name is the second argument of the function.

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

host/webpack.build.js
/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: `http://localhost:8081` }
];

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

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

export default defineBuildRemoteModuleConfig(swcConfig, "remote1");

# `url`

The url option of a remote definition must match the publicPath of the remote module webpack configuration object.

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

host/webpack.build.js
/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];