createFrontendModule()

Home > @backstage/frontend-plugin-api > createFrontendModule

Creates a new module that can be installed in a Backstage app.

Signature:

function createFrontendModule<TId extends string, TExtensions extends readonly ExtensionDefinition[] = []>(options: CreateFrontendModuleOptions<TId, TExtensions>): FrontendModule;

Parameters

Parameter	Type	Description
options	CreateFrontendModuleOptions<TId, TExtensions>

**Returns:**

FrontendModule

Remarks

Modules are used to add or override extensions for an existing plugin. If a module provides an extension with the same ID as one provided by the plugin, the extension provided by the module will always take precedence.

Every module is created for a specific plugin by providing the unique ID of the plugin that the module should be installed for. If that plugin is not present in the app, the module will be ignored and have no effect.

For more information on how modules work, see the documentation for modules in the frontend system documentation.

It is recommended to name the module variable of the form <pluginId>Module<ModuleName>.

Example

import { createFrontendModule } from '@backstage/frontend-plugin-api';

export const exampleModuleCustomPage = createFrontendModule({
  pluginId: 'example',
  extensions: [
    // Overrides the default page for the 'example' plugin
    PageBlueprint.make({
      path: '/example',
      loader: () => import('./CustomPage').then(m => <m.CustomPage />),
    }),
  ],
});