Add code to your manifest file

After adding a function to the JavaScript file, you need to reference that function in the manifest.json file. Referencing the JavaScript function will tell the service to use that JavaScript to render the component.

Before you start

You must have already added the base code to your manifest.json file:

{
  "$schema": "http://localhost:3000/schemas/v1.json#",
  "name": "helloworld1",
  "version": "1.0.0",
  "mainFunction": "main",
  "displayName": "Hello World test component",
  "namespace": "test-components",
  "icon": {
    "id": "list_alt",
    "color": {
      "type": "hex",
      "value": "#2D2D2D"
    }
  },
  "description": "This component is set up as a demonstration component for Hello World documentation purposes."
}

Read File structure - manifest.json for more information about this code,

Steps

Add an entry to the functions array in your manifest.json file:

"functions": [                  (1)
    {
      "name": "main",           (2)
      "entry": "main.cjs",       (3)
      "input": {                (4)
        "type": "object",
        "properties": {
          "text": {
            "type": "string"
          }
        },
        "required": []          (5)
      },
      "output": {               (6)
        "responseType": "html"
      }
    }
  ]

1	`functions` defines an array of one or more functions that are used to render the component. Multiple functions can be useful when you want both an HTML and a JSON view of your content, or you want to create an interactive component that uses different JSON end points as mini APIs to load data.
2	`name` within the function will match the name `main` in the `mainFunction` field of the manifest. This tells the Component Service which function to use for the primary component rendering. The name must always be in lower case without spaces.
3	`entry` contains the file name of the JavaScript file containing your function.
4	`input` defines your content model or data structure. This will be used to automatically generate the editing experience for the component. We are defining a single string called `text` for this example. This is the input we referenced in Add a JavaScript function to render your component with `${input.text}`.
5	`required` specifies which input fields are required and is used to validate the fields provided in the generated component interface. The `required` field is mandatory, so if you do not need any required fields, you will need to specify an empty array, as shown in this example.
6	`output` specifies the `responseType`, either HTML or JSON. In this case, we want it to be HTML because we are rendering a front end.