Deploy a Web App Built on CockroachDB with Vercel

This tutorial shows you how to use Vercel to deploy a web application built with Next.js, Express, Prisma, and CockroachDB Standard.

Before you begin

Before starting the tutorial, create a Vercel account and sign in.

Step 1. Create a CockroachDB Standard cluster

1. . If this is your first CockroachDB Cloud organization, it will be credited with $400 in 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 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 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 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.

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 with the full address of your fork, which will end with prisma-examples.git.

Use the browser

Step 3. Create a Vercel project

1. From the Vercel dashboard, click Add new… > Project.

2. Select the prisma-examples repository you forked in Step 2 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 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.

Use the command line

Step 3. Initialize the database

1. Save the connection string you obtained earlier from the CockroachDB Cloud Console to the DATABASE_URL environment variable in an .env file in your project:

   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 to initialize the database with the schema defined in prisma/prisma.schema.

   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 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:

   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:

   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 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
• How to build a Complete Webapp with React, TypeScript & CockroachDB

You might also be interested in the following pages: