Getting Started with SAP Commerce Cloud Project Spartacus
12 min read
Overview leveraging the APIs released
Table of Contents
What is Spartacus?
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 SAP Commerce core platform.
For a brief, 1.5 minute introduction on Spartacus please watch the following:
For a more detailed look at Spartacus you may choose to watch the following:
Although Spartacus is decoupled from SAP Commerce Cloud, it is designed to work with the 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 SAP Extension Suite. 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. For example the 2.0 release of Spartacus has some features that are only activated by leveraging the APIs released in SAP Commerce core 2005.
Spartacus is responsive and includes 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 built into Spartacus and you can configure your storefront to use it. This will allow your storefront to act more like a traditional native iOS/Android mobile application, with great performance and reliability, and mobile-native features.
The first place to start is to get yourself familiar with the documentation. If you're just starting to look at Spartacus, you can get up and running quickly by following the step by step instructions here or look at one of the Spartacus branches in the Open Source Sample Repo. We also cover how to get Spartacus working with your SAP Commerce Cloud solution in the article Build and Deploy Your First SAP Commerce Cloud Project. There is also an extensive playlist of videos & tutorials related to Spartacus which can be seen below:
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. For more details on a major release update please see this page.
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.
The following covers the main sites for the frameworks/libraries being used and are good references for information that can help your development efforts:
- Languages: Typescript, Sass
- Frameworks: Angular, RxJS, NgRx
- Dependency management: Yarn, npm
- Build: Angular CLI (under the hood: webpack, ng-packagr)
- Testing: Jasmine, Cypress, Karma
- Code Quality: Prettier, TSLint
- IDE: Visual Studio Code (or equivalent)
- Source control / distribution: Github, npmjs
Once you're comfortable with underlying technologies you may also want to consider taking the OpenSAP course on Routing in Spartacus.
SAP Commerce Cloud Accelerators
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:
- Configure your manifest.json file to define an API aspect for Spartacus to call (link).
- 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). For more on configuring endpoints see:
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 Business Technology Platform, Kyma runtime and the scalable microservices that come with it to quickly add new functionality to your Spartacus storefront.
Server-side vs. Client-Side Rendering
By default Spartacus is set up for Client-Side Rendering, but you can configure Server-side rendering (SSR). It is important to consider the pros and cons of each option and determine which option best aligns with your requirements. For an eCommerce solution, typically the importance of search engine optimization (SEO) that requires SSR outweigh any of the benefits of client-side rendering.
If you're using SSR with a Spartacus version 2.x and SAP Commerce Cloud in the Public Cloud be aware there is currently a known issue that can cause issues with the build. You may need to implement the temporary workaround.
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.
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.