Live component procedure - Fluid Topics

When configuring relatively complex Custom components, it may be helpful to configure a Live component first, and then convert it into a Custom component.

A Live component behaves like a standard Custom component. However, instead of using the Custom component editor, the integrator or designer hosts the code on their own computer. The main advantage is the ability to edit different versions of the code with a preferred editor.

The procedure to configure a Live component is as follows:

1. Drag and drop the Live component from the library to the canvas.
2. Double-click the component to display a window displaying instructions.

3. Start a local server.

   An example of a local server is http-server, which can be started by running the following command:

   npx http-server --cors -c-1 --port 8080 <directory>
   

4. Create the following files in a local directory:

   • page.html
   • style.css
   • script.js

5. Convert the Live component into a Custom component.