Building a Composable Storefront: Prerequisites, Setup, and Common Pitfalls

The Composable Storefront setup process is well documented by SAP — but the documentation assumes you already know Angular, understand OCC APIs, and have a running Commerce Cloud backend. In practice, teams hit issues that aren’t in the setup guide: mismatched API versions, SSR configuration problems, and CMS component mapping gaps.

This guide covers the real prerequisites, the setup process, and the pitfalls that slow down real implementations.

TL;DR: Building a Composable Storefront requires Angular CLI, Node.js (LTS), a Commerce Cloud backend with OCC APIs enabled, and Angular/TypeScript expertise. Setup takes 1–2 days for basic, 4–8 weeks for production-ready. Mobile commerce reached $2.07 trillion in 2024 — 57% of total e-commerce (Oberlo, 2025). Your storefront needs to work flawlessly on mobile from day one.

What Are the Prerequisites?

Gartner has named SAP a Leader in Digital Commerce for 11 consecutive years (SAP News, 2025). Getting the storefront right is critical to leveraging that platform investment.

Technical prerequisites:

• Node.js — LTS version (check SAP’s compatibility matrix)
• Angular CLI — matching your target storefront version
• A running Commerce Cloud instance — with OCC APIs accessible
• OCC API endpoints enabled — products, cart, checkout, CMS, user APIs

Team prerequisites:

• Angular, TypeScript, and RxJS experience
• Access to Commerce Cloud Backoffice for CMS configuration
• Understanding of OCC API authentication (OAuth 2.0)

How Does the Setup Process Work?

Global e-commerce reached $6.334 trillion in 2024 (eMarketer, 2024). Your setup determines how quickly you start capturing that revenue.

Step 1: Scaffold the project. Use Angular CLI with SAP’s schematics to configure the project structure and install dependencies.

Step 2: Configure backend connection. Point at your Commerce Cloud OCC API URL. Configure base site, language, and currency. Mismatched API versions cause the most issues here.

Step 3: Set up CMS mapping. Map CMS component types to Angular components. SAP provides defaults for standard components. Custom CMS components need custom mappings.

Step 4: Configure SSR. Set up Angular Universal with a Node.js Express server. Optional for development, essential for production SEO and performance.

Step 5: Customise and brand. Override default styles, extend components, add custom CMS components, configure the checkout flow.

What Are the Most Common Setup Mistakes?

Forrester predicts more than half of large B2B transactions ($1M+) will be processed through digital self-serve channels by 2025 (Forrester, 2024). Setup mistakes have direct revenue impact.

API version mismatch. Storefront and backend must be on compatible versions. Check SAP’s compatibility matrix before starting.

Skipping SSR in development. SSR affects performance, social media previews, and load behaviour. Set it up from the beginning.

Hardcoding instead of using CMS. Use CMS components from the start — hardcoded content creates deployment dependencies for content changes.

Ignoring lazy loading. Review which modules load eagerly versus lazily. Checkout modules shouldn’t load on the homepage.

Not planning mobile-first. Custom components need explicit mobile testing. Start with mobile layouts and expand to desktop.

How Should You Structure Your Project?

Keep customisations separate from SAP’s code:

• Feature modules — custom functionality in Angular feature modules
• Component overrides — use dependency injection to replace SAP components
• Shared modules — common utilities and services across features
• Style overrides — CSS custom properties and component-scoped styles

For architecture deep dive, see our storefront architecture guide. For migration from Accelerator, see the migration guide.

FAQ

How long does a basic setup take?

One to two days for a basic working storefront. Four to eight weeks for production-ready with custom branding, CMS components, and SSR.

Can I use it with a local Commerce Cloud instance?

Yes, but most teams use a cloud-hosted development environment. Running Commerce Cloud locally requires 8GB+ RAM.

What’s the minimum Commerce Cloud version?

Commerce Cloud 1905 or later. For best support, use the latest version (2211+). Check SAP’s compatibility matrix.

How do I handle multi-site setups?

The storefront supports multiple base sites from a single deployment, each with its own theme, language config, and CMS content.

Do I need separate builds for B2B and B2C?

Not necessarily. Both B2B and B2C modules can coexist. Separate builds are cleaner if experiences diverge significantly.