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:
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.