Integration setup
The SHOPin storefront accelerator supports multiple data sources (integrations). You choose the active one with environment variables and BFF data-source configuration. Each integration has its own setup guide below.
Shared setup first: clone, root .env from .env.example, npm ci, and starting dev servers are documented in How to setup SHOPin (not repeated here). The guides below only add integration-specific credentials, env names, and behaviour.
Available integrations
| Integration | Purpose | Setup guide |
|---|---|---|
| Commercetools | E-commerce engine and auth — products, cart, customer, orders, login | Set up Commercetools |
| Mock | Fake catalog/cart/navigation for mock-set; does not replace every service (see guide) | Set up Mock |
| Contentful | CMS content (pages, sections, layout) used by commercetools-set when the BFF loads the Contentful integration | Set up Contentful |
Other providers can be added as new integration packages; see Integrations (Basics) for how to add them.
Choosing a data source
- Local development: Use
mock-setfor mock-backed flows, but plan on Commercetools credentials in practice (Set up Mock); use Commercetools end-to-end when you need full parity. - CMS content: With
commercetools-set, content and layout can come from Contentful when its env vars are configured; otherwise mock content can be used. - Production: Use a fixed real data source configuration and remove demo functionality so the stack does not rely on demo switching.
The active data source is determined by configuration (e.g. env or header). See Data sources for how the BFF selects the integration.
In this section
- Set up Commercetools — Project key, credentials, env vars, and optional auth
- Set up Contentful — Space, API keys, migrations, draft mode, BFF wiring
- Set up Mock —
mock-set, coverage limits, Commercetools in practice