Frontend Studio Releases

From Trace view in the Developer area, you can now see the traces of API calls by using request IDs either from Humio or from your browser's developer console.

This feature improves frontend observability capabilities because it helps you with performance monitoring and debugging.

From the Continuous Integration area, Studio users with Admin or Developer roles can now delete builds in bulk.

Additionally, we have added a search functionality to help you easily find specific builds. You can search for a build by its branch name or short commit hash.

You now receive a notification in the Studio to inform you when a deployment is complete and if it was successful. This means you don't have to wait and refresh the Deployment page while waiting for your deployment to complete.

This feature makes it easier to track your deployments. Previously, you had to manually refresh the Deployment page to check whether your build has been deployed.

We updated the order of the Developer area in the Studio so that the most used areas appear first, to allow for faster and easier navigation.

Also, we renamed the Schemas tile to Other schemas.

For more information, see the Developer area overview.

From the Continuous Integration area, Studio users with Admin or Developer roles can now delete builds.

This helps you to discard builds that you do not want deployed to your production site.

When you delete a build, both the backend build and the frontend build from Netlify are deleted.

In the Continuous Integration area, the frontend build statuses now include Not applicable and Expired to provide a more accurate display of the build status.

Earlier, for scenarios that are now captured by the new statuses, the Pending and Canceled statuses were used, even though they did not reflect the actual build status.

From the Data sources area, you can now see where a data source is used. This eases your work on data source schemas and aligns the settings pane with the one for Frontend components.

To see where a data source is used, navigate to Developer > Data sources, select the data source, and expand the Data source usage section. Then, click the listed items to access them.

The following usability enhancements and bug fixes are now available in the Studio.

Enhancements

• In the Site builder and Dynamic pages areas, you can no longer schedule, make live, or mark as default a page version that contains Frontend components that are missing a required field. This helps reduce errors and consequent issues on your website. Previously, you were only warned not to publish the page version.
• In the Deployment area, when clicking Deploy frontend and backend in the Staging or Production section, the dialog displays the builds that you can deploy for that environment based on your Netlify settings. If a build cannot be deployed in production, it appears in the list of the production builds but it is greyed out. This ensures that you can only release deployable builds, thus reducing errors.
• In the Site builder area, when working in the Staging or Development environment, you can now use a checkbox to display only the page folders relevant for that environment. This helps you identify the page folders you can edit.
• From the user account menu you can now see both your name and email address. Additionally, the links to the Merchant Center, Netlify, and Humio now appear as buttons.

Bug fixes

• You can now use spaces in page version names.
• When a page version is waiting for review, you can now see the Frontend component settings.
• In the email notification requesting a page version review, the link to the page now contains the project.
• The page builder's UI now appears correctly. Previously, some visualization problems occurred.

In the Site builder area, you can now change the order of page folders by clicking the Sort folders button.

You can use the button to change the order page of folders that are on the same level and within the same parent page folder. If you want to move a page folder into a new parent page folder, you must do it from the Page folder settings dialog as before.

We improved the performance of the initial loading of page folders and the related page versions in the Site builder area.

Additionally, to move a page folder you can no longer drag it, instead you must select the new position from its settings. This aligns the steps for moving page folders with those for creating them.

We've introduced four new user roles in the Studio:

• Collaborator
• Developer
• Junior developer
• Viewer

These new roles let you assign more granular permissions to users and improve collaboration without compromising access control.

To align with the new roles, we've updated the assigned roles for existing users as follows:

• The Lead Editor role is now called Editor.
• The legacy Editor role is now called Collaborator.

To learn more about the new roles and permissions, see Using Team.

From Continuous Integration in the Developer area, you can now access the frontend build logs for your sites without accessing Netlify.
This will help you with debugging because you can check the build logs for both the backend and frontend of your site from the same place.

In the Deployment area of the Studio, we’ve made the following changes to improve your user experience and make your deployments easier to view:

• You can now choose to deploy only backend builds.

You can now access and restore previous versions of page versions, schemas, and component groups that were saved up to 90 days before. You can do it from:

• The Page builder for page versions
• The Schema editor for schemas
• The Component group builder for component groups

Accessing version history directly from the builder/editor speeds up the inspection and restoration of previous versions of your work.

In the Dynamic pages area you can now use the page rule criteria builder when creating dynamic page rules.

From Frontend previews in the Developer area, you can now access the deploy previews for your project's sites on Netlify (for example, the staging and the production sites).

This saves you time and eases your workflows because you no longer need to access Netlify to see your deploy previews or share the preview links.

The Media area now provides an improved user experience to search and manage the media items of your website more easily.
Additionally, a new error message warns you about mismatches on frontend and backend deployments.

As announced, you can now use a Git hosting service of your choice for the repository of your commercetools Frontend project. To support this feature, the Studio underwent the following changes:

• Added the API Keys area, where you can manage your API keys.
• The Continuous Integration area now support builds from custom CI environments.

We fixed two bugs on the Page folders list in the Site builder area.
When scrolling the list, it scrolled endlessly and displayed wrongly. Additionally, the list loaded incorrectly if it contained many page folders. Both scrolling and loading now work as expected.

You can now create new page folders and page versions using dedicated buttons, New page folder and New page version, in the new Site builder area. This update simplifies the user experience for creating new page folders and page versions, compared to the previous design.

We fixed a bug in the availability of new schemas. When creating or uploading a schema from the Studio and then using it right after, you needed to refresh the page in your browser to make the schema available.
For example, when you were creating a schema for a Frontend component and then wanted to add the component to a page version right away, you needed to refresh the page builder page in your browser. Or, if you uploaded a schema of a dynamic page, the dynamic page would not appear in the Dynamic pages area and you had to refresh the browser page for it to be available.
Now, schemas are available immediately after creation without having to refresh the browser.

From the new Studio navigation menu, you can access the documentation or reach out to the Frontend support team. You can also expand or collapse the navigation menu with the expander arrow.

We fixed a bug in the update process of component groups.
When you edit a component group, it will be updated on all page versions where it is used. Earlier, the update process followed the page folders order. This caused page versions that were not in a live status to be updated before page versions that were live, and the process could take longer than expected. Now, live page versions are updated before others, thus ensuring that the changes to the component group are displayed on your live website in a short time.

Additionally, it is now easier to identify the selected data source filter thanks to the new border color.

You can now collaborate with teammates by commenting on page versions, component groups, and page templates. You can also tag users in comments and assign them to review page versions.

In addition, you will also receive notifications regarding updates to pages that you follow. To learn more about comments, notifications, and reviews, see Collaboration.

As announced, commercetools Frontend now has a multi-tenant backend architecture. The Studio underwent the following changes to support the new architecture:

• Sandboxes is no longer available in the Developer area.
• From Deployment in the Developer area, you can now deploy the frontend and backend of your website at the same time.
• Using the Project schema and the Project area, you can now manage additional project configurations, such as API credentials.

Our documentation is updated to reflect the changes.

From the Components area, you can now upload multiple Frontend component schemas files at the same time.

To upload multiple files, select them from your computer and drag them to the page. After uploading the files, you can edit, validate, and publish the schemas one after another in the schema editor.

This speeds up and facilitates the process to create Frontend components.

You can now see the preview of data fetched from a data source when setting the data source's filters. The preview is available both in the Frontend component's settings and in the data source filter editor.

With this preview, you can see the data retrieved from a data source according to the filters you set, without having to check the preview of the entire page.

To activate the preview, you must add preview data for the Studio.

As of today, you can monitor the commercetools Frontend system status and metrics from the general commercetools system status page. This will allow you check the status of commercetools Frontend and Composable Commerce at a glance from the same place, instead of from two different pages.

From the commercetools system status page, you can also subscribe to be notified of status updates.

The old commercetools Frontend system status page will no longer be available.

{/* vale commercetools.Acronyms = NO */}

Protecting your privacy is crucial for our business, and we're committed to being a responsible, trustworthy custodian of our personal information. For this reason, we've added cookie consent to the Studio.

We're asking for cookie consent mainly for two tools: FullStory and UserGuiding.

FullStory allows us to understand how you’re using the Studio. We don't gather personal information. We only collect usage information to understand how to improve our product and deliver the best user experience.

UserGuiding allows us to create in-app notifications about the latest releases, create tutorials on using those features, and help onboard new users. We don't gather personal information, and it's only to deliver information about the Studio to you.

Cookie settings are of two types:

• Strictly necessary: Enables UserGuiding, but FullStory stays turned off.

• Performance: Enables both UserGuiding and FullStory.

To change your cookie settings, reactivate the cookie consent banner by clearing the cookies from your browser settings. Then, select your preference using the cookie consent banner.

You can find our privacy notice for the Studio below.

You can now turn an existing page version into a page template. You can do it from the Site builder area and from the page builder while editing the page version.

After creating the page template, you can edit it in the Templates area.

This way, if you create a page version that can be reused in your commercetools Frontend project, you can easily make it a template.

In the Site builder, you can now duplicate a page folder keeping its settings and the associated page versions.

Previously, to make a copy of a page folder, you had to manually create a page folder and configure it with the same settings and page versions as the page folder you wanted to copy.

From the Redirects area you can now upload a CSV file containing multiple redirects to be added to your commercetools Frontend project.

Before, the commercetools Frontend support team was in charge of importing bulk redirects, now you can do it autonomously. This speeds up the migration process to commercetools Frontend.

In the Site builder, you can now set the page version locale by selecting it from a drop-down menu when creating, editing, or duplicating a page version.

In the page builder, you can now move between page versions using the page versions drop-down.

Apart from the above feature, here are other two enhancements coming with this release:

• The sandbox debugging modal is now consistent with the Studio design system. The transient sandboxes will appear grayed out while they're unusable.
• You'll now see the information about each role in the invitation drop-down when inviting a user to the Studio. This will help you decide which role to assign to your new user.

You can now duplicate, schedule, and publish page versions from the page builder. Read more about actions in our page builder documentation.

Apart from the above feature, here are some other enhancements coming with this release:

• Clicking on Save or Publish in the page builder will keep you in the page builder. You can save your changes and complete other actions without leaving the site builder.
• You can now access the Merchant Center login page by clicking on the profile icon and selecting Merchant Center.
• You'll see an information notification within the preview of a component schema to clarify the correct usage.
• You can now duplicate the component setting inputs of a group type field.
• The color of primary buttons is now updated to commercetools brand green.
• All documentation links now point to the commercetools Frontend documentation website.

Bug fixes

• We fixed a bug on translatable fields containing links. If the field was within a group and was not the first field, the link was not saved.
• We fixed a bug on the schema editor buttons that were displayed incorrectly on small screens.

As you already know, commercetools acquired Frontastic in November 2021. As a step towards the post merger integration, we've rebranded the Frontastic Next.js offering as commercetools Frontend.

{/* vale commercetools.DiscriminatoryWords = NO /} {/ vale commercetools.DateFormat = NO /} {/ vale commercetools.Product = NO /} {/ vale commercetools.DateFormat = NO /} {/ vale commercetools.PortfolioNaming = NO /} {/ vale commercetools.Weasel = NO /} {/ vale commercetools.Incomplete = NO /} {/ vale commercetools.WordList-CaseSensitive = NO /} {/ vale commercetools.WordList = NO */}

The release notes published before 4 November 2022 are archived below.