> ## 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, create a [Vercel](https://vercel.com/signup) account and sign in.

## Step 1. Create a CockroachDB Standard cluster

1. <InternalLink version="cockroachcloud" path="create-an-account">Create a CockroachDB Cloud account</InternalLink>. If this is your first CockroachDB Cloud organization, it will be credited with \$400 in <InternalLink version="cockroachcloud" path="free-trial">free trial credits</InternalLink> to get you started.

2. On the **Get Started** page, click **Create cluster**.

3. On the **Select a plan** page, select **Standard**.

4. On the **Cloud & Regions** page, select a cloud provider (GCP or AWS).

5. 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 Standard clusters can be deployed. To create a multi-region cluster, click **Add region** and select additional regions.

6. Click **Next: Capacity**.

7. On the **Capacity** page, keep the <InternalLink version="cockroachcloud" path="plan-your-cluster">**Provisioned capacity**</InternalLink> at the default value of 2 vCPUs.

   Click **Next: Finalize**.

8. On the **Finalize** page, name your cluster. If an active free trial is listed in the right pane, you will not need to add a payment method, though you will need to do this by the <InternalLink version="cockroachcloud" path="free-trial#add-payment-methods">end of the trial</InternalLink> to maintain your organization's clusters.

   Click **Create cluster**.

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

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.

The connection string is pre-populated with your SQL username and password, the cluster name, and other details. Save the password in a secure place such a password manager. You can find the connection string at any time from the CockroachDB Cloud Console. You can reset your SQL password for this cluster from the cluster's **SQL Users** page.

## Step 2. Get the code

1. Open the code repository's [GitHub repository](https://github.com/cockroachdb/prisma-examples).
2. Fork it by clicking **Fork** at the top. Netlify requires you to own a Netlify app's repository.

   * Set **Owner** to your GitHub identity or an organization.
   * Disable **Copy the master branch only**.
   * Click **Fork**.

   You now have an exact copy of the code repository in the GitHub location you chose.
3. Copy the fork's address, which you will use to clone it locally. Click **Code**, then in the **Local** tab, click **SSH** if you have added SSH keys to GitHub, or **HTTPS** if not. Click the copy symbol to copy the address.
4. Clone your fork locally. Replace <code>{'{ADDRESS}'}</code> with the full address of your fork, which will end with `prisma-examples.git`.

## Step 3. 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 2](#step-2-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 4. Integrate your project with 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**.
6. When prompted, log into CockroachDB Cloud and select the organization and cluster to integrate with.
7. Click **Create** to finish the integration.

   After a few seconds, the window will close automatically and your Vercel project will have the `DATABASE_URL` environment variable configured with the cluster's connection string.

## Step 5. 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 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-cockroachdb-resilience">CockroachDB Resilience</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>