Create Component plugin

A plugin to create a new component in a light module.

Package name

@magnolia/cli-create-component-plugin

Repository link

@magnolia/cli-create-component-plugin

Latest version

Magnolia CLI create component plugin - latest version tag

Changelog link

CHANGELOG.md

Installing

The plugin doesn’t come pre-installed with Magnolia CLI. You must add it to the mgnl.config.js project file.

The plugin is installed automatically by the Jumpstart plugin if it is defined in a project template.

With add-plugin

Run the following command in the project folder.

npm run mgnl -- add-plugin @magnolia/cli-create-component-plugin

The command automatically downloads, installs, and registers the plugin in mgnl.config.js.

Manually

  1. Run the following command in the project folder.

    npm install @magnolia/cli-create-component-plugin

  2. Modify the mgnl.config.js file accordingly.

    import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";

export default {
  plugins: [
    new CreateComponentPlugin()
  ]
};

Usage

Command

create-component <name> [options]

Options

Form (short and long) Description

-a [[lm-name:]page-template[@area]]

--available [[lm-name:]page-template[@area]]

Specifies the page to make the component available to.

The default values for [lm-name:]page-template[@area] are as follows:

  • [lm-name:] takes the lightModule value in mgnl.config.js.

  • [@area] becomes main if not specified.

Example: my-lm:basic@main

-lm [name]

--light-module [name]

Defines the light module for the component template. By default, uses the directory specified in the mgnl.config.js file.

-p [name]

--prototype [name]

Selects a prototype for component creation.

-v

--version

Displays the version.

-h

--help

Displays help information.

Examples

In the following examples, assume that the mgnl.config.js file looks like this:

import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";

export default {
  plugins: [
    new CreateComponentPlugin()
  ]
};

For more information, see Configuring plugins.

Create a new component

npm run mgnl -- create-component "my-component"

This command creates a new component called my-component.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

  • Specific light module where the my-component component will be created.

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all components in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated component.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • componentsSpaPath

Create a new component and add it to an existing page

npm run mgnl -- create-component "my-component" --available "basic"

This command creates a new component called my-component.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

  • Specific light module.

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all components in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated component.

After creating the component, the plugin adds it to basic page template. Make sure that the basic page exists in the light module directory.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • componentsSpaPath

Create a new component in a light module

npm run mgnl -- create-component "my-component" --light-module "my-lm"

This command creates a new component called my-component in the my-lm light module.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all components in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated component.

If the my-lm light module doesn’t exist in the light module directory, the plugin will prompt you to select another one.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • componentsSpaPath

Create a new component based on a specific prototype

npm run mgnl -- create-component "my-component" --prototype "card"

This command creates a new component called my-component.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

  • specific light module where the my-component component will be created.

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all components in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated component.

In case the card prototype is not available in the framework selected, you’ll be prompted to choose a different prototype.

Prototype availability in the Create Component plugin depends on the framework selected. For more information, see Framework prototypes.

The plugin writes the following properties to the mgnl.config.js file:

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • componentsSpaPath

Configuration

You can set the following properties in mgnl.config.js to predefine the plugin’s behavior.

Global properties

Property name Description

lightModulesPath

The path to a directory containing all light modules.

lightModule

The name of a light module where the component will be created.

Alternative forms: -lm [name], --light-module [name]

componentMappingFilePath

The path to the file containing the componentMapping object.

type

The type for the selected prototype, for example ts or js.

Plugin properties

Property name Description

lightModule

The name of a light module where the component will be created.

Alternative forms: -lm [name], --light-module [name]

componentsSpaPath

The path to the folder containing the front-end components.

framework

The framework prototype to use for component creation, for example @magnolia/cli-react-prototypes.

prototype

The name of a prototype.

Alternative forms: -p [name], --prototype [name]

templateData

A key-value object used by Handlebars for template rendering.

templateArgs

A key-value object that modifies how the prototype behaves.

For more information, see Configuring plugins.

Feedback

DX Core

×

Location

This widget lets you know where you are on the docs site.

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules