Before starting the tutorial, do the following:
Step 1. Get the code
- Create a GitHub account if you haven't already.
- In GitHub, create your own fork of CockroachDB's
Step 2. Create a Vercel project
- From the Vercel dashboard, click Add new... > Project.
- Select the
prisma-examplesrepository you forked in Step 1 to import.
- From the Framework preset dropdown, select Next.js.
- In the Root directory field, click Edit.
- Select the typescript > rest-nextjs-api-routes directory.
- Click Continue.
- Open the Build and Output Settings and toggle the build command's Override switch to on.
yarn prisma db push && yarn next buildas the Build command.
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
- Navigate to the CockroachDB page of Vercel's integration marketplace.
- Click Add Integration.
- Select your Vercel account and click Continue.
- Select the project you just created and click Continue.
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.
In the CockroachDB Cloud pop-up window, select the organization in which you want to create a new CockroachDB serverless cluster.
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_URLenvironment variable automatically populated with the connection string for your new cluster.
Step 3. Deploy the application
- Navigate to the Overview page for your Vercel project.
- Select the Deployments tab.
- Click Redeploy.
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 serverless cluster
- If you haven't already, sign up for a CockroachDB Cloud account.
- Log in to your CockroachDB Cloud account.
- On the Clusters page, click Create Cluster.
On the Create your cluster page, select Serverless.
Unless you change your monthly budget, this cluster will be free forever.
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 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
cockroachdbfork of the
$ git clone firstname.lastname@example.org:cockroachdb/prisma-examples.git
Navigate to the
$ cd typescript/rest-nextjs-api-routes
Install the application dependencies:
$ npm install
$ npm install --global vercel prisma
Step 3. Initialize the database
Save the connection string you obtained earlier from the CockroachDB Cloud Console to the
DATABASE_URLenvironment variable in an
.envfile in your project:
$ echo "DATABASE_URL=<connection-string>" >> .env
Prisma loads the variables defined in
.envto the project environment. By default, Prisma uses the
DATABASE_URLenvironment variable as the connection string to the database.
Run Prisma Migrate to initialize the database with the schema defined in
$ 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
Step 4. Deploy the application
(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
vercelcommand 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 ...
--confirmflag instructs Vercel to deploy the app to the
example-app-typescript-vercelVercel 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.
- 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
- Build a Simple CRUD Node.js App with CockroachDB and Prisma Client
You might also be interested in the following pages:
- Client Connection Parameters
- Connection Pooling
- Data Replication
- Fault Tolerance & Recovery
- Replication & Rebalancing
- Cross-Cloud Migration
- Automated Operations