Live dev component - Fluid Topics - Latest

Design a Custom Component

Category
How To
Audience
public
Version
Latest

When configuring relatively complex custom components, it may be helpful to configure a Live dev component fist and then convert it into a custom component. A live dev 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 dev component is as follows:

  1. Locate the Live component in the components library.
  2. Drag the custom component from the library to the canvas.
  3. Double-click the component to display a window displaying instructions.
  4. 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>
    
  5. Create the following files in a local directory:

    • page.html
    • style.css
    • script.js
  6. Convert the live dev component into a custom component.

Unconverted live dev components make it impossible to publish a page because they are only intended to be used for development purposes.