> ## Documentation Index
> Fetch the complete documentation index at: https://cockroachlabs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy a Web App Built on CockroachDB with Vercel

export const InternalLink = ({version, path = "", children, ...props}) => {
  let detectedVersion = version || "stable";
  if (typeof window !== 'undefined' && !version) {
    const match = window.location.pathname.match(/\/docs\/([^/]+)/);
    if (match) {
      detectedVersion = match[1];
    }
  }
  const normalizedPath = path.startsWith("/") ? path.slice(1) : path;
  return <a href={`/docs/${detectedVersion}/${normalizedPath}`} {...props}>
      {children}
    </a>;
};

This tutorial shows you how to use [Vercel](https://vercel.com/) to deploy a web application built with [Next.js](https://nextjs.org/), [Express](https://expressjs.com/), [Prisma](https://www.prisma.io/), and CockroachDB Standard.

## Before you begin

Before starting the tutorial, do the following:

1. Create a [CockroachDB Cloud](https://cockroachlabs.cloud/signup?referralId=) account.

2. Create a [Vercel](https://vercel.com/signup) account.

## Step 1. Get the code

1. Create a [GitHub](https://github.com/) account if you haven't already.
2. In GitHub, [create your own fork](https://docs.github.com/get-started/quickstart/fork-a-repo#forking-a-repository) of CockroachDB's [`prisma-examples` repo](https://github.com/cockroachdb/prisma-examples).

## Step 2. Create a Vercel project

1. From the [Vercel dashboard](https://vercel.com/dashboard), click **Add new\...** > **Project**.
2. Select the `prisma-examples` repository you forked in [Step 1](#step-1-get-the-code) to import.
3. From the **Framework preset** dropdown, select **Next.js**.
4. In the **Root directory** field, click **Edit**.
5. Select the **typescript** > **rest-nextjs-api-routes** directory.
6. Click **Continue**.
7. Open the **Build and Output Settings** and toggle the build command's **Override** switch to on.
8. Enter `yarn prisma db push && yarn next build` as the **Build command**.
9. Click **Deploy**.

   Your deployment will fail until you integrate CockroachDB in the next step, so you can leave this screen without waiting for it to finish.

## Step 3. Integrate CockroachDB

1. Navigate to the [CockroachDB page](https://vercel.com/integrations/cockroachdb) of Vercel's integration marketplace.

2. Click **Add Integration**.

3. Select your Vercel account and click **Continue**.

4. Select the project you just created and click **Continue**.

5. Accept the permissions and click **Add Integration**.

   A window will pop up prompting you to log in to CockroachDB Cloud if you haven't already.

6. In the CockroachDB Cloud pop-up window, select the organization in which you want to create a new CockroachDB Standard cluster.

7. Click **Create**.

   After a few seconds, your cluster will be created and the pop-up window will close automatically. Once this is done, your Vercel project will have the `DATABASE_URL` environment variable automatically populated with the connection string for your new cluster.

## Step 3. Deploy the application

1. Navigate to the **Overview** page for your Vercel project.
2. Select the **Deployments** tab.
3. Click **Redeploy**.
4. Click **Redeploy** again from the pop-up dialog.

   Your project will be deployed in a few seconds. You can view the final product by clicking on the **Domain** link on your project's **Overview** page.

## Step 1. Create a CockroachDB Standard cluster

Organizations without billing information on file can only create one CockroachDB Basic cluster.

1. If you haven't already, sign up for a CockroachDB Cloud account.
2. [Log in](https://cockroachlabs.cloud/) to your CockroachDB Cloud account.
3. On the **Clusters** page, click **Create cluster**.
4. On the **Select a plan** page, select **Basic**.
5. On the **Cloud & Regions** page, select a cloud provider (GCP or AWS) in the **Cloud provider** section.
6. In the **Regions** section, select a region for the cluster. Refer to <InternalLink version="cockroachcloud" path="regions">CockroachDB Cloud Regions</InternalLink> for the regions where CockroachDB Basic clusters can be deployed. To create a multi-region cluster, click **Add region** and select additional regions.
7. Click **Next: Capacity**.
8. On the **Capacity** page, select **Start for free**. Click **Next: Finalize**.
9. On the **Finalize** page, click **Create cluster**.

   Your cluster will be created in a few seconds and the **Create SQL user** dialog will display.

<a id="connection-string" />

After the cluster is created, the **Connection info** window appears. Click the **Connection string** tab and copy the connection string to a secure location. You will use this connection string to connect to CockroachDB later in the tutorial.

<Note>
  The connection string is pre-populated with your username, cluster name, and other details, including your password. Your password, in particular, will be provided only once. Save it in a secure place (we recommend a password manager) to connect to your cluster in the future. If you forget your password, you can reset it by going to the **SQL Users** page for the cluster, found at `https://cockroachlabs.cloud/cluster/<CLUSTER ID>/users`.
</Note>

## Step 2. Get the code

1. Clone the `cockroachdb` fork of the `prisma-examples` repo:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ git clone git@github.com:cockroachdb/prisma-examples.git
   ```

2. Navigate to the `rest-nextjs-api-routes` directory:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ cd typescript/rest-nextjs-api-routes
   ```

3. Install the application dependencies:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ npm install
   ```

4. Install the `vercel` and `prisma` CLI tools:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ npm install --global vercel prisma
   ```

## Step 3. Initialize the database

1. Save [the connection string](#connection-string) you obtained earlier from the CockroachDB Cloud Console to the `DATABASE_URL` environment variable in an `.env` file in your project:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ echo "DATABASE_URL=<connection-string" >> .env
   ```

   Prisma loads the variables defined in `.env` to the project environment. By default, Prisma uses the `DATABASE_URL` environment variable as the connection string to the database.

2. Run [Prisma Migrate](https://www.prisma.io/docs/concepts/components/prisma-migrate) to initialize the database with the schema defined in `prisma/prisma.schema`.

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ prisma migrate dev --name init
   ```

   You should see the following output:

   ```
   Your database is now in sync with your schema.

   ✔ Generated Prisma Client (3.11.0 | library) to ./node_modules/@prisma/client in 87ms
   ```

   This command also initializes [Prisma Client](https://www.prisma.io/docs/concepts/components/prisma-client) to communicate with your CockroachDB cluster, based on the configuration in the `prisma/schema.prisma` file.

## Step 4. Deploy the application

1. (Optional) Run the app server locally to preview your site:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ npm run dev
   ```

   You should see the following output:

   ```
   ready - started server on 0.0.0.0:3000, url: http://localhost:3000
   ```

2. Run the `vercel` command to start deploying the app:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   $ vercel deploy --confirm
   ```

   You will be asked to sign into your Vercel account. When you authenticate your credentials, you should see the following message:

   ```
   > Success! GitHub authentication complete ...
   ```

   The [`--confirm` flag](https://vercel.com/docs/cli#introduction/unique-options/confirm) instructs Vercel to deploy the app to the `example-app-typescript-vercel` Vercel project, using the default settings:

   ```
   🔗  Linked to username/example-app-typescript-vercel (created .vercel and added it to .gitignore)
   🔍  Inspect: https://vercel.com/username/example-app-typescript-vercel/123456789 [1s]
   ✅  Production: https://example-app-typescript-vercel-username.vercel.app [copied to clipboard] [47s]
   📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
   💡  To change the domain or build command, go to https://vercel.com/ericharmeling/example-app-typescript-vercel/settings
   ```

   Follow the links provided to view and manage your deployed application.

## See also

* [Vercel's official How to Build a Fullstack App with Next.js, Prisma, and PostgreSQL guide](https://vercel.com/guides/nextjs-prisma-postgres)
* [How to build a Complete Webapp with React, TypeScript & CockroachDB](https://www.cockroachlabs.com/blog/react-typescript-cockroachdb-sample-app/#deploy-the-application-to-netlify)
* <InternalLink path="build-a-nodejs-app-with-cockroachdb-prisma">Build a Simple CRUD Node.js App with CockroachDB and Prisma Client</InternalLink>

You might also be interested in the following pages:

* <InternalLink path="connection-parameters">Client Connection Parameters</InternalLink>
* <InternalLink path="connection-pooling">Connection Pooling</InternalLink>
* <InternalLink path="demo-replication-and-rebalancing">Data Replication</InternalLink>
* <InternalLink path="demo-fault-tolerance-and-recovery">Fault Tolerance & Recovery</InternalLink>
* <InternalLink path="demo-replication-and-rebalancing">Replication & Rebalancing</InternalLink>
* <InternalLink path="demo-automatic-cloud-migration">Cross-Cloud Migration</InternalLink>
* <InternalLink path="orchestrate-a-local-cluster-with-kubernetes-insecure">Automated Operations</InternalLink>