Test using the local development server

To test your component locally, you must use the CLI tools to run the development server installed in Getting started - installation.

To start the development server, run the following commands:

In your CLI, enter the following command, where components is the name of the folder you created in Create a components folder:

dxp-next cmp dev components

When the server runs, it will provide a localhost URL and open a browser window to preview the list of running components.

If you do not see your new component in the browser window, something has gone wrong. See your CLI screen for error messages.
Select your component to preview it. You will see Hello World! followed by the text from the previews function.

Your completed manifest file, including the preview configuration, will now look like this:

 {
  "$schema": "http://domain-name/schemas/v1.json",

  "name": "helloworld1",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "Hello World test component",
  "namespace": "test-components",
  "icon": {
    "id": "list_alt",
    "color": {
        "type": "hex",
        "value": "#2D2D2D"
    }
  },
  "description": "This component is set up as a demonstration component for documentation purposes.",

  "functions": [
    {
      "name": "main",
      "entry": "main.js",

      "input": {
        "type": "object",
        "properties": {
          "text": {
            "type": "string"
          }
        },
        "required": []
      },
      "output": { "responseType": "html" }
    }
  ]
    ,
  "previews":
    {
      "firstpreview": {
        "functionData": {
          "main": {
            "inputData": {
              "type": "inline",
              "value": {
                "text": "Text supplied to previews function."
              }
            },
            "wrapper": {
              "path": "preview-wrapper.html"
            }
          }
        }
      }
    }
}

The preview information combined with the JavaScript function to render your component and your preview.html file will generate a display like this:

This image shows the result of the local test that is displayed on the screen.

Help Center

Menu

Test using the local development server