^﹢    

Catalyst + Strapi
_{Headless CMS Backend}

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 Strapi app. Which is the headless CMS where the content of the blog and customer service sections of the site are managed.

To run the associated Catalyst storefront app you'll want to head to: https://github.com/bigcommerce-labs/catalyst-strapi-storefront

Demo site

For a working demo of this Strapi integration with Catalyst, see the following example:

https://catalyst-with-strapi.vercel.app/blog

https://catalyst-with-strapi.vercel.app/customer-service

Prerequisites

• Node.js 18+
• Your preferred Node.js package manager, such as npm, pnpm, or yarn (these instructions use npm)

Setup

1. Clone this repo:

git clone https://github.com/bigcommerce-labs/catalyst-strapi-backend.git

2. Jump into the dir:

cd catalyst-strapi-backend

3. Install dependencies:

npm install

4. Create a .env file based on the sample:

cp .env.example .env

HOST=0.0.0.0
PORT=1337
APP_KEYS="toBeModified1,toBeModified2"
API_TOKEN_SALT=tobemodified
ADMIN_JWT_SECRET=tobemodified
TRANSFER_TOKEN_SALT=tobemodified
JWT_SECRET=tobemodified

Replace each "tobemodified" with something unique. If you are on a Mac or using Linux, try running openssl rand -base64 32 to generate values.

5. Build and run Strapi:

npm run build
npm run develop

6. Log into your Strapi instance after it's done initially building to create your admin account. The local admin is usually at: http://localhost:1337/admin

7. Create an API Token for Strapi by going to the Settings > API Tokens section of the admin. Use these values:

• Name: Read API Token
• Description: (don’t need to fill out)
• Token duration: 90 days
• Token type: Read-only

After creating the token it will show on the screen at the top. It only shows once! Copy and paste it into the .env value for STRAPI_API_KEY in your catalyst-strapi-storefront repo.

8. Now it's time to import the sample data into Strapi. Stop the instance of Strapi in the terminal and run the following command:

npm run strapi import -- -f strapi-demo-export.tar.gz

It will ask you if you are ok with deleting your database and assets. Say (y)es.

9. Start Strapi back up by running:

npm run develop

After logging into Strapi, you should see sample entries have been imported that match the demo site.

Deploying Strapi alongside Catalyst

Catalyst and Strapi are deployed independently. To get a publicly addressable Strapi instance for use with your live Catalyst site, use one of Strapi's documented deployment options. If you want to transfer your local Strapi data to a public instance, there is a CLI command for transfering data.

Resources

• Resource center - Strapi resource center.
• Strapi documentation - Official Strapi documentation.
• Catalyst + Strapi storefront repo - Associated repo that uses this backend