--- title: Shopware Frontends | Shopware Community Hub description: >- Explore the world of decoupled frontends in Shopware, learning about the architecture, technology stack, and implementation strategies for building modern,… canonical_url: 'https://hub.shopware.com/learn/unit/solutions-architect-shopware-frontends' --- # Shopware Frontends - Understand the concept of a **decoupled frontend** and its use cases. - Gain an **overview** of Shopware Frontends, its launch, and available resources. - Familiarize yourself with the **technology stack** used in Shopware Frontends. - Understand the **architecture** of Shopware Frontends and how it fits into a composable commerce landscape. # Shopware Frontends ## 1. What is a Decoupled Frontend, and When to Use It A decoupled frontend, also known as a headless frontend, is an architectural approach where the frontend and backend of an application are separated and communicate through APIs. This separation allows developers to use different technologies and frameworks for the frontend while relying on a separate backend system for business logic, data management, and other core functionalities. **When to Use a Decoupled Frontend:** - **JavaScript Stack Preference**: If your development team prefers working with modern JavaScript frameworks (like React, Vue.js, or Angular) and you want to use Shopware SaaS as your backend, a decoupled frontend allows you to take advantage of the flexibility and capabilities of these frameworks. - **Integration with Multiple Frontend Applications**: In scenarios where your project requires integrating various frontend-oriented applications such as a CMS, personalization tools, advanced search functionalities, and a hosted checkout system, a decoupled frontend provides the flexibility to connect these disparate systems effectively. - **Unique Design Requirements**: If your project has a unique design that deviates significantly from traditional ecommerce layouts, rebuilding the traditional frontend could lead to compatibility issues. A decoupled frontend allows for full customization without the constraints of a traditional monolithic architecture, enabling the creation of highly customized user experiences. It’s important to note that adopting a decoupled frontend introduces an additional application layer, which can increase complexity and development overhead in certain scenarios. However, the trade-off is often justified by the enhanced flexibility, scalability, and the ability to integrate with a wide range of tools and services. More information on when to use a decoupled frontend, and Shopware Frontends in particular, can be found [here](https://www.youtube.com/watch?v=A_O2nke4yoo). ## 2. Introduction to Shopware Frontends Shopware Frontends is a modern, decoupled frontend solution for Shopware, introduced to provide developers with the flexibility to build custom storefronts using a JavaScript-based stack. Shopware Frontends is designed more as a platform or toolset, less as a turn-key service. As such, it's set up to be highly customizable and to fit seamlessly into a composable commerce architecture, where different services and applications are integrated to create a tailored ecommerce solution. Shopware's Frontend relies on the powerful RESTful API layer provided by Shopware. It can be used with Shopware SaaS, PaaS, and OnPrem, as well as any type of license from Community to Beyond. **Origins of Shopware Frontends:** Shopware Frontends have their roots in Shopware PWA (Progressive Web App), which was initially introduced to provide a headless, API-driven storefront for Shopware. While Shopware PWA offered significant flexibility and performance benefits, the team recognized the need for a more versatile and future-proof solution that could cater to a wider range of use cases. This led to the development of Shopware Frontends, which not only incorporates the lessons learned from Shopware PWA but also significantly improves the Developer Experience. Shopware Frontends was designed to offer a more modern and comprehensive approach to building decoupled storefronts, providing developers with a powerful toolset and setting the platform up to be easier maintainable to ensure latest technologies and framework versions can be incorporated. **Key Resources:** - **Documentation**: Comprehensive guides and API references are available in the [Shopware Frontends Documentation](https://frontends.shopware.com/). - **GitHub Repository**: The source code and contributions can be accessed on [GitHub](https://github.com/shopware/frontends). - **Additional Resources**: The [Shopware Developer Portal](https://developer.shopware.com/) offers tutorials, community forums, and further reading materials. ## 3\. Shopware Frontends Tech Stack Shopware Frontends is built on a modern tech stack that leverages the latest web technologies to provide developers with a powerful and flexible foundation for building custom storefronts. **Core Technologies:** - **JavaScript/TypeScript** are the primary languages used in developing Shopware Frontends, providing a robust and type-safe environment for building scalable applications. - **Vue.js**: A progressive JavaScript framework used for building the frontend components of Shopware Frontends. Vue.js was chosen for its simplicity and flexibility, with an approachable learning curve. - **Node.js**: Used as a runtime environment for executing JavaScript code server-side, which is essential for server-side rendering (SSR) and other backend tasks in a decoupled frontend setup. - **Nuxt.js**: Nuxt.js enhances Vue.js by adding features like server-side rendering (SSR), which improve performance and SEO. It simplifies routing and code management through automatic routing and modular architecture, while also optimizing load times with code splitting. Nuxt.js integrates with Vuex for state management and provides built-in tools for error handling and hot-reloading. - **Tailwind CSS**: A utility-first CSS framework for styling the frontend components, allowing for fast UI development and customization. ## 4\. Architecture of Shopware Frontends The architecture of Shopware Frontends is designed to fit into a composable commerce landscape, where different components and services can be integrated to create a tailored ecommerce solution. The decoupled nature of Shopware Frontends allows for flexibility in integrating with various services and tools, enabling developers to build highly customized storefronts. **Communication with Shopware:** Shopware Frontends communicate with the Shopware backend primarily through RESTful APIs. This communication layer ensures that the frontend can access and manipulate data stored in the Shopware backend, such as products, categories, orders, and customer information. Shopware's API-first approach ensures that all backend functionalities are accessible via these APIs, providing a consistent and flexible interface for the frontend. **Compatibility with Shopware Components:** Shopware Frontends is fully compatible with core Shopware components, including the CMS (Shopping Experiences), checkout, and various commercial modules such as B2B Components and Sales Agent features. This compatibility ensures that developers can build rich, feature-complete storefronts that leverage the full power of Shopware's backend services. **Composable Commerce and Shopware Frontends:** Different services and applications are integrated in a composable commerce architecture to create a flexible, scalable, and customized ecommerce solution. Shopware Frontends play a critical role in this architecture by providing the frontend layer that interfaces with these services. Whether it's integrating with a headless CMS, implementing personalized experiences, or connecting to third-party search and recommendation engines. **Philosophy and Toolset:** Shopware Frontends offers a flexible toolset that caters to developers with varying levels of expertise and needs: - **Vanilla JavaScript SDK**: The SDK wraps the Shopware RESTful APIs in a library of functions. - **TypeScript Composables**: Offers more structure and safety with type annotations. The composables handle logic complexity, making sure less Shopware-specific knowledge is required. - **Vue.js Components**: Highly opinionated and ready-to-use components that enable rapid development of storefronts, with the flexibility to customize as needed. This layered approach allows developers to choose the level of abstraction and opinionated code that best suits their project, enabling them to balance control and efficiency according to their technical know-how and project requirements. ## Conclusion Shopware Frontends represents a powerful, flexible solution for building custom storefronts within a composable commerce architecture. By understanding the concepts of a decoupled frontend, the technology stack behind Shopware Frontends, and how its architecture fits into the broader ecommerce landscape, developers can leverage this toolset to create innovative, high-performance storefronts tailored to their specific business needs. For further exploration, refer to the [Shopware Frontends Documentation](https://frontends.shopware.com) and other resources linked throughout this unit.