TypeScript SDK

A 100% type-safe TypeScript SDK for the CommerceEngine Storefront API — automatic token management, universal compatibility (browser, Node.js, Next.js, TanStack Start, Astro, SvelteKit), and production-ready error handling.

Package

@commercengine/storefront

Universal TypeScript SDK with first-class bindings for React, Next.js, TanStack Start, Astro, SvelteKit, and Node.js.

Install it for me

create-commercengine installs the SDK, picks the right framework binding, and writes the config and .env — for a new storefront or an existing project:

npm create commercengine@latest

Scaffold a storefront

Three production designs across five frameworks, running in one command.

Prefer to wire it yourself? Everything below is the manual path.

Pick your integration

React

Context providers, hooks, and component patterns for React SPAs.

Next.js

SSR, Server Actions, static rendering, and cookie-backed sessions.

TanStack Start

Server functions, route loaders, and pre-rendering.

Astro

SSR pages, API routes, middleware, and static prerendering.

SvelteKit

Server load functions, form actions, hooks, and universal loads.

Node.js

Express middleware, background jobs, and server-side patterns.

Installation

npm
pnpm
yarn

npm install @commercengine/storefront

pnpm add @commercengine/storefront

yarn add @commercengine/storefront

Quick Start

Initialize the SDK

lib/storefront.ts

import { createStorefront, Environment, BrowserTokenStorage } from "@commercengine/storefront";

const storefront = createStorefront({
  storeId: "your-store-id",
  environment: Environment.Staging, // or Environment.Production
  apiKey: "your-api-key",
  session: {
    tokenStorage: new BrowserTokenStorage("myapp_"),
  },
});

Browse products (public — no auth needed)

const { data, error } = await storefront.public().catalog.listProducts({
  page: 1,
  limit: 20,
});

if (error) {
  console.error("Failed:", error.message);
} else {
  console.log(`Found ${data?.products.length} products`);
}

Start a session for cart, auth, and orders

const sdk = storefront.session();
await sdk.ensureAccessToken(); // Bootstraps anonymous session

const { data: cart } = await sdk.cart.createCart({
  items: [{ product_id: "prod_123", variant_id: null, quantity: 1 }],
});
console.log("Cart created:", cart?.cart.id);

That’s it — you’re making API calls. The SDK handles token refresh, error typing, and session management automatically.

Learn More

Client Overview

Public/session split, available clients, and the SDK architecture.

Configuration

All config options, environments, custom base URLs, and debugging.

Token Management

Automatic token refresh, storage options, and auth lifecycle.

Type Safety

Auto-generated types, IntelliSense, and the { data, error } pattern.

Getting Started

Core Features

Framework Integration

Advanced Usage

Installation & Quick Start

TypeScript SDK

Package

@commercengine/storefront

Install it for me

Scaffold a storefront

Pick your integration

React

Next.js

TanStack Start

Astro

SvelteKit

Node.js

Installation

Quick Start

Learn More

Client Overview

Configuration

Token Management

Type Safety

​TypeScript SDK

​Package

@commercengine/storefront

​Install it for me

Scaffold a storefront

​Pick your integration

React

Next.js

TanStack Start

Astro

SvelteKit

Node.js

​Installation

​Quick Start

​Learn More

Client Overview

Configuration

Token Management

Type Safety

TypeScript SDK

Package

Install it for me

Pick your integration

Installation

Quick Start

Learn More