cimplify init

Scaffold a working Next.js App Router storefront from one of six industry templates. After `bun install`, `bun dev` boots the local mock API alongside Next, and you have a real shop in 60 seconds.

Usage

cimplify init [dir] [-t <template>]

# Pick a target directory and template
cimplify init my-store -t retail
cimplify init bakery-shop --template bakery

Arguments & flags

Flag	Description
`[dir]`	Target directory. Must be empty or non-existent. Defaults to `my-storefront`.
`--template <name>`, `-t`	One of `bakery` (default), `restaurant`, `retail`, `services`, `grocery`, `fashion`.

Templates

Template	Best for	Industry-specific routes
`bakery`	Warm food storefront with product modal.
`restaurant`	Menu-driven, with reservations.	`/reservations`
`retail`	Variant-aware retail shop.	`/products/[slug]` with full PDP
`services`	Bookable services with calendar.	`/book`
`grocery`	High-SKU grocery with quick-add.
`fashion`	Editorial multi-drop fashion.	`/lookbook`, `/size-guide`

What ships

Every template is a Next.js 16 App Router project with the same architectural shape. Server Components are cached via "use cache" + cacheTag; cart, checkout, and orders are client islands.

Directory structure (retail)

my-store/
├── app/
│   ├── layout.tsx              Root layout, JSON-LD, providers
│   ├── page.tsx                Home (Server Component, cached)
│   ├── globals.css             Tailwind v4 + @theme tokens
│   ├── error.tsx, not-found.tsx
│   ├── shop/page.tsx           CataloguePage
│   ├── products/[slug]/page.tsx ProductPage with JSON-LD
│   ├── search/page.tsx         SearchPage
│   ├── cart/page.tsx           CartPage
│   ├── checkout/page.tsx       CheckoutPage
│   ├── orders/[id]/page.tsx    Order confirmation
│   ├── account/                CimplifyAccount sections
│   ├── collections/[slug]/
│   ├── categories/[slug]/
│   ├── about, faq, contact, track-order
│   ├── shipping, returns, accessibility, terms, privacy
│   ├── sitemap.ts, robots.ts, llms.txt/route.ts
│   └── opensearch.xml/route.ts
├── components/
│   ├── providers.tsx           CimplifyProvider + CartDrawerProvider
│   ├── header.tsx, footer.tsx
│   ├── cart-pill.tsx, cart-drawer.tsx
│   ├── store-product-card.tsx
│   ├── account-iframe.tsx
│   └── policy-page.tsx
├── lib/
│   ├── brand.ts                ⭐ Single source of truth for content
│   └── cart.ts
├── __tests__/
│   ├── brand.test.ts           assertBrand(brand) + placeholder check
│   ├── cart-flow.test.ts       Add → dedupe → remove against the mock
│   └── contract.test.ts        Validates outbound + inbound shapes
├── .env.example                NEXT_PUBLIC_CIMPLIFY_* placeholders
├── next.config.ts              cacheComponents: true (do not disable)
├── postcss.config.mjs
├── tsconfig.json
├── vitest.config.ts
└── package.json                bun dev / build / check / check:cart / ...

After init

cd my-store
bun dev          # boots the mock API on :8787 + Next on :3000
# open http://localhost:3000

Rebrand checklist

Every visible string flows from lib/brand.ts, every visible color from app/globals.css's @theme block. Do not edit pages or components for content changes.

File	Edits for
`lib/brand.ts`	Name, contact, hero, header nav, FAQ, policy bodies, account copy.
`app/globals.css` `@theme`	Palette, radius, fonts.
`.env.local`	`NEXT_PUBLIC_CIMPLIFY_API_URL`, `NEXT_PUBLIC_CIMPLIFY_PUBLIC_KEY`, `NEXT_PUBLIC_CIMPLIFY_BUSINESS_ID`, `NEXT_PUBLIC_SITE_URL`.
`app/layout.tsx`	(Optional) `next/font/google` swap.

Test scripts

Script	Runs	Time
`bun run check:brand`	`assertBrand(brand)` + placeholder detector.	<2s
`bun run check:cart`	Add / dedupe / remove against the in-process mock.	~5s
`bun run check:contract`	Zod-validates outbound and inbound shapes.	~3s
`bun run check`	typecheck + lint + all suites.	~15s

Where next

mock: local API Seven seeds, frozen clocks, webhooks.
login: authorize the CLI Browser-first PKCE.
deploy: ship to preview Then promote with --prod.
React SDK Provider, components, hooks.

cimplify init

On this page