Integrate BigCommerce's Catalyst storefront with Strapi, to have it manage the built-in blog's content and power a new customer service section. Both with support for i18n, so you can localize the content per locale. Demo data for en and es locales is provided.
This repo houses the Catalyst app. Which renders the storefront using BigCommerce's GraphQL APIs and includes the frontend for the blog and customer service sections of the site.
To run the associated Strapi app you'll want to head to: https://github.com/bigcommerce-labs/catalyst-strapi-backend
For a working demo of this Strapi integration with Catalyst, see the following example:
https://catalyst-with-strapi.vercel.app/bloghttps://catalyst-with-strapi.vercel.app/customer-serviceTo follow this guide, you need the following:
- Node.js 18+
- Your favorite Node.js package manager, such as
npm,pnpm, oryarn(these instructions usenpm) - Working knowledge of Next.js
- A BigCommerce store or sandbox store
- A Strapi instance with the associated Blog and Customer Service content models
Important
We recommend setting up the Strapi instance first since you'll need API credentials as part of this project's .env variables: https://github.com/bigcommerce-labs/catalyst-strapi-backend
The integration into Strapi is comprised of only a few extra directories and files. This repo contains both those files and the core Catalyst reference storefront app, so you easily try it from one place. It makes the deploy process easier.
If you already have a Catalyst storefront project, these files can be copy pasted directly into it!
Either route requires you to set up the separate Strapi repo so you have the associated models and Strapi API running.
Key integration directories:
...
├── app
└── [locale]
└──
(default)
...
└── blog
# The blog directory has minor changes (just a few lines) to utilize Strapi instead of BigCommerce's blog API. The data fetcher inside the integrations folder and Strapi's blocks-react-renderer does most of the work. This replaces the default blog directory if you are copy pasting into an existing Catalyst project.
...
└── customer-service
# The customer-service directory is a new route, not within the default Catalyst storefront route set. It contains a landing page that lists all the question categories and a route that lists answers to questions in that category.
├── integrations/
└── strapi
# Contains the Strapi API fetch functions for blog, customer service, and global site content. Error handling and transformation of Strapi's API response into what fits better with existing Catalyst components (like those in the blog) happens here. There is a client component wrapper for blocks-react-renderer as well, since that library doesn't have native RSC support yet.Use our Vercel integration to create or link a BigCommerce account to this repo.
It will automatically set the Bigcommerce specific env variables for you.
- Clone this repo:
git clone https://github.com/bigcommerce-labs/catalyst-strapi-storefront.git- Install dependences:
npm install- Copy the sample .env file so you can edit your local environment variables:
cp .env.example .env.local-
Follow comments in the .env file to enter the required values:
BIGCOMMERCE_STORE_HASH,BIGCOMMERCE_ACCESS_TOKEN,BIGCOMMERCE_CUSTOMER_IMPERSONATION_TOKEN, andAUTH_SECRET. Read through docs on Catalyst environment variables to learn more. -
Copy over the
STRAPI_BASE_URLandSTRAPI_API_KEYvalues from your Strapi instance. If running locally, you probably only need to change theSTRAPI_API_KEYvalue. -
Start Catalyst:
npm run dev- Head to these pages to see the Strapi integration in action:
Tip
Don't see anything there? Keep in mind you need to be running Strapi at the same time as well.