Help Center

Menu

Build a basic Hello World component

These instructions will guide you through building a basic component using the Component Service, Squiz DXP (DXP), and Matrix.

Complete each step before going on to the next.

Prerequisites

Some tasks must be performed before you start to use Component Service. Read Prerequisites in the Getting started page to make sure you are ready to go.

Goals

At the end of these instructions, you will have achieved the following:

  • Created the file structure for your component.

  • Tested your component in your local development environment.

  • Deployed your component to the DXP.

  • Created a component set in the DXP.

  • Deployed your component to Matrix.

  • Tested your component in Matrix.

Steps

There are nine steps to building your basic Hello world site. You can develop and test in your local development environment before deploying to the DXP and your Matrix site. The following instructions are separated into tasks performed in your local environment, tasks performed in the DXP, and tasks performed in your Matrix environment.

Begin in your local development environment:

  1. Create component package file structure

  2. Add a JavaScript function to render your component

  3. Add code to your manifest file

  4. Set up your local preview

  5. Test using the local development server

Deploy your component to the DXP:

  1. Deploy your component to the DXP

  2. Add the component to a component set

Add your component to Matrix:

  1. Add a component set to a Matrix site

  2. Add your component to a Matrix page