Manage project configuration
You can use project configuration to store project-level variables, such as feature flags, API credentials, and access tokens.
Project configuration in commercetools Frontend is similar to storing your credentials in a
.env file, except you store the credentials using the studio and access them from the extension handler through the
Store project configuration in the studio
To store project configuration in the studio, follow these steps:
Add project configuration fields to the project schema
To add project configuration fields, follow these steps:
From the studio home page or from the left menu, go to Developer > Schemas.
Click Project schema: the Project schema pane opens.
Click Edit schema: the schema editor opens.
Extend the project schema with the appropriate field types. For example, a
booleanfield might be suitable for a feature flag, while
encryptedfields should be used for secret credentials, such as an API key. For more information about schema fields, see Schemas.
Click Validate and Publish.
For demonstration purposes, the following schema adds the
APP_ID fields in the
Project credentials section of the project schema. By extending the project schema with these fields, a Project credentials section with the Enter API key and Enter APP ID fields is displayed in the Project area of the studio.
The project schema fields must be unique throughout the schema because they are flattened in the API hub. Duplicate keys will be lost causing bugs.
Encryption is a compute heavy task. Use
encrypted fields only for secret credentials. Overusing
encrypted fields can slow down your application.
Enter project configuration values in project settings
To enter the project configuration values, follow these steps:
From the studio home page or from the left menu, go to Project.
Enter the configuration values in the fields of the relevant section.
You cannot see the values of encrypted fields once they are saved, but you can edit them.
The project configuration values are unique to the studio environments. Therefore, you must enter them for each environment you need.
Read project configuration
When executing an extension, the API hub reads the project configuration values from the studio, decrypts the
encrypted fields, and passes them to the extension handler
context parameter inside the
Read project configuration in an extension handlers
You can access the specified variables through the
context property that is passed as the second argument to your extension handlers. The following example shows how to read the
API_KEY configuration value in extensions.
Override the project configuration during development
projectConfiguration is shared across all developers working on the same project. However, sometimes you need to use a different value for some credentials locally without changing the value in the studio.
To override the project configuration during development, you can create a wrapper function in your code to read the
projectConfiguration and conditionally return the credential based on the execution environment.
In the following example, the
getFromProjectConfig function checks if the required credential exists in the
projectConfigurationOverrides local object and returns it from there instead of from