Catalyst is the composable, fully customizable headless ecommerce storefront 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

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.

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

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.
• The storefront component library, in packages/components, and a Storybook instance to view the collection.
• The BigCommerce GraphQL Storefront API client, in packages/client.

• Node.js 18+
• Corepack-managed pnpm

1. Clone the project to your local environment:

git clone [email protected]: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.