> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Deploy to Vercel

> Deploy a Catalyst storefront to Vercel using the Vercel dashboard or the Vercel CLI, and point your production Makeswift site at the deployment.

This guide shows how to deploy a Catalyst storefront to [Vercel](https://vercel.com/) with the Vercel dashboard or the Vercel CLI.

> **Tip**
>
> [Native Hosting](/developer/docs/storefront/catalyst/deployment/native-hosting/overview) is the recommended way to host Catalyst: it runs on BigCommerce's own infrastructure, deploys through the Catalyst CLI, and needs no separate hosting account. It's currently in closed beta. See [Choosing a Hosting Platform](/developer/docs/storefront/catalyst/deployment/choosing-a-hosting-platform) to compare the two.

Before deploying your storefront, make sure you've run it locally: see [Run locally](/developer/docs/storefront/catalyst/getting-started/one-click-catalyst#run-locally) for One-Click Catalyst projects, or [CLI Installation](/developer/docs/storefront/catalyst/getting-started/cli-installation). Alternatively, ensure you already have the appropriate [environment variables](/developer/docs/storefront/catalyst/reference/environment-variables) set up as well as a source code repository.

To deploy to Vercel, you'll need to first [sign up or sign in to your Vercel account](https://vercel.com/signup).

## Deploy with the Vercel dashboard

To deploy to Vercel using the Vercel dashboard, select **Add New\... > Project** from the top right of the Overview page.

![Vercel overview page](/_fern-img/f951d331102cd3129c27b9297455997fa92a1e4594bd3f19502d3523fabb71aa.webp)

Then, connect to the GitHub, GitLab, or Bitbucket repository that contains your Catalyst storefront's code.

![Vercel project page](/_fern-img/bfffa7c6010876d8529e4bd6ffb771d8e86442d5e7d3d0b5081185f667d6ade0.webp)

Set **Framework Preset** to **Next.js**. Projects created with the Catalyst CLI are a standalone Next.js application at the repository root, so you can leave **Root Directory** and the **Build and Output Settings** section as-is.

> **Note**
>
> If your project uses the older monorepo structure, with the storefront nested in a `core/` folder, click **Edit** next to **Root Directory** and select the `core/` folder.
>
> ![Vercel Root Directory set to the core folder for a monorepo-structure project](/_fern-img/881c8e73cb4b65e17f1063884d7fe8d7e7039dffda29f6dda5c485de34192ab5.webp)

Next, add your environment variables. Then, click **Deploy**.

![Vercel environment variables](/_fern-img/bb4586fb65e747e91fa2db650a235b610ccdb2f545d768670817fa65c2326cf2.webp)

To learn more about deploying to Vercel, consult the [Vercel deployments overview](https://vercel.com/docs/deployments/overview).

## Deploy with the Vercel CLI

To deploy using the [Vercel CLI](https://vercel.com/docs/cli), first install it by running `npm i -g vercel` or `pnpm i -g vercel`.

Next, in your terminal, navigate to the root of your project. Then, run `vercel` to create a preview deployment or `vercel --prod` to create a production deployment. If this is your first time using the Vercel CLI from this project, the CLI will take you through a few prompts to connect an existing Vercel project or create a new one, and you can use the answers below to help work through those prompts:

```text showLineNumbers={false}
? Set up and deploy “~/path/to/my-catalyst-app”? yes
? Which scope do you want to deploy to? <YOUR_VERCEL_WORKSPACE>
? Link to existing project? no
? What’s your project’s name? my-catalyst-app
? In which directory is your code located? ./
Auto-detected Project Settings (Next.js):
- Build Command: next build
- Development Command: next dev --port $PORT
- Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
- Output Directory: Next.js default
? Want to modify these settings? no
```

If your project uses the older monorepo structure, answer `./core` to the directory prompt instead.

If you are creating a new Vercel project using the CLI, you need to add the environment variables; your first build will fail if no environment variables are populated. You can add the variables one at a time using [vercel env add](https://vercel.com/docs/cli/env), or sign in to [vercel.com](https://vercel.com), choose your project, and add them there.

Once added, navigate back to your Vercel project, click **Deployments** and click **Redeploy** inside the ellipses dropdown menu. For more information, see the Vercel CLI documentation linked above.

## Update the Makeswift Host URL

If you are using Makeswift, you'll need to update the **Host URL** property with the URL of your deployed site on Vercel. Vercel will automatically generate a URL for your project, but you'll probably be using your own custom domain. Regardless, you'll want to update the **Host URL** property within your production Makeswift site, not the development one. You can find this property under **Settings -> Host**.

## Next steps

* Point your domains at the storefront and checkout. See [Redirected Checkout](/developer/docs/storefront/catalyst/deployment/overview#redirected-checkout).
* Keep your project current with [`catalyst upgrade`](/developer/docs/storefront/catalyst/getting-started/upgrading).