Understand commercetools Frontend environments

Environments overview

commercetools Frontend comes with the following environments that you can access from the Studio, and they all use the same commercetools Composable Commerce Project.

Production: this environment is your live website, used by editors and content managers.
Staging: this environment is used to test features, such as Frontend components and data sources in the continuously deployed staging environment, and demo the project milestones to your stakeholders. This environment is primarily used by project managers and testers.
Development: this environment is used to test features that are still under active development.

Environments are tied to three different stages of the development lifecycle: development, testing, and publishing to customers. They help with isolating the features ready for your customers from the ones you're developing or testing. Frontend components (and other features) can only be used in the environments they've been activated for.

When updating features that require changes to the source code and the configuration file (schema.json), such as a Frontend component, you must ensure that the configuration file and source code are published together to avoid issues.

To select the environment a feature is available within, you can use the Environment selector in the related General settings section in the Studio.

Suggested development workflow

While you can adopt your own development workflow, we recommend the following workflow to use environments efficiently:

Engineers develop a new feature (for example, a new Frontend component) locally, typically on a feature branch. They test the feature using branch deployments and the development environment in the Studio.
After the test passes, developers merge the feature branch into the master branch, which is then automatically built and deployed to the staging environment. If needed, they also move the schemas to the staging environment in the Studio for the business users.
Business users can now use the feature in the staging environment and perform acceptance tests.
After testing is done and the newly developed features are approved, the business users can promote the build to the production environment. If needed, they also move the schemas to the production environment in the Studio.
Business users can now use the new feature in the Studio production environment and publish changes to the live website.