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

  1. Read the DXP CLI documentation to understand the Component Service dev command.

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

    Screenshot of localhost browser window displaying component development interface with 'count of components:1' and clickable version link '1.0.0' for unit-test-components/Docstest

    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:

Screenshot showing the rendered Hello World component output in browser with 'Hello World!' heading and preview text below