Help Center

Menu

Test a specific preview

You can define more than one preview per component, so you need to be able to specify which preview to test.

There are two ways to test your preview. You can test it locally using the local development server or deploy your component and see the preview in the Squiz Digital Experience Platform (DXP) Console.

Test your component in the local development server

You can test your component on the local development server.

  1. Run the local development server as shown in Test using the local development server.

  2. View the list of components in the browser.

  3. Select the component you want to test.

    This image shows the list of components offered up by the local development server in the browser. The cursor is on helloworld2 version 2.0.0

  4. Look at the URL. There is a ?_previewKey=<name-of-preview> parameter, which will default to the first of the previews configured in your manifest file.

    This image shows the URL for the component being tested. The previewkey parameter and name of the preview are highlighted in red.

  5. To view an alternative preview, change _preview=<name-of-preview> to _preview=<other-preview> - these are the names from the preview section in your manifest.json file.

    For example, a component can have preview-1 and preview-2 defined in the manifest.json file. The image above shows preview-1 as the default because it is the first preview defined in the manifest.json file. To test preview-2, change ?_previewKey=preview-1 to ?_previewKey=preview-2. You will now see the component as defined in preview-2.

Test your component in the DXP Console

You can also test your component in the DXP Console.

  1. Deploy your component as shown in Deploy your component to the DXP.

  2. Go to the DXP Console Component Service section.

    1. Select All components.

    2. Select your component.

      Make sure you select the version number you want to test.

  3. Under the Previews heading, click on the tab with the preview name you want to test.

    This gif shows the two preview tabs on the DXP representing the two previews defined in the manifest.json for this component. The cursor selects each one in turn

    Each tab shows the component as defined in each preview.

The image above shows previews based on the example manifest.json file in Preview configuration.