Choosing a starter
Three starter storefronts, in Next.js, Nuxt and Astro + Alpine. What they share, how they differ and how to run one.
You can build a storefront from scratch against the API, or start from one of ours. There are three starters, one per framework family. Each is a complete shop: catalogue, search, cart, Stripe checkout, customer accounts and a cookie banner, wired to the API the way these docs describe.
Public at launch
The starters are MIT-licensed and their repositories become public at launch. Until then, contact us for early access.
Pick one
| Next.js | Nuxt | Astro + Alpine | |
|---|---|---|---|
| Framework | Next.js 16 and React | Nuxt 3 and Vue 3 | Astro 7 with Alpine.js 3 islands |
| Choose it when | Your team writes React | Your team writes Vue | You want the lightest pages: mostly HTML, a little JavaScript |
| Instant search script | under 15 KB gzipped | under 8 KB gzipped | |
| Dev port | 3004 | 3002 | 3005 |
They behave the same way. Choose by the framework your team already knows.
What every starter does
- Calls the API only from its own server (a backend-for-frontend). The store key and server secret never reach the browser, and the starters send
X-Tenant-Key,X-Tenant-Secretand the shopper'sX-Client-IPon every call. - Refuses to start in production without the server secret, and stops the build if the secret is copied into a public environment variable.
npm run check:bundlealso scans the built browser files for the key and the secret. - Takes card payments with Stripe through the Payment Element. PayPal is supported by the API but not in the starters' UI yet.
- Includes a cookie consent banner and only loads Google Analytics 4, if you set an ID, after the shopper consents. See Cookie consent under PECR.
- Has unit tests (Vitest) and end-to-end tests (Playwright).
E2E_API_LOCK=enforce npm run test:e2efirst proves your store's API lock is on, then runs the shopping journeys against it.
Run one locally
Each starter reads the store key and secret from its environment. Copy the example file, fill in the values from Settings → Storefront API, install and start.
cp .env.example .env.local
# ELARAONE_ENGINE_URL=https://api.elaraone.app
# ELARAONE_TENANT_KEY=pk_live_…
# ELARAONE_TENANT_SECRET=…
npm ci
npm run dev # http://localhost:3004In development the secret is optional and a warning is logged on the first API call. In production a missing secret stops the server with a message naming the variable.
Deploying
The starters are ordinary Node.js applications: deploy them wherever you run Node, behind your own domain. Then add that domain to Settings → Storefront API → Your websites if anything on it calls the API from the browser, and keep the secret in the host's server-side environment settings.
Building your own instead
Everything the starters do is in these docs. Start with the Quickstart and Authentication, then follow the guides for product listings, checkout and customer accounts.
Authentication
The store key, the server secret, registered websites, bearer tokens for customers and merchant integrations, and how to rotate credentials.
Stores and API keys
How the API knows which store you mean, the public store key and server secret, registered websites, and how to rotate credentials safely.