Accelerator
The Accelerator is the fastest way to a running storefront: three public boilerplate apps (Next.js, Vue and Nuxt) and a scaffolder CLI that generates one from your answers. The boilerplates are MIT licensed and live on public GitHub. The CLI installs everything from public npm. No credentials are needed to get started.
This is the top layer of the Storefront SDK. Each boilerplate is built from the SDK, UI library and optional CMS renderers, already wired together with routing, page templates, authentication, server-side rendering and state management.
Scaffold in one command
npx @propeller-commerce/create-propeller-shop@latest my-shop --stack=next --mode=hybrid --cms=none
Run without flags to answer the prompts interactively. For the step-by-step setup (environment file, dev server), see Clone and run.
The scaffolder CLI
create-propeller-shop clones the boilerplate that matches your stack, overlays your answers (mode, CMS, locales, currency, site URL), pins the UI library and SDK versions, installs dependencies and initializes a git repository.
Flags
| Flag | Values | Default | Purpose |
|---|---|---|---|
--stack | next | vue | nuxt | next | Frontend framework |
--mode | b2b | b2c | hybrid | hybrid | Shop mode (see below) |
--cms | strapi | prepr | cms | none | none | CMS adapter to wire in |
--locales | comma-separated BCP-47 codes | en | Locales to enable |
--default-locale | a locale code | first locale | Default locale |
--currency-code | ISO 4217 code | EUR | Currency (the symbol is derived) |
--portal-mode | open | semi-closed | closed | derived from --mode | Catalog visibility (see below) |
--site-url | absolute URL, no trailing slash | https://<name>.example.com | Origin for SEO and JSON-LD |
--skip-install | flag | off | Skip npm install |
-y, --yes | flag | off | Accept defaults for non-critical prompts |
What it generates
What the CLI generates depends on whether you selected a CMS.
With a CMS (--cms=strapi, prepr or cms), the storefront and the CMS setup live in separate folders:
my-shop/
├── frontend/ the storefront app (your stack)
└── cms/ a README explaining how to install the chosen CMS backend
Without a CMS (--cms=none, the default), there is no cms/ folder and the storefront is placed directly at the project root (app/, components/, lib/, propeller.json, .env.local.example and so on) rather than under frontend/.
In both cases the CLI clones the boilerplate, applies the overlay for your answers, runs npm install (unless --skip-install) and makes an initial git commit. When done it prints the next steps: change into the app directory (my-shop/frontend with a CMS, or my-shop without one), copy the environment example, then npm run dev. The generated propeller.json records the boilerplate ref the shop was cloned from; pin boilerplate.ref to a specific commit for reproducible re-scaffolds.
The three stacks
| Stack | Framework | Rendering | Dev port |
|---|---|---|---|
next | Next.js 16 + React 19 | Hybrid SSR: server shells with client islands | 3000 |
vue | Vue 3 + Vite | SSR served by an Express server | 5173 |
nuxt | Nuxt 3 | Nitro SSR, mirroring the Next caching model | 5000 |
The Vue and Nuxt boilerplates use the Vue UI library; the Next boilerplate uses the React UI library. All three follow the same mental model: a shared GraphQL client, the PropellerProvider at the root, and pages composed from the UI library. CMS support currently ships in the Next.js boilerplate only.
What the boilerplates include
- Routing and page templates for catalog, product, cluster, search, cart, checkout and account, plus an optional CMS catch-all for content pages.
- Server-side rendering. Catalog pages render on the server for SEO, with interactive parts hydrated as client islands. Anonymous catalog fetches are cached and tag-based revalidation is available across all three stacks, so a backend webhook can refresh a single product without rebuilding the site.
- Authentication. The access token is held in an httpOnly cookie and attached server-side by the
/api/graphqlproxy, so the API key and tokens never reach the browser. Account routes are guarded and sessions time out on inactivity. - Internationalization. UI strings resolve through a translation provider, with one file per component namespace by default. Add a language by copying the default locale folder and translating it.
- Styling comes from the UI library's precompiled stylesheet and theme tokens. See Customization.
Shop modes
The --mode answer sets which account features ship and the default portal mode.
| Mode | Account features | Default portal mode | Register form |
|---|---|---|---|
b2b | Adds quotes, purchase authorization and contacts | semi-closed | Contact only |
b2c | Universal account routes only | open | Customer only |
hybrid | Adds quotes, purchase authorization and contacts, gated at runtime | open | Both |
See B2B capabilities for the B2B features and the company model.
Portal modes
The portal mode controls what anonymous visitors see. It is independent of the shop mode, though --mode sets a sensible default.
| Portal mode | Anonymous visitors see |
|---|---|
open | Catalog and prices |
semi-closed | Catalog, but prices and catalog actions are hidden until login |
closed | Nothing until login |
CMS
The --cms answer selects a CMS provider for the boilerplate. With none, the homepage falls back to a built-in static layout and content slugs (About Us, FAQ) return 404. With strapi, prepr or cms, the matching provider (shipped in the Next.js boilerplate's lib/cms) is activated through the CMS_PROVIDER environment variable, and the generated cms/README.md explains how to install the backend. The commerce pages work fully without a CMS, and CMS support currently ships in the Next.js boilerplate only. See CMS integration for the layering.
Configuration and environment
The backend endpoint and API key are server-side only. The browser talks to a local /api/graphql proxy, which injects the key and the user's auth token upstream.
Copy the environment example the CLI mentions (.env.local.example for Next, .env.example for Vue and Nuxt) and fill in your values. The common settings across stacks:
| Setting | Purpose |
|---|---|
| GraphQL endpoint | Your Propeller GraphQL API URL (server-side) |
| API key | Authenticates the proxy itself (server-side, kept secret) |
| Order-editor API key | A separate key for order-status, quote and order-confirmation mutations that some backends gate behind elevated permissions. Leave it equal to your main API key unless your environment issues a distinct one. |
| Base category id | Root category for the navigation menu |
| Default language | Two-letter language code |
| Portal mode | open, semi-closed or closed |
| Site URL | Absolute origin for SEO and JSON-LD |
The exact variable names differ per stack (BOILERPLATE_* and NEXT_PUBLIC_* for Next and Nuxt, VITE_* and SSR_* for Vue). The committed environment example in each boilerplate documents every variable inline.
What works without a CMS
| Page | Without a CMS |
|---|---|
| Product, category, cluster, search | Fully driven by the SDK |
| Cart, checkout, account | No CMS dependency |
| Home page | Falls back to a built-in static layout |
| Content pages (About Us, FAQ) | Return 404 until a CMS is connected |
See also
- Clone and run for the local setup steps
- CMS integration for connecting a CMS
- Customization for theming and overrides
- B2B capabilities for portal modes and the company model