Build Your Own Spartacus Storefront: Step-by-Step Blueprint for Setting Up a Spartacus Storefront in SAP Commerce Cloud

• December 18, 2023

Are you struggling to keep up with the rapidly shifting demands of eCommerce? The solution to this question lies within SAP Commerce Cloud and the Spartacus storefront. These integrated SAP solutions form a robust, flexible platform ideal for building a standout online presence. 

Recent Statista reports indicate that the $5.2 trillion in worldwide e-commerce sales in 2021 are projected to grow at a rate of 56% to reach $8.1 trillion by 2026. This indicates that the opportunity for digital storefronts is immense. And SAP Commerce Cloud and Spartacus provide the robust backend you need to leverage this while opening the door to unparalleled front-end innovation and customization.

So, stay tuned as we delve into the essentials of setting up your Spartacus storefront – a journey towards transforming your e-commerce strategy!

What is SAP Spartacus?

SAP Spartacus stands out in the world of e-commerce as an Angular-based JavaScript storefront that is seamlessly integrated with SAP Commerce Cloud. The Spartacus storefront redefines your online presence by enabling a headless commerce approach where Spartacus handles the front end, crafting the customer experience. At the same time, the robust SAP Commerce Cloud manages the back-end processes.

The strength of the SAP Spartacus storefront lies in its separation from backend systems, offering unparalleled flexibility and agility. With its user-friendly Angular framework, it empowers you to quickly adapt and customize your storefront to meet evolving market demands and customer preferences, all supported by the reliable foundation of SAP Commerce Cloud.

Prerequisites for Creating a SAP Spartacus Storefront

Before diving into the setup of your SAP Spartacus storefront, it’s crucial to ensure that you have the right tools and environment in place. Clearing the prerequisites is key to a smooth and successful implementation.

Front End Development Requirements

For starters, your Angular development environment needs to meet specific criteria. Ensure you have Angular CLI v8.0.0 or later, Yarn v1.15 or later, and Node.js v10 or later, depending on the Spartacus version you wish to work with, whether it is Spartacus 1.x or the more recent compostable storefront 5.x. These latest versions of these tools are vital for creating, managing, and extracting the full potential of your Spartacus storefront, as older versions might not support the latest features and functionalities of Spartacus.

Back-End Server Requirements

On the back end, Spartacus relies on SAP Commerce Cloud, requiring at least version 1905 or newer. It’s important to use the latest release for the most updated APIs and features, essential for a fully functional Spartacus storefront. Keep in mind that with each new release of SAP Commerce Cloud, newer OCC APIs become available, enhancing the capabilities of your Spartacus storefront.

With these technical prerequisites securely in place, you’re now perfectly positioned to begin the exciting journey of building your Spartacus storefront. Up next, we’ll dive into the step-by-step blueprint, guiding you through each phase of creating a storefront. Get ready to transform your online presence with Spartacus!

Step-by-Step Guide to Setting Up the Spartacus Storefront

In this section, we’ll guide you through the crucial steps of setting up your Spartacus storefront, covering everything from creating a new Angular application to launching and troubleshooting your storefront.

1. Design Your Code Repository Structure and Configure SAP Commerce Cloud

• Start by designing your code repository structure.
• Enable Composable Storefront in SAP Commerce Cloud, including acquiring the ‘spartacussampledata’ extension from the SAP Commerce Cloud Sample Repository. The ‘spartacussampledata’ extension contains the ‘electronics-spa’ site and related CMS data you’ll need for the Composable Storefront​​.

1. Creating a New Angular Application

• In your designated workspace (e.g., $WORKSPACE), create a new Angular application named ‘mystore’ using the Angular CLI with the command ‘ng new mystore –style=scss’. When you are prompted for the Angular routing, please enter ‘n’ for ‘no’.
• Once you have created the app, access the ‘mystore’ folder using the command ‘cd mystore​​’.

1. Setting Up Your Project Using Spartacus Schematics

• Install the latest release of Spartacus using the command ‘ng add @spartacus/schematics@latest’.
• During this process, you’ll be prompted to select features for your installation. It’s recommended to install the User-Account feature. Please note that Spartacus does not support B2C and B2B storefronts together within a single application​​.

1. Installing Dependencies

• Install the necessary dependencies for your Spartacus application by running ‘yarn install​​’.

1. Configuring Spartacus

• Configure the ‘spartacus-configuration.module.ts’ file in your project, which includes setting the ‘baseUrl’ to point to your SAP Commerce Cloud server, defining the ‘prefix’ for OCC calls, setting the ‘features.level’, and defining the site context (like the base site, language, and currency)​​.

1. Launching Your Spartacus App:

• Start your application with ‘yarn start’. The app will be compiled and then started.
• To display your storefront, browse to ‘http://localhost:4200’. If you have installed Electronics sample data and the Spartacus Sample Data extension, the Spartacus storefront for Electronics should appear. Note that if your storefront doesn’t appear, you may need to accept a privacy certificate due to browser security settings​​.

1. Building and Deploying Your Composable Storefront Application:

• Build your composable storefront using the cloud portal and deploy the build to a specific environment.
• Choose ‘Migrate data’ or ‘Initialize database’ for the platform update mode if there is data introduced in the ‘spartacussampledata’ extension to support the Composable Storefront.

With these steps, you’ve now laid the groundwork for a cutting-edge Spartacus storefront. However, the key to a successful storefront that surpasses the competition lies in meticulous setup,customization, integration, and attentive troubleshooting. This is where Spadoom comes in!

How Spadoom Can Help

Spadoom brings a wealth of experience and expertise in SAP Commerce Cloud and Spartacus. We understand that setting up a Spartacus storefront is just the beginning. Our range of services is designed to take your e-commerce experience to the next level:

• Tailored Storefront Solutions- Spadoom specializes in customizing SAP Commerce Cloud and Spartacus to fit your unique business needs.
• Seamless Integration- We ensure your storefront integrates flawlessly with existing systems for a smooth user experience.
• Performance Optimization- Our team focuses on optimizing your storefront for peak performance, enhancing speed and efficiency.
• Expert Configuration Guidance- Spadoom provides expert advice on complex configurations within Spartacus, simplifying the process.
• Strategic Digital Consultation- Benefit from our strategic insights to leverage Spartacus for maximum customer engagement.
• Comprehensive Support- From custom development to digital strategy, Spadoom offers comprehensive support throughout your storefront’s journey.

Leveraging Spadoom’s expertise, your Spartacus storefront can be transformed into a cornerstone of your digital success, creating a digital experience that resonates with your customers and stands out in the marketplace. We’re here to support you every step of the way, ensuring that your online presence is as dynamic and innovative as your business.

Getting Started with Spartacus Storefronts — Your Gateway to Digital Success

Ready to elevate your e-commerce game? Armed with our comprehensive guide, the path to crafting an exceptional Spartacus storefront in SAP Commerce Cloud is clear and now within your reach. 

Remember, the key to a successful storefront lies in its seamless integration, customization, and responsiveness to customer needs. And if you’re looking for an extra edge, consider partnering with Spadoom — your SAP customer experience heroes — and unlock the full potential of your online presence. All the best!