Help Center

Menu

Test using the local development server

To test your component locally, you must use the CLI tools to run the development server.

Before you start

Check that you have done the following:

Steps

To start the development server:

  1. In your CLI, run the dxp-next cmp dev components command, where components is the name of the directory you created.
    For example, dxp-next cmp dev hello-world.

  2. Click the localhost URL printed by the command to open a browser window showing the list of running components.

    This image shows the top of the localhost browser window

    If you do not see your new component in the browser window, something has gone wrong. Check the CLI output for error messages and resolve them before continuing.

  3. Click the version link to preview your component.
    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 example:

Expand to show the completed manifest file 
 {
  "$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.cjs",

      "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 results such as this:

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