@afosto/create-shop

The easiest way to scaffold a new Afosto storefront. This CLI sets up a production-ready shop connected to your Afosto backend — with routing, i18n, and a component library already wired up.

Prerequisites

• Node.js 20 or later
• An Afosto account — you need two things:
  • A storefront token → create an account at afosto.com/register
  • A backend domain → create an account at app.afosto.com/signup

Getting started

Interactive

npm create @afosto/shop@latest
# or
pnpm create @afosto/shop@latest
# or
yarn create @afosto/shop@latest
# or
bunx @afosto/create-shop@latest

You will be asked for the name of your project. The package manager is detected automatically from the command you used to run the CLI — no prompt needed.

Non-interactive

You can also pass arguments to skip the prompts:

npm create @afosto/shop@latest my-shop -- --use-pnpm --yes

See all options with --help:

Usage: @afosto/create-shop [directory] [options]

Options:
  -v, --version        output the version number
  --use-npm            use npm as the package manager
  --use-pnpm           use pnpm as the package manager
  --use-yarn           use yarn as the package manager
  --use-bun            use bun as the package manager
  -y, --yes            accept all defaults and skip prompts
  -e, --example <url>  GitHub URL of a template to bootstrap from
  -h, --help           display help information

After scaffolding

1. Copy .env.example to .env.local and fill in your credentials:

cp .env.example .env.local

NEXT_PUBLIC_AFOSTO_BACKEND_DOMAIN_NL=https://...
NEXT_PUBLIC_AFOSTO_BACKEND_DOMAIN_EN=https://...
NEXT_PUBLIC_AFOSTO_STOREFRONT_TOKEN_NL=...
NEXT_PUBLIC_AFOSTO_STOREFRONT_TOKEN_EN=...
NEXT_PUBLIC_FRONTEND_DOMAIN_NL=https://...
NEXT_PUBLIC_FRONTEND_DOMAIN_EN=https://...

2. Review afosto.config.ts — this file wires your env vars into the app. No changes needed if your .env.local is correct.

3. Start the development server:

npm run dev
# or pnpm dev / yarn dev / bun dev

What's included (default template)

The default template is a full Next.js storefront with:

| What | Details | |---|---| | Framework | Next.js (App Router, TypeScript) | | Styling | Tailwind CSS + tailwind-variants | | i18n | next-intl — Dutch and English out of the box | | Data fetching | TanStack Query | | Afosto SDK | @afosto/shop-react, @afosto/cms-client, @afosto/storefront | | UI primitives | Base UI | | Linting | ESLint |

Using --example with a custom GitHub URL bootstraps from that repo instead — the contents depend on the example you choose.

Roadmap

More official templates are planned and will be selectable during the interactive setup:

| Template | Status | |---|---| | Next.js (current) | Available | | Nuxt | Planned | | TanStack Start | Planned |