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 Serverless (beta).

Prerequisites

Before starting the tutorial, do the following:

  1. Create a CockroachDB Cloud account.

  2. Create a Vercel account.

Step 1. Create a CockroachDB Serverless (beta) cluster

  1. If you haven't already, sign up for a CockroachDB Cloud account.
  2. Log in to your CockroachDB Cloud account.
  3. On the Clusters page, click Create Cluster.
  4. On the Create your cluster page, select Serverless.

    Unless you change your monthly budget, this cluster will be free forever.

  5. 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.

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.

Step 2. Get the code

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

    icon/buttons/copy
    $ git clone git@github.com:cockroachdb/prisma-examples.git
    
  2. Navigate to the rest-nextjs-api-routes directory:

    icon/buttons/copy
    $ cd typescript/rest-nextjs-api-routes
    
  3. Install the application dependencies:

    icon/buttons/copy
    $ npm install
    
  4. Install the vercel and prisma CLI tools:

    icon/buttons/copy
    $ npm install --global vercel prisma
    

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:

    icon/buttons/copy
    $ 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.

    icon/buttons/copy
    $ 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:

    icon/buttons/copy
    $ 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:

    icon/buttons/copy
    $ 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

You might also be interested in the following pages:


Yes No