Why Deploy Your Catalyst Storefront with Vercel?

Katie Hoesley

Catalyst, BigCommerce’s latest open source, composable ecommerce reference architecture, was designed to streamline the development and reduce the overhead of setting up complex ecommerce functionalities to allow developers to focus on tailoring to their brand's unique requirements and creating personalized, beautiful ecommerce experiences. 

Built with Next.js, it leverages our GraphQL Storefront API to deliver an optimized, SEO-friendly, and accessible ecommerce solution right out of the box. Where to deploy your storefront is an important choice. Although you can deploy using any number of solutions, Vercel is a great option we encourage you to consider! 

Vercel's managed infrastructure and developer experience platform provides everything to build, scale, and secure fast ecommerce websites. As the creators of Next.js, Vercel's Frontend Cloud is optimized for Next.js and provides day one support for new features. Let’s get into why Vercel might be the right choice for you and your storefront’s deployment! 

A Few Key Features of Catalyst

Let's talk about a few of thel advantages of Catalyst. As you read on, you may notice some of the core values of Vercel align with those of Catalyst! Vercel has lead the charge in valuing Developer Experience and is a gold standard in quality - two values you'll see evidence of in Catalyst and how it was built.

The key features of Catalyst include:

  • Ecommerce Functionality: Includes a dynamic home page, faceted search, product listing pages, full-text search, product detail pages, shopping cart, and a secure, customizable checkout process.

  • Developer Experience: Offers scalable GraphQL implementation, minimal infrastructure dependencies, and uses modern Next.js features like React Server Components and Suspense boundaries and provides a collection of reusable React components.

  • Performance & SEO: Pre-optimized for performance and SEO, ensuring fast load times and good search engine rankings - out of the box Lighthouse scores of 100 across the board! 

  • Unopinionated Design: Catalyst uses Tailwind CSS for styling, providing a flexible foundation that developers can easily customize to match their brand aesthetics.

Why choose Vercel?

There are a few clear benefits to using Vercel deployment for Catalyst storefronts, and by using Vercel's infrastructure and caching capabilities, Catalyst storefronts can achieve fast load times and both smooth developer and shopper experiences across different devices and regions. 

Another cool offering from Vercel? They’ve built observability around core web vitals via Vercel Speed Insights - giving developers the ability to look at their site’s performance in an easy-to-consume dashboard!

vercel dashboard

Deploying a storefront using Vercel offers several advantages over some competitors, particularly for developers focused on performance, velocity, ease of use, and modern web development practices.

Here are a few:

Optimized for Next.js

Vercel is the creator of Next.js, which is at the core of Catalyst. This integration means that Vercel works seamlessly with Next.js, which includes features like automatic static optimization, server-side rendering, and static site generation out of the box, resulting in improved developer velocity and deployment times.

Top of Class Developer Experience

Vercel provides a highly streamlined and user-friendly deployment process. Its CLI tools and dashboard are intuitively designed. This enables developers to deploy web applications smoothly, and collaborate effectively with Vercel Preview Deployments and Preview Comments functionality. Teams can also recover swiftly from production incidents with Vercel Instant Rollback which instantly reverts to a previously working version of the website.

Performance and Scalability

Vercel's global edge network ensures that content is delivered quickly to users around the world. It supports intelligent caching, functions, and static generation, which can significantly improve ecommerce site performance. Vercel's infrastructure is designed to scale automatically with high traffic loads and will automatically failover in the event of a regional outage, making it suitable for large-scale applications​​.

Built-In SEO and Analytics Tools

Vercel Speed Insights and Web Analytics are built-in observability tools designed to track web vitals, like First Contentful Paint and Largest Contentful Paint. These tools help ensure that sites are not only fast, but also rank well in search engine results.

Flexibility with Modern Frontend Tools

Vercel supports a wide range of modern frontend frameworks and headless CMS options. This flexibility allows developers to choose the best tools for their specific needs​, which is why it’s such a great fit for a non-prescriptive reference architecture like Catalyst.

What does the deployment process look like?

Let’s walk through the steps!

Option #1: From Vercel Dashboard:

  • Sign up or log in to Vercel

  • Create a new project by pointing Vercel to your source control repository (GitHub, GitLab, or Bitbucket) containing the Catalyst storefront code

  • Add the required environment variables for the storefront to function correctly, including TURBO_REMOTE_CACHE_SIGNATURE_KEY for optimal build performance

  • Click "Deploy" to initiate the deployment process

Option #2: Using Vercel CLI

  • Install the Vercel CLI by running npm i -g vercel

  • Run npx vercel link and follow the prompts to connect your local repository to your Vercel project

  • Run npx vercel env [environment file / .env.local] to pull the environment variables from Vercel locally

  • Run vercel to create a preview deployment or vercel --prod for a production deployment

  • Follow the CLI prompts to link the project to your Vercel account and complete the deployment

And voila! You're deployed!

What’s next? 

If you’d like to get started with Catalyst, head over to catalyst.dev. For more detailed information on Catalyst and its deployment process, you can visit the Catalyst GitHub repository and the Catalyst deployment documentation.

To learn more about getting started with Vercel, head over to their documentation about deploying to Vercel. 

If you have questions, feedback, or issues implementing, please reach out to our DevRel team or join our Developer Community TODAY!