Skip to main content

Accelerator

The Accelerator is three public boilerplate apps (Next.js, Vue and Nuxt) and a CLI that creates a storefront from one of them. The boilerplates are MIT licensed and live on public GitHub, and 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 wires the SDK and a UI library into routing, page templates, sign-in, server-side rendering and caching.

Checked against create-propeller-shop 0.11.2 and the boilerplates of 18 October 2026 (Next.js 1.22.1, Vue 1.22.1, Nuxt 1.20.1).

Scaffold in one command​

npx @propeller-commerce/create-propeller-shop@latest my-shop --stack=next --mode=hybrid --cms=none

Run it without flags to answer the prompts instead. For the steps after it (the settings file and the dev server) per stack, see the Accelerator quickstart.

The CLI​

create-propeller-shop clones the latest boilerplate for your stack, applies your answers, installs the dependencies and makes a first git commit. The versions of the SDK and the UI library come from the boilerplate's lockfile. Every scaffold starts from the latest boilerplate: to stay on a version, keep your own copy of the generated project.

Flags​

FlagValuesDefaultWhat it does
--stacknext, vue or nuxtnextFrontend framework
--modeb2b, b2c or hybridhybridShop mode: which account features ship (see B2B capabilities)
--cmsstrapi, prepr, contentful or nonenoneCMS to wire in. Next.js only: Vue and Nuxt shops are created without a CMS
--pspmollie, multisafepay or nonenonePayment provider to keep. The other one is removed. With none both are removed and checkout goes from placing the order straight to the confirmation page
--spare-partsyes or noyesInclude the machines and spare parts section
--punchoutyes or nonoInclude PunchOut for e-procurement systems
--trackingyes or nonoAdd the behavior tracking settings to the settings example. Next.js only
--localescomma-separated language codesenLanguages the shop serves
--default-localea language codethe first localeDefault language
--skip-installoffSkip npm install
-y, --yesoffAccept the defaults for the questions you did not answer with a flag

Run npx @propeller-commerce/create-propeller-shop --help for every flag. Set the portal mode, the site URL and the currency in the settings file (see Settings).

What it generates​

Without a CMS (the default), the storefront sits at the project root: my-shop/ holds the app, its package.json and the settings example.

With a CMS, the storefront and the CMS setup live in separate folders:

my-shop/
├── frontend/   the storefront app
└── cms/        a README on setting up the CMS backend

When it is done, the CLI prints the next steps: go to the app folder (my-shop or my-shop/frontend), copy the settings example and run npm run dev.

The three stacks​

StackFrameworkRenderingDev port
nextNext.js 16 with React 19Server-rendered pages with client islands3000
vueVue 3 with ViteServer-rendered by an Express server5173
nuxtNuxt 3Server-rendered by Nitro, with the same caching model as Next.js5000

The Next.js boilerplate uses the React UI library, the Vue and Nuxt boilerplates the Vue UI library. Use Node 22 for all three.

What the boilerplates include​

  • Pages for catalog, product, cluster, search, cart, checkout, quick order and account. The Next.js boilerplate adds a catch-all route for CMS content pages.
  • Server-side rendering and caching. Catalog pages render on the server, with the interactive parts hydrated in the browser. Data for anonymous visitors is cached, and a refresh endpoint clears one product or category at a time. See Routing.
  • Sign-in. Users sign in through the GraphQL route, account pages are guarded and sessions time out after inactivity. See Keys and security.
  • Translations. UI strings come from one file per component and language. Add a language by copying the default language folder and translating it.
  • Styling from the UI library's stylesheet and theme tokens. See Customization.
  • Payments. Mollie and MultiSafepay are both wired in, and PAYMENT_PROVIDER picks one. See Payment providers.
  • Price on request. Products priced on request get a "request a price" button, and signed-in customers send their list of these products by email. This needs the mail settings (SMTP_*) and PRICE_REQUEST_TO_EMAIL. See B2B capabilities.
  • PunchOut for buyers who order from an e-procurement system, when scaffolded with --punchout=yes. See PunchOut.
  • Machines and spare parts. A Contact browses the installed machines of their Company and orders spare parts. See B2B capabilities.
  • SpareParts Live (Next.js only): interactive exploded drawings on the product page, for products with the SPAREPARTSLIVEDRAWING attribute. It needs a SpareParts Live account (SPL_TOKEN). See the package README.
  • Behavior tracking. A dashboard at /tracker shows what Companies and visitors do in the shop, from a MySQL or MariaDB database you provide (TRACKING_DB_URL, then npm run tracking:init). Protect it before you deploy, see Keys and security.
  • Google Analytics 4 or Tag Manager, off by default: set USE_GA4 and GA4_KEY, plus GTM_KEY for Tag Manager (with the VITE_ or NUXT_PUBLIC_ prefix on Vue and Nuxt).

Shop modes and portal modes​

The --mode answer decides which account features ship. The portal mode decides what anonymous visitors see: catalog and prices, the catalog without prices, or nothing until login. Set it in the settings file. See B2B capabilities.

CMS​

A shop runs without a CMS: the home page uses a built-in layout and content pages (About Us, FAQ) return 404. On Next.js, --cms=strapi, prepr or contentful wires in that CMS, selected at runtime by CMS_PROVIDER. The commerce pages work the same with or without a CMS. See CMS integration.

PageWithout a CMS
Product, category, cluster, searchFully driven by the SDK
Cart, checkout, accountNo CMS needed
Home pageA built-in layout
Content pages (About Us, FAQ)404 until a CMS is connected

Settings​

Copy the settings example the CLI names (.env.local.example to .env.local for Next.js, .env.example to .env for Vue and Nuxt) and fill in your values. The example in each boilerplate explains every setting. A shop needs at least the GraphQL endpoint, the API key and the channel. The channel tells the shop which catalog root and which guest account to use.

SettingNext.jsVueNuxt
GraphQL endpointBOILERPLATE_GRAPHQL_ENDPOINTVITE_GRAPHQL_PROXY_TARGET and SSR_GRAPHQL_ENDPOINTBOILERPLATE_GRAPHQL_ENDPOINT
API keyBOILERPLATE_API_KEYSSR_API_KEYBOILERPLATE_API_KEY
Order-editor API keyBOILERPLATE_ORDER_EDITOR_API_KEYSSR_ORDER_EDITOR_API_KEYBOILERPLATE_ORDER_EDITOR_API_KEY
ChannelNEXT_PUBLIC_CHANNEL_IDVITE_CHANNEL_IDCHANNEL_ID
Catalog root (optional)NEXT_PUBLIC_BASE_CATEGORY_IDVITE_BASE_CATEGORY_IDBASE_CATEGORY_ID
Portal modeNEXT_PUBLIC_PORTAL_MODEVITE_PORTAL_MODEBOILERPLATE_PORTAL_MODE and NUXT_PUBLIC_PORTAL_MODE
Site URLNEXT_PUBLIC_SITE_URLVITE_SITE_URLNUXT_PUBLIC_SITE_URL
Default languageBOILERPLATE_DEFAULT_LANGUAGEVITE_DEFAULT_LANGUAGEBOILERPLATE_DEFAULT_LANGUAGE
Currency codeNEXT_PUBLIC_CURRENCY_CODEVITE_CURRENCY_CODENUXT_PUBLIC_CURRENCY_CODE
Refresh secretREVALIDATE_SECRETREVALIDATE_SECRETREVALIDATE_SECRET
Payment providerPAYMENT_PROVIDERPAYMENT_PROVIDER and VITE_PAYMENT_PROVIDERPAYMENT_PROVIDER and NUXT_PUBLIC_PAYMENT_PROVIDER

Where a row names two settings, give both the same value. The portal mode takes open, semi-closed or closed. Without a catalog root setting, the shop uses the Channel's catalog root. The Vue and Nuxt examples come with sample values for the Channel and the catalog root: replace them with yours, or leave the catalog root empty.

Settings that start with NEXT_PUBLIC_, VITE_ or NUXT_PUBLIC_ are built into the app when you build it, so set them before npm run build and rebuild after a change. See Keys and security for which keys to use.

See also​

Last updated on