Architecture and stack

Learn about the architecture and technology stack of commercetools Frontend.

Architecture overview

commercetools Frontend architecture consists of the following parts:

Developer tooling
Studio
API hub
Frontend delivery

A diagram of commercetools Frontend architecture

Developer tooling

We provide the tools you need to build, deploy, and iterate on your website. This includes the CLI, a customer GitHub repository, Continuous Integration, and more.

Studio

The Studio is a commercetools Frontend management interface that lets business users and developers build, edit, and manage a commercetools Frontend website.

API hub

The API hub is the backend for frontend in commercetools Frontend. It contains the extension runner, and also acts as the orchestration layer that relays the data your website requires, for example, the page layout information during server-side rendering or Data source response for your Frontend components.

Frontend delivery

We provide the delivery layer that delivers your website to your customers. It uses Next.js to serve a Progressive Web App (PWA) optimized for performance and mobile-first. The delivery layer also manages server-side rendering (SSR), auto-scaling, and fail-safe hosting.

commercetools Frontend stack

We built our technology stack on industry-standard tools and frameworks chosen for their reliability, performance, and strong community support.

Next.js

Next.js is our primary React framework. Next.js offers flexibility in rendering, including server-side rendering, static site generation, and client-side rendering. This versatility allows developers to optimize for performance and search engine optimization (SEO) as needed.

While Next.js provides the foundational structure, you have the freedom to organize your codebase according to your preferred patterns. We recommend structuring your application using well-defined React components and extracting complex business logic into pure JavaScript or TypeScript modules that are decoupled from your UI.

TypeScript

TypeScript is used for both frontend and backend development. TypeScript is statically typed and provides the following benefits:

Enhanced Integrated Development Environment (IDE) support with autocompletion and refactoring tools.
Compile-time error checking for reducing runtime errors.
Improved code documentation through explicit type definitions.

These features contribute to a more robust and maintainable codebase, especially when working with complex APIs and data structures.

Yarn

We use Yarn as our package manager for JavaScript and TypeScript dependencies.

Architecture and stack

Architecture overview.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Developer tooling.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Studio.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

API hub.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Frontend delivery.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

commercetools Frontend stack.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Next.js.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

TypeScript.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}

Yarn.css-c0cbbx{display:inline-block;}.css-c0cbbx >:disabled{pointer-events:none;}.css-ik49mw{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.css-ik49mw *:not([fill='none']){fill:inherit;}.css-ik49mw,.css-ik49mw image{width:24px;height:24px;}