> ## 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 Netlify App Built on CockroachDB

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 deploy a [Netlify](https://www.netlify.com/) web application that communicates with a CockroachDB Standard cluster.

The sample app used in this tutorial simulates a [gaming leaderboard](https://www.cockroachlabs.com/blog/react-typescript-cockroachdb-sample-app/) using [Netlify functions](https://www.netlify.com/products/functions/) written in TypeScript. The functions use [Prisma](https://www.prisma.io/) to connect to CockroachDB. The app's frontend, also written in TypeScript, uses React, bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

You can view or download the [source code](https://github.com/cockroachdb/cockroachdb-typescript) for the example.

## Before you begin

Before starting the tutorial:

1. Create a Starter [Netlify](https://app.netlify.com/signup) account.
2. Install the `netlify` CLI locally and log in. Refer to [Get started with Netlify CLI](https://docs.netlify.com/cli/get-started/).

## 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/cockroachdb-typescript).
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 `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

1. Open the project's `.env` file in a text editor set the `DATABASE_URL` environment variable to [the connection string](#connection-string) you obtained earlier from the CockroachDB Cloud Console:

   ```text theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   DATABASE_URL=<connection-string
   ```

   Prisma loads the variables defined in `.env` to the project environment.

2. Install Prisma:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   npm install prisma --save-dev
   ```

3. 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"}}
   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](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. 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](https://docs.netlify.com/cli/get-started/) to deploy the app.

1. Using the Netlify CLI, start the app server locally to preview your site:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   netlify dev
   ```

   ```
   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘
   ```

   For a preview of the site, visit [http://localhost:8888](http://localhost:8888).

   Interacting with the site triggers the Netlify functions defined in the `netlify/functions` directory. These functions use Prisma Client to run <InternalLink path="selection-queries">`SELECT`</InternalLink> and <InternalLink path="insert">`INSERT`</InternalLink> queries against the database:

   * [`getScores.ts`](https://raw.githubusercontent.com/cockroachdb/cockroachdb-typescript/master/netlify/functions/getScores.ts) reads all rows from the `player_scores` table and returns values in the `id`, `name`, and `score` columns.
   * [`getPlayers.ts`](https://raw.githubusercontent.com/cockroachdb/cockroachdb-typescript/master/netlify/functions/getPlayers.ts) reads and returns all rows from the `players` table.
   * [`addScore.ts`](https://raw.githubusercontent.com/cockroachdb/cockroachdb-typescript/master/netlify/functions/addScore.ts) writes new scores to the `player_scores` table.

2. Deploy your app with the Netlify CLI:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   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!
   ```

3. Navigate to the admin URL for your site:

   ```shell theme={"theme":{"light":"catppuccin-mocha","dark":"catppuccin-mocha"}}
   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.

## See also

* [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>