To deploy BigCommerce Catalyst with Vercel, a few procedures are necessary. BigCommerce Catalyst is the headless commerce starter kit from BigCommerce, developed with Next.js, to deploy the kit on Vercel easily.
Steps to Deploy Bigcommerce Catalyst with Vercel
Follow these steps to deploy Bigcommerce Catalyst with Vercel:
Step 1: Clone the Catalyst Repository
You have two options: you can clone the official BigCommerce Catalyst repository or make your own fork.
git clone https://github.com/bigcommerce/catalyst.git
cd catalystStep 2: Install Dependencies
Ensure you have Node.js 18+ installed, then install the required dependencies by using this command.
Step 3: Configure Environment Variables
With Catalyst, you need to link the BigCommerce store. Here you go, just copy the .env.example file and then make the .env.local. You can also use the following command to copy the .env.example file.
cp .env.example .env.localNow, edit the .env.local file and add the required environment variables:
Step 4: Run Locally (Optional)
To test the Catalyst project locally, use:
This will start the development server at http://localhost:3000.
Step 5: Deploy to Vercel
To deploy on Vercel, follow these steps:
Install Vercel CLI (if not installed) using the below command.
Now, log in to Vercel CLI using the command below.
Next, add the required environment variables to your .env.local file. For optimal build performance on Vercel, add a value for TURBO_REMOTE_CACHE_SIGNATURE_KEY in addition to the required variables.
If all looks great, run vercel to make a preview deployment or vercel --prod If you want a production deployment. In case this is your first time using the Vercel CLI, the CLI will guide you through some steps to connect to the existing Vercel project or create a new one.
Once you have a brand-new Vercel configuration employing the CLI, you are asked to include your variables in the environment folder of your new project. A Vercel build will fail for the first time if there are no environment variables, so those variables need to be added. You can add the variables one at a time using vercel env add or sign in to vercel.com and paste the contents of your .env.local file into the env var settings for your Vercel project. After completion, go back to the customers’ Vercel project, find “Deployments” and then “Redeploy” in the ellipses dropdown menu, and click it.
Please contact us at manish@bay20.com or call us at +91-8800519180 / +91-9582784309 for any support related to Bigcommerce. You can also visit the Bigcommerce development page to check the services we offer.
