Catalyst is the composable, fully customizable headless commerce framework for BigCommerce. Catalyst is built with Next.js, uses our React storefront components, and is backed by the GraphQL Storefront API.

By choosing Catalyst, you'll have a fully-functional storefront within a few seconds, and spend zero time on wiring up APIs or building SEO, Accessibility, and Performance-optimized ecommerce components you've probably written many times before. You can instead go straight to work building your brand and making this your own.

🚀 catalyst.dev • 🤗 BigCommerce Developer Community • 💬 GitHub Discussions

Deploy on Vercel

The easiest way to deploy your Catalyst Storefront is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Quickstart

Create a new project interactively by running:

npm create catalyst-storefront@latest

You'll then get the following prompts:

? What would you like to call your project?  my-faster-storefront
? Which would you like?
❯ Link Catalyst to a BigCommerce Store
  Use sample data

? Would you like to create a new channel? y

? What would you like to name the new channel? My Faster Storefront

Success! Created 'my-faster-storefront' at '/Users/first.last/Documents/GitHub/my-faster-storefront'

Next steps:

cd my-faster-storefront && npm run dev

Learn more about Catalyst at catalyst.dev.

Resources

• GraphQL Storefront API Playground
• GraphQL Storefront API Explorer
• BigCommerce DevDocs

Important

The rest of this README is related to development on top of this monorepo. If you just want to build a storefront, start with the CLI.

Overview

This Catalyst monorepo contains the following:

• The core Catalyst Next.js storefront, in apps/core. This is what is installed when you run the command above in Quickstart.
  • By default the storefront supports an end-to-end B2C focused shopper journey, inclusive of:
    • Global Header & Footers
    • Home Page
    • Product Listing Pages (Category, Brand, Search/Faceted search, Comparison page)
    • Product Detail Pages
    • Cart
    • Headless Redirected Checkout
  • This includes end-to-end support for most features connected to Customer accounts, like:
    • Price Lists
    • Customer-specific pricing
    • Customer-specific category visibility
    • Customer-specific product visibility
  • To extend into more complex B2C and B2B scenarios, you'll want to utilize more of our GraphQL Storefront API.
• The storefront component library, in packages/components, and a Storybook instance to view the collection.
• The BigCommerce GraphQL Storefront API client, in packages/client.

Requirements to use the monorepo

• Node.js 18+
• Corepack-managed pnpm

Getting started

1. Clone the project to your local environment:

git clone git@github.com:bigcommerce/catalyst.git && cd catalyst

2. Use corepack to enable pnpm, then use pnpm to install project dependencies:

corepack enable pnpm && pnpm install

3. Set up environment variables by running:

cp .env.example .env.local

You can find documentation for each field in the .env.local file in .env.example.

4. If you use VS Code, use the following command to configure VSCode with the project-specific settings the Catalyst team has created:

cp .vscode/settings.example.json .vscode/settings.json

5. Start the Catalyst development server!

pnpm run dev

The dev script runs all packages and apps in watch mode. The following table lists localhost URLs with the default ports. When a port is unavailable, Catalyst uses the next available port. For example, if 3000 is in use, core will run on 3001.

Process	URL with port
Catalyst storefront	http://localhost:3000
Components Storybook	http://localhost:6006