{"id":20087,"date":"2023-02-09T09:18:00","date_gmt":"2023-02-09T08:18:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=20087"},"modified":"2024-05-22T18:11:48","modified_gmt":"2024-05-22T16:11:48","slug":"how-to-guide-integrating-spartacus-into-a-multi-project-angular-setup","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/devops\/cloud\/how-to-guide-integrating-spartacus-into-a-multi-project-angular-setup\/","title":{"rendered":"How To Guide: Integrating Spartacus Into a Multi-Project Angular Setup"},"content":{"rendered":"\n

Spartacus is a composable Javascript storefront for SAP Commerce Cloud<\/a>, a widely-used e-commerce solution suitable for omnichannel business ecosystems. Spartacus is developed with Angular, Google’s Typescript-based<\/a><\/strong>, open-source web framework<\/strong>. It is designed to be lightweight, customizable, and modern, with the ability to support the most recent architectural and development practices.<\/p>\n\n\n\n

Spartacus makes it easy to design and deploy the necessary functionalities for an e-commerce website, such as personalized storefronts, headless capabilities, progressive web application support, SEO friendly, and multi-language and multi-site support. Its composable architecture<\/a> allows for clean infrastructure design and deployment and makes it particularly suitable for multi-platform and multi-project solutions.<\/p>\n\n\n\n

For this guide, we’ve teamed up with A.S. Watson<\/a>, who understand the challenges that a multi-brand, multi-country ecosystem poses for e-commerce infrastructures. Our guide will look at how Spartacus can be used to leverage complex international e-commerce<\/strong>, gaining insights from A.S. Watson’s own integration of Spartacus into their multi-project Angular setup.<\/p>\n\n\n\n

Introduction to Spartacus<\/strong><\/h2>\n\n\n\n

Spartacus is a lean, Angular-based storefront for SAP Commerce Cloud. It was originally introduced in 2018 <\/strong>as part of a drive to integrate toolsets for different platforms into a single-page storefront interface. It began as an open-source project and has since been adopted as part of SAP Commerce Cloud itself. <\/p>\n\n\n\n

The ABC of Spartacus<\/strong><\/p>\n\n\n\n

Spartacus offers a clean, composable storefront interface to accelerate and simplify SAP Commerce systems. Its single-page setup communicates with SAP Commerce using a REST API (Omni Commerce Connect). This means that user interface layers are fully decoupled from SAP Commerce, allowing flexible and secure integration without direct concern for backend components. Spartacus, being a headless storefront built on top of SAP Commerce, allows for more flexibility and agility in the frontend development<\/strong>, as the two can have independent release cycles. This means that frontend updates can be implemented more frequently and independently from the backend, resulting in faster innovation and a better customer experience<\/p>\n\n\n\n

Spartacus is based on Angular, Google’s lean and extensible web framework. This makes it easy to start small and extend as required, to huge multi-project, multi-platform internationalised systems if desired. And Angular also provides excellent security and accessibility tools from the ground up, plus an extensive and supportive global developer community.<\/p>\n\n\n\n

With a decoupled architecture, users benefit from rapid extensions and upgrades to the libraries as soon as they appear. The technology is forward-focused, aiming to offer a consistently high-quality user interface across any supported device. It aims towards full compliance with the PWA (Progressive Web Application)<\/a> standards being developed by many major technology providers, including the W3C<\/a>.<\/p>\n\n\n\n

Spartacus provides all the core components for storefront interfaces that we’d expect such as navigation, product listing, product detail pages, shopping cart, checkout flows, and also advanced features like personalization, search and filtering, and dynamic content.<\/p>\n\n\n\n

Spartacus allows integration with various PSP, such as SAP Digital Payments<\/a> or any other external provider, to offer a wide range of payment options. This flexibility ensures that the e-commerce platform can adapt to the specific needs of the business and its customers. Furthermore, it includes many features for improving e-commerce interfaces, such as cart validation, product zoom, and dynamic configurations for site themes and guided-selling scenarios<\/p>\n\n\n\n

What\u2019s Spartacus good for?<\/strong><\/h3>\n\n\n\n

By separating the user interface from SAP Commerce, Spartacus provides benefits for complex e-commerce systems. This means that core functionality can evolve independently of the shopfront interface, which can then use this functionality in various ways to meet different needs. Additional frontends can also be added to support multi-brand solutions<\/strong>. The modular interface allows for views to be created to meet the requirements of different languages or locations, as well as highly customized commercial specifications.<\/p>\n\n\n\n

\"black
Spartacus provides benefits for complex e-commerce systems.<\/figcaption><\/figure>\n\n\n\n

Setting up a multi-project structure<\/strong><\/h2>\n\n\n\n

Spartacus’s decoupling and composability draw on Angular’s inherent capabilities for modularity and extensibility. In particular, this makes it ideal for multi-project workspaces. This development approach is used by enterprises that have multiple projects but need to maintain core libraries<\/strong>, configurations or other shared aspects of their technology ecosystem.<\/p>\n\n\n\n

Enterprise development teams have various options for administering multi-project setups. The choice is reflected in the strategies they use to host and manage code using Git<\/a>. Thousands of libraries, a wide range of implementations and globally-dispersed development teams can mean administrative complexity. So organised flexibility is crucial.<\/p>\n\n\n\n

There are two main options for managing multi-project codebases: multi-repo and mono-repo<\/strong>. The multi-repo approach uses a different repository for each project or collection of libraries required for reusable components, standalone applications or microservices. This can help with defining access, autonomous working and independent release cycles. But it also leads to more fragmented projects and may ultimately require more reintegration work for complex setups.<\/p>\n\n\n\n

By contrast, a mono-repo setup uses a single repository for all code. This makes it easier to navigate shared aspects of the project ecosystem, making code quicker to find and issues more straightforward to trace. Refactorings and fixes require fewer cross-repository dependency checks and collaborations face fewer interruptions.<\/p>\n\n\n\n

And last but not least, Angular makes it easy to set up multi-project systems by skipping initial application generation when creating workspaces. <\/p>\n\n\n\n

Integrating Spartacus: How A.S. Watson does it<\/strong><\/p>\n\n\n\n

With a huge international presence across thousands of stores, A.S. Watson needs to leverage complex technology to serve many different e-commerce applications. The size of operations means that a set of robust core modules is essential to ensure quality across all brand representations. But needless to say, with brands based across the globe, serving different marketplaces with multiple product ranges, the storefront interfaces may vary extensively<\/strong>. Seeing how A.S. Watson approaches multi-project ecosystems is a helpful guide for your own project setups.<\/p>\n\n\n\n

Since 2017, A.S. Watson has used SAP Commerce Cloud for the backend of their e-commerce operations. Their multi-project infrastructure uses a mono-repo Angular setup to handle the sophisticated feature sets that drive each brand’s frontend. The setup comprises two main libraries, which contain code modules as well as commerce feature modules representing the customised multi-project configuration.<\/p>\n\n\n\n

To get a clearer idea of how A.S. Watson implements this functionality, let’s take a peek inside their project structure:<\/p>\n\n\n\n