CX Works

A single portal for curated, field-tested and SAP-verified expertise for your SAP C/4HANA suite. Whether it's a new implementation, adding new features, or getting additional value from an existing deployment, get it here, at CX Works.

Getting Started with SAP Commerce Cloud Project Spartacus

Getting Started with the Spartacus JavaScript Commerce Storefront


If you've read our article on Choosing Which Storefront to Use for Your SAP Commerce Cloud Solution, you may be wondering how to get started with the SAP Commerce Cloud Project "Spartacus" (henceforth referred to as "Spartacus"). In this article, we'll cover the architecture for Spartacus and discuss how you can get started with it.

Table of Contents


What is Spartacus?

Spartacus is a free, open-source JavaScript web application that allows you to quickly create your own branded JavaScript-based storefront for SAP Commerce Cloud (link). Spartacus is written using Angular and published as libraries. The recommended approach to using JavaScript is to build your own JavaScript web app and import the libraries. Without modification, the storefront works out-of-the-box, but Spartacus has been designed to be upgradable, customizable, and extendable, to suit all your branding and functionality requirements. Although you can download and use the source right now, it is not expected to have a release candidate (that is 1.0.0) until late Q2 2019.

Spartacus is the strategic way forward for maintaining a customizable storefront with SAP Commerce Cloud. It replaces Accelerator templates (link), which were first introduced in SAP Commerce v4.4 to provide a ready-to-use starter implementation. Although the Accelerator templates allowed partners to quickly develop an omni-channel experience by changing a sample storefront, the templates were not easily upgradable, they were JSP-based, and the storefronts were coupled tightly with the platform.

Spartacus Architecture

Although Spartacus is decoupled from SAP Commerce Cloud, it is designed to work with SAP Commerce Cloud platform only. Spartacus relies on SAP Commerce Cloud APIs and CMS content to function. It is 100% API-driven and is intended to be run in a headless fashion. You are free to extend the libraries that come with Spartacus to include your own customizations. Your Spartacus implementation can also be extended through Cloud Platform Extension Factory. Because Spartacus is decoupled from the SAP Commerce Cloud platform, you can choose to separate your front-end and back-end development, even potentially having separate deployment/release cycles. Your Spartacus storefront(s) can also be scaled separately from the SAP Commerce Cloud platform. The only time you may need to align releases is in the case where an API becomes available in SAP Commerce Cloud for Spartacus to use.

Spartacus uses a combination of languages, technologies and libraries, including Angular, TypeScript, RxJS, NgRx, SASS, and Bootstrap. The final output is pure JavaScript. Angular is currently used as the development framework, though the goal is to allow usage of other frameworks. Please see the documentation (link) for the correct versions required.

Spartacus is responsive and will include support for mobile, tablet, desktop, and wide-desktop breakpoints but you are free to configure your own breakpoints. Progressive Web Application (PWA) functionality is also being built into Spartacus that will allow your storefront to act more like a traditional native iOS/Android mobile application, with great performance and reliability, and mobile-native features.


SAP Commerce Cloud in the public cloud includes support for building and deploying JavaScript storefronts. If you’re hosting an on-premise version of SAP Commerce, then you will need to determine where is it best to build and deploy your storefront(s), as well as when/how to best scale it.

Getting Started

Spartacus is an open-source project, with self contained documentation. There is a wiki maintained as part of the Github project. If you're just starting to look at Spartacus, you can get up and running in less than 10 minutes by going through the step by step instructions here. We are also continually adding new videos for Spartacus at both functional and technical levels which can be found here.  A great introduction to Spartacus can be seen in the following video:

Spartacus is purely a set of libraries that contain a set of core libraries, components and styling. It has its own release cycle with the goal to release every two weeks. You are in total control of whether to accept these library updates. You can choose which versions of the libraries you would like to use in your application (Spartacus uses Semantic versioning 2.0), and these can be used to fully configure and customize your storefront. However, customization is not done in the same way as with the Accelerators; you never customize Spartacus code directly – rather, you override or replace styling and code. This approach allows ease of upgradability. For more on extending Spartacus, you can look at our video library or start with the basics as outlined in this video:

SAP Commerce Cloud Accelerators

Because Spartacus is decoupled from SAP Commerce Cloud, you are not required to use Spartacus. You are free to create and maintain your own JavaScript web application, or you can continue to use the Accelerator templates that are embedded with SAP Commerce Cloud, though these are not the strategic way forward. At release, Spartacus will not have feature parity with all functionality of the SAP Commerce Cloud Accelerators, but these gaps will be covered in the Spartacus documentation. 

If you're already using an Accelerator-based solution and are looking to migrate to Spartacus, you're better off to start from scratch.  Spartacus is a complete paradigm shift from the Accelerators in terms of technologies and architecture (template versus libraries, headless versus embedded, JSP versus Angular). They are so different that there is no way to port your Accelerator-based code to a Spartacus storefront. That said, because Spartacus is decoupled from the SAP Commerce Cloud platform, you can ease the transition to Spartacus by running both an Accelerator-based store and a Spartacus storefront at the same time. For example, if you currently have a B2B Accelerator storefront and are wanting to set up a new B2C storefront, you could create the B2C storefront with Spartacus, while still hosting your B2B accelerator-based storefront. Assuming you already have your source repository set up to build and deploy your B2B Accelerator storefront, to add the B2C storefront:

  1. Modify your repository to include the correct structure for building/deploying a JavaScript-based storefront (link).
  2. Configure your manifest.json file to define an API aspect for Spartacus to call (link).
  3. Define a new application in your manifest.json file that points to where your Spartacus storefront is located (link).

You can continue to add new Spartacus storefront applications and configure your endpoints to allow certain traffic to your storefront. They are still using the same SAP Commerce Cloud platform, so you can run multiple storefronts at the same time while still maintaining the same information (customer, cart, order, and more). 

Scalability

As mentioned above, because your Spartacus storefront is decoupled from the SAP Commerce Cloud storefront, you have the option to scale it separately. Other scaling considerations such as a Content Delivery Network (CDN) can also be leveraged to help decrease the load. Additionally, Spartacus will include PWA capabilities, such as cache-first networking capabilities, which will give you the option to cache resources locally on a user’s device. Lazy loading can also be used to determine if/when to load portions of your components. Finally, because Spartacus is API-driven, it can leverage SAP Cloud Platform Extension Factory and the scalable microservices that come with it to quickly add new functionality to your Spartacus storefront.

Support

Spartacus is provided "as-is" with no official lines of support. To get help from the Spartacus community, post a question in the Help chat of the Slack workspace. You can also post a question to Stack Overflow with the 'spartacus' tag, but the Slack workspace is experiencing the most developer discussion at the moment.

It is an open-source project and the team welcomes feedback, ideas, requests, and especially code contributions. If you have something to share, post comments to our Feedback chat in the Slack channel, or read the Contributing document and learn how to help others, report an issue, or contribute code to Spartacus.


Conclusion

You should now have an idea of what Spartacus is and how you can incorporate it into your SAP Commerce Cloud solution. If you're still trying to understand when/where you would use Spartacus, we recommend reading Choosing Which Storefront to Use for Your SAP Commerce Cloud Solution or looking at running a Design Workshop.