# defineDevHostConfig

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

Creates a webpack configuration object that is adapted for a Squide host 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 = defineDevHostConfig(swcConfig: {}, port, remotes: [], options?: {})

# Parameters

swcConfig: An SWC configuration object.
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 webpack definedDevConfig 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.
- 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 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 a webpack config

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

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

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

export default defineDevHostConfig(swcConfig, 8080, Remotes);

# Activate optional features

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

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

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

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

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

# Specify additional shared dependencies

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

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

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

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

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

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

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

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

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

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

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

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

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

export default defineDevHostConfig(swcConfig, 8080, 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 defineDevRemoteModuleConfig 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.dev.js
/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: `http://localhost:8081` }
];

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", 8081);

# `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.dev.js
/**
 * @typedef {import("@squide/firefly-webpack-configs").RemoteDefinition[]}
 */
const Remotes = [
    { name: "remote1", url: "http://localhost:8081" }
];

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

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", 8081, {
    host: "localhost" // (This is the default value)
});