When you’re standing up a quick prototype of a web application, you probably don’t think much about how your database will scale.
But in the long run, scale matters. And while scaling and deploying a highly available relational database used to be both expensive and challenging, today it’s pretty straightforward and completely free. There’s really no reason not to start with a database that’ll scale automatically.
To demonstrate that, let’s walk through the steps required to deploy a sample TypeScript application that uses CockroachDB Serverless – a cloud-native distributed SQL database – using Prisma and Netlify.
Prerequisites
Before we begin, this tutorial assumes that you already have a few things set up on your computer. If you don’t, you’ll need to get these installed before proceeding to step one:
- Node.js
- Github’s command line tool
Technically, the Github CLI isn’t required, but if you don’t have it installed, you’ll have to adjust a few of the commands in this tutorial.
Optionally, for checking the database directly, it can also be helpful to have the CockroachDB SQL shell installed, although that’s not required.
For the purposes of this tutorial, we’re also not going to look at creating the application itself, we’re just focused on deploying it. We do have a blog post with more detail on creating the application, and that post will also walk you through the deployment steps using the Netlify web UI. I
In this tutorial, though, we’re going to use the command line primarily. Let’s get started
1. Create a Netlify starter account
The first step is to create a Netlify starter account. This is free, and you can do it using your existing Github credentials.
2. Create a free CockroachDB account and start a serverless cluster
Next, sign up for CockroachDB cloud account and spin up a free serverless cluster.
The default options for the cluster are fine for our purposes, and as long as you keep the default resource limit of $0, no credit card will be required for signup.
When the cluster is created, the Connection Info window will open automatically. Click the Connection String tab in this window and note your connection string in a safe place. (Among other things, this string contains your password, which is provided only once. We’ll also need the string later in this tutorial).
3. Get the sample application code
Now, we’ll move off the web and over to the command line. Navigate to the directory in which you’d like to place your project, and then clone the Github repo:
git clone git@github.com:cockroachdb/cockroachdb-typescript.git
In the top level of the project directory, fork the project (to deploy your code to Netlify, you need to have your own repo or your own fork of the existing repo):
gh repo fork --remote
All set!
4. Initialize the database using Prisma
Next, we’re going to use Prisma and its CockroachDB integration to get the database cluster you created connected properly to the app.
The first step is to modify the hidden .env file in the project directory to contain a variable called DATABASE_URL that is equal to the CockroachDB connection string we saved as part of step 2.
In this case, the file is empty, and we can use an echo command to add the environment variable to it directly from the command line:
echo "DATABASE_URL=your-database-connection-string-goes-here” >> .env
Next, we’ll install Prisma:
npm install prisma --save-dev
Then, we’ll run Prisma Migrate to initialize the database. This will create a database in our CockroachDB Serverless cluster using the schema that’s defined in prisma/schema.prisma in our project directory, and seed it with a little data from prisma/seed.ts:
npx prisma migrate dev --name init
Running this command will result in 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
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.
5. Deploy locally with Netlify
Now it’s time to deploy to Netlify, which we can do via Github. We’ll start by deploying locally, but to do that via the command line, we’ll need to first install the Netlify CLI:
npm install netlify-cli -g
Once that’s installed, we can log in:
netlify login
Running this command will open a browser window prompting you to authorize the application. Click “Authorize” and return to the command line. If you’ve already authorized the netlify CLI, running the command will directly log you in without opening a browser window.
Now, we’ll deploy the site locally using the following command:
netlify dev
This will deploy the application locally, and you can access it via a browser at http://localhost:8888/ (or the URL specified in the output after running your command) and click around to ensure the app is working as expected.
6. Fully deploy the application with Netlify
Once we’re ready to go live, we can deploy the application publicly using the following command
netlify deploy
This will result in a series of prompts in the command line, the first of which is whether to link the project to an existing site or create a new one.
We don’t have a Netlify site, so let’s opt to create and configure a new site. We’ll then be prompted to create a team name and a site name. We can go with the defaults here, and let Netlify choose a site name for us.
Next we’ll be prompted for a publish directory. Again, we can just hit enter on the default option . here.
After this, you may be prompted to authorize via Github (if you haven’t already) and you’ll need to wait a bit for all of the files to upload. When they finish, you should see this message:
✔ Deploy is live!
Now, we can run the following command to open the Netlify admin UI in a browser, which will allow us to view a preview build and publish the site:
netlify open
And that’s it! We’ve deployed and published a TypeScript app that uses an auto-scaling distributed cloud SQL database in a pretty short amount of time, having spent precisely $0.
Want to learn more about how that’s possible? Check out how we built a free serverless SQL database – it’s pretty cool!
