Accelerator
The Storefront SDK is in beta. Content in this section may be updated as the SDK evolves.
Packages: @propeller/accelerator-nextjs (git clone), @propeller/accelerator-vue (coming)
The Accelerator is a complete working storefront application. Clone the repository, configure your API keys and CMS, customize the styling and pages, and you have a production-ready storefront.
This is Layer 3 of the Storefront SDK. It uses SDK Services (Layer 1) and UI Components (Layer 2) internally. It adds routing, page templates, CMS integration, state management and configuration on top of those layers.
The Accelerator is the recommended starting point for Pattern A: Commerce-led projects.
What the Accelerator adds on top of Layer 2
| Feature | What it provides |
|---|---|
| Routing | File-system routing with commerce routes + CMS catch-all |
| URL customization | Change URL patterns in one config file (e.g. /category/ to /categorie/) |
| CMS integration | Adapter pattern — swap your CMS by changing one file |
| Bridge blocks | Components that combine CMS editorial data with SDK commerce data |
| State management | Authentication, cart and global CMS data contexts |
| Page templates | Pre-built pages: product detail, category listing, search, cart, checkout, account |
| Configuration | Feature flags, pagination defaults, search settings, cache behavior |
State management
The Accelerator provides three contexts (React) / stores (Vue):
| Context | What it holds |
|---|---|
AuthContext | Access + refresh tokens, user state, auto-logout after inactivity |
CartContext | Cart data with cross-tab synchronization |
GlobalContext | CMS-provided global data (logo, navigation, footer) |
Configuration
| File | What you configure |
|---|---|
.env | API URLs, API keys, CMS credentials |
lib/routing/routes.config.ts | URL patterns, CMS templates, caching per route |
lib/cms/index.ts | CMS provider choice |
data/config.ts | Feature flags, URL builder functions, base category ID |
data/defaults.ts | Pagination, search, cart behavior, validation, timeouts |
components/cms/DynamicBlockRenderer.tsx | Block type to component mappings |
Authentication
The Accelerator handles customer authentication client-side. There is no server-side middleware for customer auth.
Token management — login returns an access token and a refresh token. Both are stored in localStorage via AuthContext. The access token is included in SDK requests through the GraphQL proxy, which forwards the authorization header to Propeller's API.
Session timeout — AuthContext tracks user activity and automatically logs out after 30 minutes of inactivity.
Protected routes — account pages (/account/*) are guarded by a layout component (account/layout.tsx) that checks for a valid session. Unauthenticated users are redirected to the login page.
See Authentication and authorization for the underlying GraphQL mutations for login, registration and token refresh.
What works without a CMS
All commerce pages work without any CMS connected:
| Page | Without CMS |
|---|---|
| Product pages | Fully driven by SDK |
| Category pages | Fully driven by SDK (banner slot stays empty) |
| Search, cart, checkout, account | Zero CMS dependency |
| Home page | Falls back to showing categories and products from SDK |
| CMS content pages | Not available (404) |
See also
- CMS Integration — the adapter pattern and bridge blocks
- Routing — how commerce routes and CMS routes are configured
- Customization — callbacks, pass-through properties and override patterns
- Clone and Run — set up the Accelerator locally