Storefront Next Template

A production-ready React storefront template for Salesforce B2C Commerce, built with React Router 7 and React 19.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 24+ — Download
• pnpm — Install via npm install -g pnpm or see pnpm.io

Quick Start

# 1. Clone or use this template
git clone https://github.com/SalesforceCommerceCloud/storefront-next-template my-storefront
cd my-storefront

# 2. Set up environment
cp .env.default .env
# Edit .env with your B2C Commerce credentials

# 3. Install and run
pnpm install
pnpm dev

Visit http://localhost:5173 to see your storefront.

Getting Your Starting Point

Option A: Use This Template (Recommended)

Click "Use this template" button → "Create a new repository" at the top of this page.

• ✅ Fresh repo with latest stable code
• ✅ Clean Git history
• ✅ Ready to customize

Option B: Clone a Specific Version

Use a tagged release for version pinning:

# View available versions
git tag -l

# Clone specific version
git clone --branch v1.0.0 --depth 1 \
  https://github.com/SalesforceCommerceCloud/storefront-next-template my-storefront

Check Releases for all versions.

Template version & SDK compatibility

This template is dated by a release stamp (e.g. "June 2026"), recorded in package.json under storefrontNext (templateRelease, templateVersion, minSdkVersion). The Storefront Next SDK (@salesforce/storefront-next-dev / -runtime) versions separately, with SemVer. See the compatibility matrix for which SDK version each template release needs.

Available Verticals

This repository is one of several published storefront templates, each starting from a different retail vertical. They share the same framework and core commerce capabilities. Each vertical can customize branding, content, components, and page layouts to fit that industry, so verticals may differ in more than just theme. Pick the one closest to your industry as a starting point, then customize it further.

Vertical	Identifier	Repository
Fashion / Retail	fashion	storefront-next-template
Beauty / Cosmetic	cosmetic	storefront-next-beauty
Footwear	footwear	storefront-next-footwear
Foundations	foundations	storefront-next-foundations
Furniture	furniture	storefront-next-furniture

Each repository ships with its own default demo data out of the box. Connect your own B2C Commerce instance to browse your real catalog.

The Storefront Next CLI can also generate a new project instead of cloning a repo directly:

• sfnext create-storefront with no flag prompts you to pick a vertical interactively.
• sfnext create-storefront --vertical <identifier> (e.g. --vertical cosmetic) skips the prompt and clones that vertical's repo directly. Use the Identifier column above, not the display name.

Configuration

All settings are defined in config.server.ts and can be configured via environment variables—no code changes required.

Setup

cp .env.default .env
# Edit .env with your B2C Commerce credentials

Required Variables

PUBLIC__app__commerce__api__clientId=your-client-id
PUBLIC__app__commerce__api__organizationId=your-org-id
PUBLIC__app__commerce__api__shortCode=your-short-code

How It Works

Use the PUBLIC__ prefix with double underscores (__) to set any config path:

# Environment variable         →  Config path
PUBLIC__app__site__locale=en-GB   →  config.app.site.locale
PUBLIC__app__site__currency=EUR   →  config.app.site.currency

Values are automatically parsed (numbers, booleans, JSON arrays/objects).

See Configuration Guide for complete documentation.

Deployment

Deploy your storefront to Salesforce B2C Commerce's Managed Runtime:

pnpm build
pnpm push

See the Deployment Guide for all options and configuration.

B2C CLI

The Salesforce B2C CLI is included as a dev dependency for managing Commerce Cloud resources — environments, code deployments, cartridges, and more.

pnpm b2c --help       # See all available commands

Available Scripts

# Development
pnpm dev              # Start dev server
pnpm build            # Build for production
pnpm start            # Run production build

# Commerce Cloud
pnpm b2c              # B2C CLI (environments, deployments, cartridges)

# Testing & Quality
pnpm test             # Run tests
pnpm lint             # Lint code
pnpm typecheck        # Check TypeScript

# Storybook
pnpm storybook        # Component explorer

Project Structure

src/
├── components/       # React components
├── routes/           # Page routes (file-based routing)
├── hooks/            # Custom React hooks
├── lib/              # Utilities and helpers
└── providers/        # React context providers

Features

• ⚡ SSR — Server-side rendering with React 19
• 🛤️ React Router 7 — File-based routing
• 🛒 Commerce Cloud — Full SCAPI integration
• 🎨 Tailwind CSS 4 — Utility-first styling
• 🧪 Vitest — Fast unit testing
• 📚 Storybook — Component development
• 🌍 i18n — Multi-language support
• 🔍 TypeScript — Full type safety

Documentation

• 📊 Data Retrieval
• 🔐 Authentication & Session Management
• 🌍 Internationalization (i18n)
• 🧪 Tests & Coverage
• 🔍 Linting (OxLint), Formatting (Biome) & TypeScript Enforcement
• 🖼️ Images
• 🧩 Page Designer Components
• ⚡ Performance Best Practices
• 📈 Performance Metrics
• 🔎 SEO (Hreflang, Canonical URLs, and Meta Tags)
• 🎨 UI and Styling
• 🔌 Adapter Pattern Implementation Guide
• 🔧 SCAPI Client Overrides and Custom APIs
• 🚚 Delivery Estimates
• 📖 Story Coverage & Code Quality Enforcement
• 🚀 Migrating to React Router 7.18

Contributing

This is a mirror repository synced from the storefront-next monorepo.

To contribute:

1. Visit the monorepo
2. Submit issues or PRs there
3. Changes sync automatically to this repo

See CONTRIBUTING.md for details.

Support

• 📖 Documentation
• 🐛 Report Issues

License

See LICENSE for details.