# Frontend study guide

This guide is for both frontend and backend developers. A mutual understanding of both domains is essential for effective collaboration and a cohesive view of the platform's architecture.

**Prerequisites:** You should be familiar with React and Next.js development and have access to a commercetools Frontend project and a Composable Commerce Project before working through these topics.

**How to use this guide:** Work through the sections in order for a complete development journey, or jump to the section that matches your current task. Each section is self-contained and links to the canonical reference or how-to guide for that topic.

**Expected outcome:** After working through this guide, you can set up a local development environment, build and configure Frontend components and backend extensions, use the Frontend SDK and APIs, deploy your project, and maintain it through migrations and updates.

#### Understand commercetools Frontend

- [Frontend general overview](/frontend-development/overview.md)
- [Moving to commercetools Frontend](/frontend-development/moving-to-commercetools-frontend.md)
- [Content management and delivery](/frontend-development/frontend-and-headless-cms.md)

#### Understand the architecture

- [Architecture and stack](/frontend-development/architecture-and-stack.md)
- [Frontend APIs general concepts](/frontend-api/general.md)
- [Frontend SDK overview](/frontend-development/frontend-sdk.md)

#### Learn core development concepts

- [Main development concepts](/frontend-development/development-concepts.md)
- [Frontend components overview](/frontend-development/frontend-components.md)
- [Extensions overview](/frontend-development/extensions.md)
- [The Frontend application context](/frontend-development/the-context.md)
- [Commerce types](/frontend-development/commerce-types.md)

#### Get started with Frontend Studio

- [Studio overview](/frontend-studio/overview.md)
- [Accessing the Studio](/frontend-studio/accessing-the-studio.md)
- [Working with environments](/frontend-studio/using-environments-in-the-studio.md)

#### Set up a project and apply best practices

- [Decisions to consider before getting started](/frontend-development/decisions-to-consider.md)
- [Project setup](/frontend-development/project-set-up.md)
- [Repository structure](/frontend-development/developer-guide.md)
- [Coding guide](/frontend-development/coding-guide.md)
- [Code splitting](/frontend-development/code-splitting.md)

#### Use the commercetools Frontend CLI

- [commercetools Frontend CLI](/frontend-development/cli.md)

#### Set up a project locally

- [Start developing your site](/frontend-development/developing-your-site.md)
- [Set up a custom Git repository (optional)](/frontend-development/set-up-custom-repository.md)

#### Manage project configuration

- [Studio project settings](/frontend-studio/managing-project-settings-in-the-studio.md)
- [Manage project configuration](/frontend-development/api-hub-configuration.md)
- [Page folder schema](/frontend-development/page-folder-schema.md)

#### Use components in the Studio

- [Components in the Studio](/frontend-studio/using-components-in-the-studio.md)
- [Component settings in the Studio](/frontend-studio/frontend-component-settings.md)
- [Component groups in the Studio](/frontend-studio/component-groups.md)
- [The component group builder in the Studio](/frontend-studio/using-the-component-group-builder.md)

#### Manage pages in the Studio

- [Site builder overview](/frontend-studio/using-the-site-builder.md)
- [The page builder](/frontend-studio/using-the-page-builder.md)
  - [Page preview section](/frontend-studio/using-the-page-builder.md#preview-section)
- [Page folders](/frontend-studio/page-folders.md)
- [Page versions](/frontend-studio/page-versions.md)
  - [Page version history](/frontend-studio/using-the-page-builder.md#version-history-pane)
- [Duplicate page versions or edit a live page version](/frontend-studio/duplicating-page-versions.md)
- [Schedule page versions](/frontend-studio/scheduling-page-versions.md)
- [Schedule navigation changes](/frontend-studio/scheduling-navigation-changes.md)
- [Page templates](/frontend-studio/page-templates.md)
- [Create anchor points](/frontend-studio/creating-anchor-points.md)
- [Redirects](/frontend-studio/redirects-in-the-studio.md)

#### Design Frontend components

- [How to slice a commerce site into components](/frontend-development/how-to-slice-a-commerce-site-into-components.md)
- [Style your site](/frontend-development/styling-your-site.md)

#### Create Frontend components

- [Frontend components overview](/frontend-development/frontend-components.md)
- [Work with environments as a developer](/frontend-studio/using-environments-in-the-studio.md#work-with-environments-as-a-developer)
- [Create a Frontend component](/frontend-development/creating-a-frontend-component.md)
- [Create a configurable Frontend component](/frontend-development/creating-a-configurable-frontend-component.md)
- [Project and page folder schemas in the Studio](/frontend-studio/using-schemas-in-the-studio.md)
- [Use the schema builder in the Studio](/frontend-studio/using-the-schema-builder.md)
- [Create a schema (for components, extensions, and configuration)](/frontend-development/schemas.md)
- [Create a full viewport component](/frontend-development/creating-a-full-width-component.md)
- [Create a redirect component](/frontend-development/client-side-redirect-component.md)
- [Read page folder configuration in Frontend components](/frontend-development/page-folder-schema.md#read-page-folder-configuration-in-frontend-components)
- [Work with links](/frontend-development/working-with-links.md)

#### Integrate and update Frontend components

- [Add a Frontend component schema in the Studio](/frontend-studio/using-components-in-the-studio.md#add-a-frontend-component-schema)
- [Update a Frontend component schema in code](/frontend-development/updating-a-frontend-component-schema.md)
- [Rename a Frontend component field](/frontend-development/renaming-a-frontend-component-field.md)

#### Manage media and internationalization

- [Media area](/frontend-studio/media-in-the-studio.md)
- [Locales and translations in the Studio](/frontend-studio/locales-and-translations-in-the-studio.md)
- [Internationalization](/frontend-development/internationalization.md)
- [Market permissions](/frontend-studio/market-permissions.md)

#### Use collaboration features

- [Collaboration features](/frontend-studio/collaboration.md)

#### Understand extensions

- [Studio developer area overview](/frontend-studio/using-the-developer-area-in-the-studio.md)
- [Extensions overview](/frontend-development/extensions.md)
- [The Composable Commerce extension](/frontend-development/using-the-commercetools-extension.md)

#### Develop data source extensions

- [Develop a data source extension](/frontend-development/developing-a-data-source-extension.md)
- [Create a Frontend component with a data source](/frontend-development/creating-frontend-component-with-a-data-source.md)
- [Read page folder configuration in data sources](/frontend-development/page-folder-schema.md#read-page-folder-configuration-in-data-sources)
- [Dynamic configuration from the browser when requesting a data source](/frontend-development/dynamic-configuration-from-the-browser.md)
- [Dynamic filters for data sources and dynamic pages](/frontend-development/dynamic-filters-for-data-sources-and-dynamic-pages.md)

#### Manage data sources in the Studio

- [Data sources in the Studio](/frontend-studio/using-data-sources-in-the-studio.md)
- [The data source filter editor](/frontend-studio/using-the-data-source-filter-editor.md)

#### Use dynamic pages

- [Dynamic pages overview](/frontend-studio/dynamic-pages.md)
- [Dynamic pages in the Studio](/frontend-studio/using-dynamic-pages.md)
- [Dynamic pages in the developer area in the Studio](/frontend-studio/using-dynamic-pages-in-the-studio.md)

#### Develop dynamic page extensions

- [Develop a dynamic page extension](/frontend-development/developing-a-dynamic-page-extension.md)
  - [Add links to dynamic pages](/frontend-development/developing-a-dynamic-page-extension.md#add-links-to-dynamic-pages)
  - [Redirect from a dynamic page](/frontend-development/developing-a-dynamic-page-extension.md#redirect-from-a-dynamic-page)
- [Dynamic page rules](/frontend-development/developing-a-dynamic-page-extension.md#dynamic-page-rule)
  - [Frontend Entity Criterion Language (FECL)](/frontend-studio/using-fecl.md)
- [Client-side routing for dynamic pages](/frontend-development/client-side-routing-for-dynamic-pages.md)
  - [Create a film details page (dynamic page)](/frontend-development/client-side-routing-for-dynamic-pages.md#create-the-film-details-page)
  - [Create a films list page (data source)](/frontend-development/client-side-routing-for-dynamic-pages.md#create-the-films-list-page)

#### Build action extensions

- [Develop an action extension](/frontend-development/developing-an-action-extension.md)
- [How to call an action extension](/frontend-development/developing-an-action-extension.md#calling-an-action)
- [Frontend APIs - action](/frontend-api/action.md)
  - [Get data using an action](/frontend-api/action.md#get-data-using-an-action)
  - [Write data using an action](/frontend-api/action.md#write-data-using-an-action)

#### Use a session

- [Sessions in commercetools Frontend](/frontend-development/using-a-session.md)

#### Understand and use the Frontend SDK

- [Frontend SDK overview](/frontend-development/frontend-sdk.md)
- [Install the Frontend SDK](/frontend-development/installing-the-frontend-sdk.md)
- [Version 2 of the Frontend SDK](/frontend-development/using-the-frontend-sdk.md)
  - [Configure the SDK](/frontend-development/using-the-frontend-sdk.md#configure-the-sdk)
  - [API methods](/frontend-development/using-the-frontend-sdk.md#api-methods)

#### Use SDK integrations and the event engine

- [Add SDK integrations](/frontend-development/using-the-frontend-sdk.md#add-sdk-integrations)
- [Develop integrations for version 2 of the Frontend SDK](/frontend-development/developing-sdk-integrations.md)
  - [Create the SDK integration](/frontend-development/developing-sdk-integrations.md#create-the-sdk-integration)
  - [Implement the SDK integration](/frontend-development/developing-sdk-integrations.md#implement-the-sdk-integration)
- [The event engine](/frontend-development/using-the-frontend-sdk.md#the-event-engine)
  - [Implement event handling](/frontend-development/developing-sdk-integrations.md#implement-event-handling)

#### Understand and use the Frontend APIs

- [Frontend APIs general concepts](/frontend-api/general.md)
- [Frontend APIs type representations](/frontend-api/types.md)
- [The context Frontend API](/frontend-api/context.md)
- [The page Frontend API](/frontend-api/page.md)
- [The page preview Frontend API](/frontend-api/preview.md)
- [The action Frontend API](/frontend-api/action.md):
  - [Get data using an action](/frontend-api/action.md#get-data-using-an-action)
  - [Write data using an action](/frontend-api/action.md#write-data-using-an-action)

#### Understand deployment workflows

- [Deployment overview](/frontend-development/deployment.md)
  - [Branch deployments](/frontend-development/deployment.md#branch-deployments)
  - [How backend and frontend builds are connected](/frontend-development/deployment.md#how-backend-and-frontend-builds-are-connected)
- [Continuous Integration area in the Studio](/frontend-studio/using-the-ci-area.md)
- [Continuous integration](/frontend-development/continuous-integration-ci.md)

#### Deploy your project

- [Deployment in the Studio](/frontend-studio/using-deployment-in-the-studio.md)
  - [Deploy your project via a custom Git repository (optional)](/frontend-development/set-up-custom-repository.md#deploy-your-project)
  - [Test your build](/frontend-development/deployment.md#test-the-build)
  - [Deploy your build](/frontend-development/deployment.md#deploy-a-build)
  - [View deployment details](/frontend-development/deployment.md#view-deployment-details)
- [Frontend previews](/frontend-studio/using-the-frontend-previews-area.md)
- [Roll back a deployment](/frontend-development/deployment.md#roll-back-deployment)

#### Complete pre-go-live checks and administrator tasks

- [Go-live preparation](/frontend-development/go-live-preparation.md)
- [API keys](/frontend-studio/using-the-api-keys-area.md)
- [Manage your team](/frontend-studio/managing-your-team-in-the-studio.md)
- [Configure a firewall policy](/frontend-development/configure-a-firewall-policy.md)
- [Create sitemaps](/frontend-development/sitemaps.md)

#### Understand store launchpads

- [Store launchpads overview](/frontend-development/launchpad-overview.md)
- [Best practices for launchpad accessibility](/frontend-development/launchpad-accessibility.md)
- [Best practices for launchpad performance](/frontend-development/launchpad-performance.md)

#### Use the B2C store launchpad

- [Store Launchpad for B2C Retail overview](/frontend-development/b2c-store-launchpad-overview.md)
- [B2C sample data](/merchant-center/getting-started/explore-b2c-sample-data.md)
- [B2C launchpad - Composable Commerce functionalities](/frontend-development/b2c-store-launchpad-composable-commerce.md)
- [B2C launchpad - testing](/frontend-development/b2c-store-launchpad-overview.md#testing)
- [B2C launchpad - checkout](/frontend-development/b2c-checkout.md)

#### Use the B2B store launchpad

- [Store Launchpad for B2B Manufacturing overview](/frontend-development/b2b-store-launchpad-overview.md)
- [B2B sample data](/merchant-center/getting-started/explore-b2b-sample-data.md)
- [B2B launchpad - Composable Commerce functionalities](/frontend-development/b2b-store-launchpad-composable-commerce.md)
- [B2B launchpad - testing](/frontend-development/b2b-store-launchpad-overview.md#testing)
- [Approvals](/frontend-development/b2b-buyer-approval-flows.md)
- [Checkout](/frontend-development/b2b-checkout.md)

* [Integrations overview](/frontend-development/integrations-overview.md)
* [Integrate commercetools Frontend with a headless CMS](/frontend-development/integration-of-frontend-with-headless-cms.md)
* [Algolia (B2C store launchpad)](/frontend-development/algolia.md)
* [Google Tag Manager (B2C store launchpad)](/frontend-development/google-tag-manager.md)
* [SendGrid (B2C store launchpad)](/frontend-development/sendgrid.md)
* [Amplience](/frontend-development/amplience.md)
* [Bloomreach](/frontend-development/bloomreach.md)
* [Contentful](/frontend-development/contentful.md)
* [Contentstack](/frontend-development/contentstack.md)
* [Dynamic Yield](/frontend-development/dynamic-yield.md)
* [Nosto](/frontend-development/nosto.md)
* [Talon.One](/frontend-development/talon-one.md)

- [Trace view](/frontend-studio/using-the-trace-view-area.md)
- [Logging](/frontend-development/logging.md)

#### Migrate the Frontend SDK

- [Frontend SDK version 1 overview](/frontend-development/frontend-sdk-v1.md)
- [Version 1 of the Frontend SDK](/frontend-development/using-the-frontend-sdk-v1.md)
- [Develop integrations for version 1 of the Frontend SDK](/frontend-development/developing-sdk-integrations-v1.md)
- [Migrate the B2C store launchpad to version 2 of the Frontend SDK](/frontend-development/migrating-v2-base-sdk-b2c.md)
- [Migrate the B2B store launchpad to version 2 of the Frontend SDK](/frontend-development/migrating-v2-base-sdk-b2b.md)

#### Migrate Node.js versions

- [Node.js support plan](/frontend-development/node-version-support.md)
- [Migration steps (Node.js)](/frontend-development/node-version-support.md#migration-steps)
  - [Migrate launchpads to Node.js 24](/frontend-development/node-launchpad-migrations.md)
- [Node.js 18 backend compatibility](/frontend-development/node-18-backend-compatibility.md)

#### Migrate Next.js versions

- [Migrate the B2C store launchpad to Next.js 14](/frontend-development/b2c-nextjs14-migration.md)
- [Migrate the B2B store launchpad to Next.js 14](/frontend-development/b2b-nextjs14-migration.md)
- [Migrate store launchpads to Next.js 15](/frontend-development/nextjs15-migration.md)

## Related pages

- [Area overview page with navigation](/study-guides.md)
- [Next page: Order lifecycle study guide](/study-guides/order-lifecycle-study-guide.md)
- [Search documentation and API specs](/search.md)