This is the early access documentation preview for Custom Views. This documentation might not be in sync with our official documentation.

Architecture and stack

Learn about the architecture and technology stack of commercetools Frontend.

Architecture overview

commercetools Frontend architecture consists of the following parts:

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

Our technology stack consists of community-proven applications, tools, frameworks, and components.

Next.js

When working within development, you will mainly use React as provided by Next.js.

You can choose the frontend development pattern and approach you prefer. Behind the JSX/TSX entry point of a Frontend component, you can break down the frontend experience into any number of React components and regular JavaScript files.

We recommend structuring your code in well-designed React components. We also recommend extracting complex logic into independent, pure JavaScript classes decoupled from React and HTML interaction.

TypeScript

commercetools Frontend uses TypeScript by default for any backend extension. This lets you work with APIs using auto-completion in your IDE and safety checks at compile time to prevent bugs.

Yarn

We use Yarn as our package manager for JavaScript.