Add environment variable configuration to your manifest.json file
You must add environment variable configuration to the top level of the manifest.json file for a component.
"environment": [
{ "name": "BRAND_PRIMARY_COLOR", "required": true },
{ "name": "NON_MANDATORY_VAR", "required": false }
],The environment field defines which environment variables can be made available for this component and also which of those are required. A component loaded without the required environment variables set will return an error.
Any environment variables set to "required": true will mean your component preview cannot render in the Squiz Digital Experience Platform (DXP) Console.
If you want your preview to render in the DXP Console, set the environment variable as "required": false, and handle the default state in your JavaScript code.
|
Expand the block below to see an example of a manifest.json file that includes the environment variables.
Sample manifest.json file
Expand to see the manifest.json file with environment variable set up
{
"$schema": "http://domain-name/schemas/v1.json",
"name": "helloworld1",
"version": "1.0.0",
"mainFunction": "main",
"displayName": "Hello World test component",
"namespace": "test-components",
"environment": [
{ "name": "BRAND_PRIMARY_COLOR", "required": true },
{ "name": "NON_MANDATORY_VAR", "required": false }
],
"icon": {
"id": "list_alt",
"color": {
"type": "hex",
"value": "#2D2D2D"
}
},
"description": "This component is set up as a demonstration component for documentation purposes.",
"functions": [
{
"name": "main",
"entry": "main.cjs",
"input": {
"type": "object",
"properties": {
"text": {
"type": "string"
}
},
"required": []
},
"output": { "responseType": "html" }
}
],
"previews":
{
"firstpreview": {
"functionData": {
"main": {
"inputData": {
"type": "inline",
"value": {
"text": "Text supplied to previews function."
}
},
"wrapper": {
"path": "preview-wrapper.html"
}
}
}
}
}
}