0% found this document useful (0 votes)
139 views

Guide SAP Composable Storefront

The document provides an overview of learning paths for getting started with SAP composable storefront. It outlines two paths - one for SAP Commerce developers familiar with the backend but new to front-end development, and one for Angular developers familiar with front-end work but new to SAP Commerce. Both paths begin with introductory material on the composable storefront and then diverge to cover prerequisites and resources tailored to each developer type's existing knowledge base, before converging again on resources for learning and working with the composable storefront itself.

Uploaded by

Lina Beltrán
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
139 views

Guide SAP Composable Storefront

The document provides an overview of learning paths for getting started with SAP composable storefront. It outlines two paths - one for SAP Commerce developers familiar with the backend but new to front-end development, and one for Angular developers familiar with front-end work but new to SAP Commerce. Both paths begin with introductory material on the composable storefront and then diverge to cover prerequisites and resources tailored to each developer type's existing knowledge base, before converging again on resources for learning and working with the composable storefront itself.

Uploaded by

Lina Beltrán
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

The ultimate guide

to getting started with


SAP composable
storefront

Authors:
Mateusz Ostafil,
Piotr Karwatka
What’s
inside
The ultimate guide to getting SAP Commerce
started with SAP composable ecosystem | 26
storefront | 3
SAP Commerce
Introduction | 5 accelerators | 28

What is SAP composable Backoffice | 30


storefront? | 8
SmartEdit | 32
Who is this guide for | 9
OCC REST API | 34
Learning paths | 10
Introduction to Spartakus | 36
WebDev basics | 12
Join the community | 39
Learn Angular | 14
Documentation | 41
RxJS | 17
SAP composable storefront
NgRx | 19 source code | 43

SASS | 20 Other knowledge sources | 45

Bootstrap | 22

Microservice architecture | 24

The ultimate guide to getting started with SAP composable storefront 2


The ultimate guide to getting
started with SAP composable
storefront

This guide will help you get started developing


storefronts for SAP Commerce Cloud, formerly
known as Hybris, using SAP composable
storefront, formerly known as Spartacus.

This document isn’t meant to be a tutorial.


Instead, it’s an exhaustive learning plan.
That means that what you’ll find here
is an ordered list of links to recommended
sources of knowledge along with some
additional explanations. Additionally, it also
includes a business perspective, written by Piotr
Karwatka, that will help you understand why SAP
composable storefront is a big deal
in the market.

Mateusz Ostafil, Technology


Evangelist / Spartacus Trainer
Empowering
eCommerce.
Together.
We build powerful digital products
and passionate communities around
the technologies that are coming next.

400+ 350+
global brands eCommerce experts
as clients. on board.

13+ 1400+
years on the market. projects delivered.

Let’s talk about new technologies


in your eCommerce.
Contact us at divante.com
Introduction

The ultimate guide to getting started with SAP composable storefront


A business perspective
by Piotr Karwatka
Implementing a headless front end, including some progressive web app (PWA) features,
is usually motivated by wanting to increase the conversion rate metric of a webpage. For
every second a landing page takes to load, conversions drop by 12%. With 70% of global
smartphone users on 3G, you could be losing most of your prospective visitors before
they ever see your content.

Today, mobile-first social media campaigns send people to websites that are often poorly
optimized. There are many user experience (UX) reasons why users leave their journey:

■ Users cannot see product details.


■ Navigation is difficult.
■ Inconsistent UX on different devices.

The average load time for mobile sites over 3G connections is 19 seconds. At the same
time, 53% of mobile site visits are abandoned if a page takes longer than three seconds
to load. The majority of mobile sites, 75%, take longer than 10 seconds to load.

69% 31%
Time spent

20% 80%
Money spent

49%
Mobile
Mobile Revenue Gap Desktop

Mobile Revenue Gap: Customers currently browse on mobile devices but buy on desktops.
Share of Consumer Retail Time and Money Spent (source)

Based on just the numbers presented above, there’s a consensus that the front-end
re-platforming, filling the mobile gap, can increase conversions and revenue by
a minimum of 20%. Some case studies even show much better results.

The ultimate guide to getting started with SAP composable storefront 6


If your current shop is doing €5 million per month, that could be equal to as much
as an additional €1 million of revenue. Having this projection in mind, the return on
investment (ROI) seems like a realistic midterm or even short-term goal.

Revenues generated just from front-end improvements can pay off the project’s costs.

The other motivation for implementing a headless front end is more of optimizing the
development efforts and streamlining the process. Having the back end separated from the
front end on the architecture level means these two layers can be developed and, even more
importantly, deployed separately. This means that we can more easily experiment and deploy
the changes more frequently on the front end while still having
a rock-solid and secure release schedule for all the back-end services.

The value for the customer is built, first and foremostly, where your technology faces the
individual clients and their problems. Their needs are a great place for improvements.
No wonder that building and owning a custom, Spartacus-based front end along with other
back-end components is usually the intuitive choice. The business model and conversion rate
are something you need to focus on and invest your effort in.

With that being said, it must be added that the Spartacus project was designed with
upgradeability as its core. This means that owning the Spartacus front end lets you upgrade
it at any time because it’s distributed as a library. This is in contrast to the previously
built eCommerce accelerators. The overall ownership and upgrade costs with Spartacus
are a fraction of what you’re spending by keeping the legacy
architecture.

One of the most common considerations in regard


to starting a new Spartacus/composable storefront project
is if we need to upgrade our SAP CX/Hybris instance.
Spartacus is supported from the SAP CX release 1905 on.
If you can’t upgrade your instance right away or you find
this process lengthy or difficult for any other reason, such
as keeping the current business up and running without
risking replatforming, there are still a few options.

One is to just have a separate instance for the new front


end. You can easily balance the traffic between old and
new or even mix up some of the new pages or
components with the legacy platform using
WebComponents or just HTTP proxy services.
The best way to tackle the upgrade challenge
must be set specifically to your business’s
situation. We usually recommend doing
workshops and then a proof of concept
(POC) for the feasibility study.

Piotr Karwatka,
co-founder, advisor 7
at Divante
What is SAP composable
storefront?
You’re probably already familiar with what an SAP composable storefront is, but let’s
revise that in order to be on the same page.

SAP composable storefront is a set of Javascript libraries for the rapid development of
storefronts for SAP Commerce. It’s a successor of the accelerator storefront. It utilizes
headless architecture and Angular framework. The composable storefront also allows
building your storefront as a PWA.

SAP composable storefront was formerly known as Spartacus. Since version 5.0, it has
become an officially supported SAP product and was renamed “composable storefront.”

The main advantage of composable storefront is that it provides a fast time to market
and a low cost of maintenance because of the rich built-in feature set and a battle-tested
architecture.

It’s also worth mentioning that composable storefront is an open-source project


developed by SAP and Divante.

The ultimate guide to getting started with SAP composable storefront 8


Who this guide is for
Based on my experience as a Spartacus trainer, I can distinguish two types of people
willing to learn Spartacus. The types are:

SAP Commerce Developer


Description: Experienced with SAP Commerce Cloud. Knows how to develop
accelerator-based storefront applications but has little to no
knowledge about modern front-end development.

Tech stack: Java, SQL, Spring Framework, JSP

Angular Developer
Description: Proficient with Angular but has little to no knowledge of SAP
Commerce Cloud.

Tech stack: JavaScript, TypeScript, Angular, HTML, CSS, SCSS

This guide is suitable for these two types of developers. Correspondingly, the next section
describes the two different learning paths for both of them.

Don’t worry if you don’t identify with either of them. Move on to the next section to create
your own learning path.

The ultimate guide to getting started with SAP composable storefront 9


Learning
paths

The ultimate guide to getting started with SAP composable storefront


The diagram below shows the two possible learning paths. As you can see,
the beginning of the learning path depends on your background. The first part contains
prerequisites for learning SAP composable storefront. The next part is the same for both
learning paths and is an actual introduction to SAP composable storefront. The blocks
in the diagram have corresponding chapters in this document.

SAP Commerce Developer What Angular Developer


type are
You?

WebDev basics SAP Commerce


Angular BackOffice
(HTML/CSS/JS) Ecosystem
Prerequisites

SASS RxJs SmartEdit Accelerators

Microservices Introduction to
OCC REST API
Architecture Spartacus

Join the
community

Documentation

Spartacus
source code

Other knowledge
sources

Congrats!

The ultimate guide to getting started with SAP composable storefront 11


WebDev
basics

The ultimate guide to getting started with SAP composable storefront


This is a really, really broad topic, but I’m sure you’re not completely new to this
because you’ve probably worked with JSP. Anyway, this is the ultimate guide, so it covers
all the relevant topics.

To start working with SAP composable storefront, you need to know:

■ HTML: What is it? How do web browsers use HTML?


How can I create pages using HTML?

■ CSS: What are they? How can I use them to make my pages beautiful?

■ JavaScript: How does it differ from Java? How can I use it to make
my pages dynamic?

Where can you get this knowledge? The internet is overloaded with information about
this, so I’ll share just two sources.

■ MDN Web Docs is the most reliable source of knowledge about web technologies.

■ Javascript.info is a comprehensive guide on how to code in JS in the modern era.

Now, web development allows creating multiplatform applications.

The ultimate guide to getting started with SAP composable storefront 13


Learn
Angular

The ultimate guide to getting started with SAP composable storefront


Angular is a front-end framework for developing enterprise-level single-page
applications and PWAs. It’s quite a complex framework, but fortunately for you,
its concepts are very similar to those found in the Spring framework. Actually, I’ve noticed
that Java developers find Angular to be more friendly than vanilla Javascript. So, don’t
be afraid ;)

Angular Quickstart guide (source)

You don’t have to know Angular inside and out to start your journey with Spartacus,
although it would be beneficial. Thankfully, Spartacus does a lot of things for you such
as taking care of the routing. Here’s a checklist for you with key Angular concepts that
you should grasp before moving on.

Angular prerequisites for Spartacus checklist

Concept Description

Components What are Angular components. How to create


them and define their behavior and look

Templates How to write templates and bind events


and data. How to use pipes.

Services and How DI works in Angular.


Dependency Injection What are services and injection tokens.

Modules How to modularize Angular apps.

Routing (optional) How routing in Angular works. This is optional


because Spartacus will take care of it
internally most of the time.

The ultimate guide to getting started with SAP composable storefront 15


As you can see, all the required information can be found in the official
documentation. However, I’m aware that not everyone wants to learn by reading the docs.

So, I have some recommended video materials for you:

■ Angular in 100 seconds coveres all the crucial Angular concepts in 100 seconds.

■ Free Angular video course is an extensive, but free, Angular video course.

■ Paid Angular video course is very similar to the one above, but the practical
exercises are worth the price.

The ultimate guide to getting started with SAP composable storefront 16


RxJS

The ultimate guide to getting started with SAP composable storefront


Angular uses RxJS to handle asynchronous operations, and so does composable
storefront. It actually uses it extensively, so there’s no way to avoid this topic.

If you’re new to RxJS, then I have bad news for you. RxJS is difficult at the beginning.
This is because RxJS is not only a library. It’s also an implementation of the reactive
programming paradigm, and this requires a shift in mindset to understand it. That’s
something more than just learning the syntax. The good news is that once you
understand it, I’m pretty sure you’re gonna love it :)

This is time flowing from These are values emitted by This vertical line represents
left to right to represent the Observable. the „complete” notification and
the execution of the input indicates that the Observable
Observable. has completed successfully.

4 6 a 8

multipleByTen
This box indicates
which takes the input
Observable (above)
40 60 to produce the output
Observable (below).
The text inside the box
This X represents an error shows the nature of the
This Observable is
emitted by the output transformation.
the output of the
operator call. Observable, indicating
abnormal termination.
Neither values nor the
vertical will be delivered
therafter.

RxJS operations are often visualized using so-called marble diagrams. (source)

Here’s a list of materials that should help you get started:

■ The introduction to Reactive Programming you’ve been missing is a long but


comprehensive introduction to reactive programming. Please note that the guide
uses an older syntax of RxJS. All the examples are valid, but just don’t get confused
that in the other materials, the syntax will be a little different.

■ RxJS Quick Start with Practical Examples has a good video introduction. It uses the
old syntax as well.

The ultimate guide to getting started with SAP composable storefront 18


■ Observables in Angular shows how RxJS is used in Angular apps. The guide
uses the new RxJS syntax.

■ RxJS Top Ten - Code This, Not That is a video about the best practices for RxJS.

NgRx
NgRx is a library for managing reactive states in Angular apps inspired by Redux. As
you might have noticed, it didn’t appear in the learning path. That’s because it’s not
mandatory to have any NgRx knowledge before starting to work with SAP composable
storefront. I’m mentioning this because SAP composable storefront uses NgRx internally,
but it hides its complexity nicely, so most of the time, you won’t have to bother with it.
What’s more, the team behind composable storefront is gradually migrating to their own
state management solution called “commands and queries.”

Anyway, in some cases, you might want to dig deeper into the internals of composable
storefront that requires understanding NgRx. Here are some recommended resources:

■ NgRx official website is the official website, and it contains a very good guide.

■ Angular NgRx Redux Quick Start Tutorial is a concise video introduction.

NGRX STATE MANAGMENT LIFECYCLE

Selector Store

Reducer Service

Component Action Effects

NgRx state management lifecycle (source)

The ultimate guide to getting started with SAP composable storefront 19


SASS

The ultimate guide to getting started with SAP composable storefront


SASS is a styling language that compiles to CSS. It makes writing and maintaining
complex stylesheets easier. Angular allows you to write styles in many different
stylesheet languages, but SAP composable storefront uses SASS. In order to reuse and
extend composable storefront styles, you have to use SASS.

SASS has two different syntaxes called SCSS and indented syntax. SAP composable
storefront uses SCSS, so that’s the syntax you should learn.

What composable storefront styles look like:

%cx-add-to-cart {
.quantity {
margin: 0 0 20px;

label {
@include type(’8’);
margin: 15px 0 10px 0;
}

.info {
@include type(’7’);
margin: 0 15px;
color: var(--cx-color-secondary);
}
}
}

If you are familiar with CSS, then SCSS will be easy for you to pick up because it only
adds some features that make CSS easier. I recommend you start with this guide, and
then go through the whole documentation (it’s not that long). In the end, make sure that
you understand these features:

■ Nesting is a key feature of SCSS that makes our CSS cleaner.

■ Variables is self explanatory.

■ Mixins is another key feature that improves the reusability of CSS.

■ Placeholder selectors is a feature you probably won’t be using yourself, but


Spartacus uses it internally. You need to learn this in order to understand the
Spartacus Styles library.

Alternatively, if you’re looking for a video tutorial, then here’s a full video course by
freeCodeCamp.org. Keep in mind that it doesn’t explain placeholder selectors.

The ultimate guide to getting started with SAP composable storefront 21


Bootstrap

The ultimate guide to getting started with SAP composable storefront


SAP composable storefront styles use Bootstrap 4, which is a popular open-
source CSS framework. Although the composable storefront styles library is optional, it
might be easier for you to start your first project with it.

Bootstrap knowledge will make storefront styling easier for you and make your application
perform better. SAP composable storefront components use Bootstrap classes and
structures, so knowing them lets you write your CSS more fluently. At the same time, this
has a positive impact on the performance by reducing bundle size because you can reuse
Bootstrap. It’s already installed along with SAP composable storefront styles, so you don’t
need to add another CSS framework or write custom styles.

Bootstrap documentation is a good source of knowledge. You don’t have to read it all.
Just make sure you’re familiar with the following topics:

■ Layout and grid system ■ Tables ■ Forms


■ Typography ■ Buttons ■ Modals

<div class=”container”> Bootstrap grid system (source)


<div class=”row”>
<div class=”col”>
1 of 2
1 of 2
</div>
<div class=”col”>
2 of 2
2 of 2
</div>
</div>
<div class=”row”>
<div class=”col”>
1 of 3
1 of 3
</div>
<div class=”col”>
2 of 3
2 of 3
</div>
<div class=”col”>
3 of 3
3 of 3
</div>
</div>
</div>

1 of 2 2 of 2

1 of 3 2 of 3 3 of 3

The ultimate guide to getting started with SAP composable storefront 23


Microservice
architecture

The ultimate guide to getting started with SAP composable storefront


In the case of SAP composable storefront, it would be more precise to call
it a decoupled or headless architecture. However, the correct nomenclature doesn’t
matter much here. The bottom line is to understand how SAP composable storefront
interacts with SAP Commerce because this is a paradigm shift from accelerator-based
development.

Composable storefront interacts with Commerce via OCC REST API. This is what makes
it decoupled. Both parties don’t know much about each other. For instance, Spartacus
doesn’t care what lives behind the REST API as long as the API specification is the same.
At the same time, Commerce doesn’t know whether composable storefront or some other
client consumes its API.

SAP Commerce Cloud

REST
Spartacus OCC REST API Accelerator

...

Spartacus and SAP Commerce Cloud live separately.

What does this all mean for a developer? A few important things:

■ Front-end development depends on the API. That also means that it’s sometimes
limited by the back end. It’s a common case in storefront development because
composable storefront OOTB supports only standard OCC REST API. It’s relatively
new compared to the whole SAP Commerce platform. So, the OCC API doesn’t
expose all the capabilities known from the accelerators yet. Another factor here
is that SAP Commerce back-end developers might not be used to exposing REST
APIs because the projects were done in a slightly different way.
■ In return, we get some significant benefits. First of all, thanks to microservices,
we can easily improve scalability because both the back end and front end can have
separate infrastructures. Also, some computation and caching responsibility
is pushed to the client. Second, microservices allow parallel development,
so in theory, the work can be done faster.

Learn more about headless architecture and microservices in eCommerce from this eBook.

The ultimate guide to getting started with SAP composable storefront 25


SAP Commerce
ecosystem

The ultimate guide to getting started with SAP composable storefront


If you are an Angular developer willing to start working with SAP composable
storefront, it’s valuable to know the SAP Commerce ecosystem at least a little bit. That’s
because the composable storefront is built on top of that. I know that this might be
confusing and overwhelming because SAP Commerce is a big solution with a long history.
So, I’ll quickly explain the most important things.

SAP Commerce Cloud is a very mature eCommerce platform that was formerly called
Hybris. A lot of people still use this name, so don’t get confused. The platform is written
in Java and has more than 10 years of history.

It encompasses a lot of different features including product information management


(PIM), an order management system (OMS), customer support, a content management
system (CMS), and many more. Basically, it covers all the features you need to set up an
online shop. At the same time, it’s customizable and extendable so that you can adjust it
exactly to your needs. It’s also worth mentioning that there are B2B, B2C, and industry-
specific implementations that add additional functionality dedicated to the given
business model.

JavaScript Storefront (SPA)

OCC API

SAP Commerce Application


SAP Context-
Backend Driven
Systems Services
SAP Storefront
Business
Administration
Technology Integration
Platform Customization APIs
Extensions

Services
Business Logic

Platform Services

Other Application Server


Services
and
Systems Persistence Layer

SAP Commerce Cloud architecture

Here’s a short video overview about SAP Commerce Cloud, and here’s a textual
explanation.

The ultimate guide to getting started with SAP composable storefront 27


SAP Commerce
accelerators

The ultimate guide to getting started with SAP composable storefront


SAP Commerce accelerators were a kind of extension for SAP Commerce
distributed as template/starter code. It also includes a front end based on JSP. The entire
solution was monolithic and had the obvious shortcomings of such architecture.

Product List Page in B2B Accelerator (source)

Because accelerators were published as a templated code, they provided great


extensibility for the developers. However, this extensibility came with a price. The price
was that it was very difficult to upgrade to a newer version. That pain point was one
of the factors that led to the creation of SAP composable storefront. Unfortunately, at
the time of writing, SAP composable storefront doesn’t have full feature parity with the
accelerators yet, but the plan is to catch up quickly.

There were a few types of accelerators. The most important ones are B2C and B2B.
To get more information about the accelerators, watch these videos:

■ B2C Accelerator
■ B2B Accelerator

It’s important for SAP composable storefront developers to have a bit of knowledge about
accelerators because the storefront shares some of their concepts. It’s also easier
to collaborate with people used to accelerators.

If you want to know more about accelerators, then head over to the official
documentation.

The ultimate guide to getting started with SAP composable storefront 29


Backoffice

The ultimate guide to getting started with SAP composable storefront


Backoffice Administration Cockpit (source)

Backoffice is a user interface to manage back-end data. It’s worth mentioning this
because SAP composable storefront is data-driven, and it can be said that it’s controlled
by Backoffice.

It depends on the team and the project, but SAP composable storefront developers have
to access Backoffice to set up the data that the storefront is going to use.

Here are some resources that are a nice introduction to Backoffice:

■ The official documentation


■ Video about product management in Backoffice
■ Backoffice administration showcase video

You don’t have to be able to use Backoffice at this point in time.

The general overview is enough for now.

The ultimate guide to getting started with SAP composable storefront 31


SmartEdit

The ultimate guide to getting started with SAP composable storefront


SmartEdit is a WYSIWYG CMS editor. This means that business users can
modify storefront content using a visual tool. Content management is also available via
Backoffice, but the user interface (UI) is cumbersome. In SmartEdit, you can not only
edit the content but also set up restrictions based on time and user groups to provide a
personalized experience for the end users.

Here’s a nice overview of what SmartEdit is. For more detailed information, take a look at
the official documentation.

Editing Spartacus PDP with SmartEdit (source)

SAP composable storefront integrates with SmartEdit out of the box. The only thing you
have to do is a little bit of configuration.

This is not required, but if you’re curious how SmartEdit works, you can watch this video
along with this video.

The ultimate guide to getting started with SAP composable storefront 33


OCC REST API

The ultimate guide to getting started with SAP composable storefront


OCC stands for Omni Commerce Connect. It aims to provide access to Commerce
logic and data to different clients. SAP composable storefront is one of those clients.

Standard OCC REST API doesn’t expose all the features of Commerce yet, but the work
is in progress. So, SAP composable storefront can’t support features that don’t have the
standard API. Thankfully, both OCC and SAP composable storefront are extendable, and
this is how custom features can be implemented.

It’s not mandatory for you to know the OCC API inside and out. That’s because SAP
composable storefront encapsulates this connectivity quite well. However, some general
knowledge is helpful, especially when you plan to do some customization around the out-
of-the-box API integration.

I recommend having a look at the given materials:

■ Omni Commerce Connect documentation is a good single page of information that


will give you a business overview of OCC.
■ OCC API Reference isn’t a guide to read. It’s an API reference, so you can just have
a look at it and go back to it whenever you need to.
■ Swagger UI is the quickest way to familiarize yourself with OCC API. You can find
endpoint documentation and also test them. Ask a back-end developer or devops
engineer to give you access.

The ultimate guide to getting started with SAP composable storefront 35


Introduction
to Spartacus

The ultimate guide to getting started with SAP composable storefront


When you know web development with Angular and the SAP Commerce
ecosystem, it’s the right moment to start with the composable storefront. Most of the
materials on the internet refer to the former Spartacus version. Fortunately, 90% of the
information is valid for SAP composable storefront as well.

The most prominent difference is the installation process. If you’re using SAP CCv2, you
can follow this instruction, and if you’re on-premise, follow this instruction.

The best place to start is with the Spartacus in 60 Seconds video and the free
Introduction to “Spartacus” online course on OpenSAP. It gives some background about
what SAP composable storefront is and why it was created. It also gives a nice overview
of extensibility features and its architecture.

Introduction to Spartacus online course (source)

The ultimate guide to getting started with SAP composable storefront 37


Another way to get familiar with SAP composable storefront is to look at demo
applications:

■ Official demo of the electronics store


■ Official demo of the apparel store
■ Official demo of B2B power tools store
■ Divante demo of B2B CommerceBooster

The ultimate guide to getting started with SAP composable storefront 38


Join the
community

The ultimate guide to getting started with SAP composable storefront


A huge benefit of SAP composable storefront is its vibrant and lively community
that is always there to help you out and share experiences. It’s gathered under a public
Discord server. The invitation link is here. You can use it to ask all sorts of questions
ranging from technical to nontechnical ones. You’ll get the latest updates on Spartacus
releases there as well.

Besides Discord, the community also uses StackOverflow. You can search for answers or
post your questions with the “spartacus-storefront” tag. Spartacus Core developers do
their best to answer in a timely fashion.
Documentation

The ultimate guide to getting started with SAP composable storefront


Spartacus comes with decent documentation. Besides the development
guide, it contains release information and a roadmap. There are many chapters in the
documentation, and it’s easy to get lost there.

So, here’s a list of chapters that I recommend to start with:

■ Homepage - Obviously, it’s the best starting point.


■ Videos - If you like video content, then it’s the place for you.
■ Installation - How to install Spartacus.
■ Customization - How to customize and extend Spartacus.
SAP composable
storefront source
code

The ultimate guide to getting started with SAP composable storefront


SAP composable storefront documentation is great, but it’s usually lagging behind
the actual features. Fortunately, the code is open source, and we can have a look at it.
You can find the SAP composable storefront source code on GitHub. Even though the
codebase is quite big, it’s well written, so you’re able to find and read relevant pieces of
code easily.

I suggest starting your journey by having a look at projects/core and projects/


storefrontlib. They’re the basic building blocks of Spartacus. The core library consists
mostly of OCC connectivity, application state management, and authorization. In the
Storefront library, you’ll find UI components and page rendering logic.

Don’t be shy. Give Spartacus a star on GitHub (source)

Because SAP composable storefront code is hosted on GitHub, we can get some
additional information about the project. You can browse or post issues and then check
their status. You can also take a sneak peek at the pending pull requests to find out what
features will be delivered in the near future. You can also check the progress of a given
release development.

Last but not least, you can contribute to the SAP composable storefront source.
I’m not joking. It’s a very good way to learn SAP composable storefront inside and out. It
could also be a way to gain recognition or to push maintenance of your feature
to the core team. To get started, read the Contributor’s Guide.

The ultimate guide to getting started with SAP composable storefront 44


Other knowledge
sources

The ultimate guide to getting started with SAP composable storefront


Now, you should have a basic knowledge of SAP composable storefront, and it’s
time to dig deeper. Let me show you what the possibilities are.

You’ve already met the OpenSAP platform with the Introduction to “Spartacus” course,
but there’s one more SAP composable storefront course available. It’s Routing in
“Spartacus.” There are more courses being made, so stay tuned.

I suppose you’ve already searched YouTube for Spartacus/SAP composable storefront,


but to be complete, I want to mention that more and more videos and webinar recordings
about SAP composable storefront appear there.

At the time of writing this, and according to my knowledge, there are two commercial
training offers available. One is provided by SAP and one by Divante. I don’t want to
compare the two here, but I just want to mention that they follow completely different
approaches. It’s up to you to compare the two and decide which one works better for you.
CONGRATS
Thanks for getting this far and your willingness to learn new things. Please
feel free to contact us with any questions or feedback because we’d like to
continue growing this powerful and supportive community.

Do you want to squeeze every last


drop of performance out of SAP Spar-
tacus?

SAP Spartacus SAP Spartacus Angular for SAP


regular training advanced training Spartacus training

You can join one or all, depending on your needs, of the courses
and explore Spartacus opportunities with Mateusz Ostafil, a top Sparta-
cus evangelist and trainer. He has mentored over 150 people to become
software developers from scratch.

Learn the best practices, smart solutions to common


problems, and save hours of your time.

Discover SAP Spartacus trainings with Divante

You might also like