# Choosing a starter

URL: /docs/starters

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.

<Callout type="info" title="Public at launch">
  The starters are MIT-licensed and their repositories become public at launch. Until then, [contact us](/contact) for early access.
</Callout>

## Pick one [#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 [#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-Secret` and the shopper's `X-Client-IP` on 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:bundle` also 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](/docs/guides/cookie-consent).
- **Has unit tests (Vitest) and end-to-end tests (Playwright).** `E2E_API_LOCK=enforce npm run test:e2e` first proves your store's [API lock](/docs/authentication#the-api-lock) is on, then runs the shopping journeys against it.

## Run one locally [#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.

```bash tab="Next.js"
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:3004
```

```bash tab="Nuxt"
cp .env.example .env
# NUXT_ENGINE_URL=https://api.elaraone.app
# NUXT_TENANT_KEY=pk_live_…
# NUXT_TENANT_SECRET=…
npm ci
npm run dev   # http://localhost:3002
```

```bash tab="Astro + Alpine"
cp .env.example .env
# ELARAONE_ENGINE_URL=https://api.elaraone.app
# ELARAONE_TENANT_KEY=pk_live_…
# ELARAONE_TENANT_SECRET=…
npm install
npm run dev   # http://localhost:3005
```

In 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 [#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 [#building-your-own-instead]

Everything the starters do is in these docs. Start with the [Quickstart](/docs/quickstart) and [Authentication](/docs/authentication), then follow the guides for [product listings](/docs/guides/product-listing), [checkout](/docs/guides/stripe-checkout) and [customer accounts](/docs/guides/customer-accounts).