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