Storefront Next Template

A production-ready React storefront template for Salesforce Commerce Cloud, built with React Server Components and React Router 7.

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js 22+ — 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 Commerce Cloud 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.

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 Commerce Cloud 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
PUBLIC__app__commerce__api__siteId=your-site-id

How It Works

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

# Environment variable         →  Config path
PUBLIC__app__site__locale=en-US   →  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 Commerce Cloud's Managed Runtime:

pnpm build
pnpm push

See the Deployment Guide for all options and configuration.

Available Scripts

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

# 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

• ⚡ React Server Components — 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 Fetching
• 🔐 Authentication
• 🌍 Internationalization
• 🧪 Testing
• 🔍 ESLint

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
• 💬 Discussions

License

See LICENSE for details.