Deploy a Netlify App Built on CockroachDB

On this page

This tutorial shows you how to deploy a Netlify web application that communicates with a CockroachDB Standard cluster.

The sample app used in this tutorial simulates a gaming leaderboard using Netlify functions written in TypeScript. The functions use Prisma to connect to CockroachDB. The app's frontend, also written in TypeScript, uses React, bootstrapped with Create React App.

You can view or download the source code for the example.

Before you begin

Before starting the tutorial:

Create a Starter Netlify account.
Install the netlify CLI locally and log in. Refer to Get started with Netlify CLI.

Step 1. Create a CockroachDB Standard cluster

Create a CockroachDB Cloud account. If this is your first CockroachDB Cloud organization, it will be credited with $400 in free trial credits to get you started.
On the Get Started page, click Create cluster.
On the Select a plan page, select Standard.
On the Cloud & Regions page, select a cloud provider (GCP or AWS).
In the Regions section, select a region for the cluster. Refer to CockroachDB Cloud Regions for the regions where CockroachDB Standard clusters can be deployed. To create a multi-region cluster, click Add region and select additional regions.
Click Next: Capacity.
On the Capacity page, keep the Provisioned capacity at the default value of 2 vCPUs.

Click Next: Finalize.
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 end of the trial 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

Open the code repository's GitHub repository.
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.
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.
Clone your fork locally. Replace {ADDRESS} with the full address of your fork, which will end with cockroachdb-typescript.git.

The project has the following directory structure:

├── LICENSE.md
├── README.md
├── netlify
│   └── functions
│       ├── addScore.ts
│       ├── getPlayers.ts
│       └── getScores.ts
├── package-lock.json
├── package.json
├── prisma
│   ├── schema.prisma
│   └── seed.ts
├── public
├── src
└── tsconfig.json

This tutorial modifies the files in the netlify and prisma directories.

Step 3. Initialize the database

Open the project's .env file in a text editor set the DATABASE_URL environment variable to the connection string you obtained earlier from the CockroachDB Cloud Console:
```
DATABASE_URL=<connection-string>
```
Prisma loads the variables defined in .env to the project environment.
Install Prisma:
```
npm install prisma --save-dev
```

Run Prisma Migrate to initialize the database with the schema defined in prisma/prisma.schema.

npx prisma migrate dev --name init

Your database is now in sync with your schema.
✔ Generated Prisma Client (3.11.0 | library) to ./node_modules/@prisma/client in 87ms

Running seed command `ts-node --compiler-options {"module":"CommonJS"} prisma/seed.ts` ...
{
  test_player_1: { id: 1n, name: 'Test Player 1', email: 'test_player_1@example.com' },
  test_player_2: { id: 2n, name: 'Test Player 2', email: 'test_player_2@example.com' },
  test_player_3: { id: 3n, name: 'Test Player 3', email: 'test_player_3@example.com' }
}

🌱  The seed command has been executed.

This command initializes Prisma Client to communicate with your CockroachDB cluster, based on the configuration in the prisma/schema.prisma file. The command also seeds your database with some sample data, using the script defined in prisma/seed.ts.

Step 4. Deploy the application

You can deploy web applications directly from GitHub to Netlify. This tutorial uses the Netlify CLI to deploy the app.

Using the Netlify CLI, start the app server locally to preview your site:
```
netlify dev
```
```
┌─────────────────────────────────────────────────┐
│                                                 │
│   ◈ Server now ready on http://localhost:8888   │
│                                                 │
└─────────────────────────────────────────────────┘
```
For a preview of the site, visit http://localhost:8888.

Interacting with the site triggers the Netlify functions defined in the netlify/functions directory. These functions use Prisma Client to run SELECT and INSERT queries against the database:
- getScores.ts reads all rows from the player_scores table and returns values in the id, name, and score columns.
- getPlayers.ts reads and returns all rows from the players table.
- addScore.ts writes new scores to the player_scores table.
Deploy your app with the Netlify CLI:
```
netlify deploy
```
Choose to create a new site, and then select the default options for each of the subsequent prompts. You will be required to log in to Netlify using GitHub.

After the app is deployed, you should see the following message:
```
✔ Deploy is live!
```
Navigate to the admin URL for your site:
```
netlify open
```
From the Site overview page, you can manage your site. The Site overview page also provides you with a public URL for your site.

Pricing

Contact us

Sign In