Help Center

Menu

Test a component locally

To test a component locally run the development server installed when the DXP CLI was installed.

The local development server allow testing and previewing of components locally.

Start the development server

To start the development server user interface

  1. Launch or switch to your development system’s command shell.

  2. Make the previously created components directory the present working directory.

    That is, the output of following command —

    ls

    — should be

    hello-world-ab

  3. Run the following command

    dxp-next cmp dev-ui hello-world-ab

    When the development server starts, it returns a message equivalent to the following to STD OUT:

    .../node/v20.18.0/lib/node_modules/@squiz/dxp-cli-next/node_modules/@squiz/local-component-dev-ui/lib/server
YYYY-MM-DDTHH:MM:SS.DDDZ info: Edge Component development webserver started on port http://localhost:5555
YYYY-MM-DDTHH:MM:SS.DDD3Z info: UI started on port http://localhost:3000

Connect to the local development server

The development server provides a URL for loading in a browser window.

The development server URL is http://localhost:3000.

When loaded, the development server presents a list of locally-available components.

localhost 3000 squiz dxp component development ui
Figure 1. The Squiz DXP component development UI running on localhost.

Preview the component

To preview the component

  1. Click the greater-than character — > — at the right edge of the Hello World listing in the Component Development table.

    The component preview loads.

    localhost 3000 squiz dxp component development ui component preview
    Figure 2. The Squiz DXP component development preview UI running on localhost.
    1 Pop-up menu for selecting a component’s functions for preview.
    2 Text entered in the local UI.

    In this case the entered text supplies the function’s defined string, something, with a value.

    1 The Live Preview button.

    Click this to update the component preview. For example, after entering text that supplies a function string with a value.

    1 The component preview

    This preview includes the component function’s output: the text entered in the local UI text field.

Next Step: Deploy a component to the Squiz DXP.