Create Page plugin

A plugin to create a new page.

Package name

@magnolia/cli-create-page-plugin

Repository link

@magnolia/cli-create-page-plugin

Latest version

Magnolia CLI create page 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-page-plugin

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

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-page-plugin

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

    import CreatePagePlugin from "@magnolia/cli-create-page-plugin";

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

Usage

Command

create-page [name] [options]

Options

Form (short and long) Description

-lm [name]

--light-module [name]

Sets a light module for the page template. By default, uses the directory specified in the mgnl.config.js file.

-p [name]

--prototype [name]

Selects a page prototype.

-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 CreatePagePlugin from "@magnolia/cli-create-page-plugin";

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

For more information, see Configuring plugins.

Create a new page

npm run mgnl -- create-page "my-page"

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

This command creates a new page called my-page.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

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

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all pages in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated page.

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

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • pagesSpaPath

Create a new page in a specific light module

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

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

This command creates a new page called my-page 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 pages in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated page.

If the my-lm light module doesn’t exist yet in the light modules 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

    • pagesSpaPath

Create a new component based on a specific prototype

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

Windows users using PowerShell must enclose the two consecutive hyphens (--) in quotes:

npm run mgnl "--" ...

This command creates a new page called my-page.

The plugin will prompt you to choose a:

  • Directory containing all light modules.

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

  • Framework containing prototypes.

  • Prototype available in the framework.

  • Directory with all pages in the frontend project directory.

  • File containing the componentMapping object.

  • Filetype of the newly generated page.

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

Prototype availability in the Create Page Plugin depends on the framework chosen. For more information, see the Framework prototypes page.

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

  • Global

    • lightModulesPath

    • componentMappingFilePath

    • type

  • Plugin

    • lightModule

    • framework

    • prototype

    • pagesSpaPath

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 page 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 page will be created.

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

pagesSpaPath

The path to the folder containing the frontend pages.

framework

The framework prototype to be used for page creation, for example @magnolia/cli-react-prototypes.

trustedFramework

Bypass the confirmation prompt when downloading the framework.

If the framework property doesn’t start with @magnolia/cli, the plugin prompts you to confirm the download from the npm repository.

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 determines 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