Deploy to Deno Deploy

With this guide, you can learn how to build a simple application and deploy it to Deno Deploy. The application uses Prisma to save a log of each request to a PostgreSQL database.

This guide covers the use of Prisma CLI with Deno CLI, Deno Deploy, Prisma Client, and Data Proxy.

This guide demonstrates how to deploy an application to Deno Deploy in conjunction with a PostgreSQL database, but you can use any database type that Prisma supports.

Prerequisites

  • a free GitHub account
  • a free Deno Deploy account
  • a PostgreSQL database
  • Node.js & npm installed
  • git installed
  • Deno v1.29.4 or later installed. Learn more.
  • (Recommended) Deno extension for VS Code. Learn more.

1. Set up your application

To start, you create a directory for your project, and then use deno run to initialize your application with prisma init as an npm package with npm specifiers.

Steps

  1. Open your terminal and navigate to a location of your choice.

  2. Run the following commands to set up your application.

    $mkdir prisma-deno-deploy
    $cd prisma-deno-deploy
    $deno run -A --unstable npm:prisma init
  3. Edit the prisma/schema.prisma file to define the data model and enable the deno preview feature flag.

    Later in the guide, you create an application that uses the Log model to store data for incoming requests from the application.

    To use Deno, you need to add the preview feature flag deno to the generator block of your schema.prisma file. Also, Deno requires that you generate Prisma Client in a custom location. You can enable this with the output parameter in the generator block. To satisfy both of these requirements, add the following lines to the generator block:

    schema.prisma
    1generator client {
    2 provider = "prisma-client-js"
    + previewFeatures = ["deno"]
    + output = "../generated/client"
    5}
    6
    7datasource db {
    8 provider = "postgresql"
    9 url = env("DATABASE_URL")
    10}
    11
    +model Log {
    + id Int @id @default(autoincrement())
    + level Level
    + message String
    + meta Json
    +}
    +
    +enum Level {
    + Info
    + Warn
    + Error
    +}
  4. In your .env file, replace the current placeholder connection string postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public with your PostgreSQL connection string.

2. Create the database schema

With the data model in place and your database connection configured, you can now apply the data model to your database.

Steps

$deno run -A --unstable npm:prisma db push

Result

With prisma db push, you apply the data model in schema.prisma to your database.

At this point, the command has two additional side effects. The command installs Prisma Client and creates the package.json file for the project which includes the @prisma/client package as a dependency.

3. Generate Prisma Client for the Data Proxy

Next, generate Prisma Client for the Data Proxy with the --data-proxy flag. Later, you use the Data Proxy to connect to your database over HTTP.

$deno run -A --unstable npm:prisma generate --data-proxy

Result

You now have a database schema and a locally generated Prisma Client for the Data Proxy.

4. Create your application

You can now create a local Deno application.

Steps

Create index.ts in the root folder of your project and add the content below.

import { serve } from 'https://deno.land/std@0.140.0/http/server.ts'
import { PrismaClient } from './generated/client/deno/edge.ts'
const prisma = new PrismaClient()
async function handler(request: Request) {
const log = await prisma.log.create({
data: {
level: 'Info',
message: `${request.method} ${request.url}`,
meta: {
headers: JSON.stringify(request.headers),
},
},
})
const body = JSON.stringify(log, null, 2)
return new Response(body, {
headers: { 'content-type': 'application/json; charset=utf-8' },
})
}
serve(handler)
VS Code error: An import path cannot end with a '.ts' extension

If you use VS Code and see the error An import path cannot end with a '.ts' extension for the import statements at the beginning of index.ts, you need to install the Deno extension for VS Code, select View > Command Palette and run the command Deno: Initialize Workspace Configuration. This tells VS Code that the TypeScript files in the current project need to run with Deno which then triggers the correct validations.

What's next

You cannot run this script yet, because you do not yet have the required Data Proxy credentials to use Prisma Client with your database. Later in this guide, you obtain the required credentials when you next add your application to the Prisma Data Platform.

After that, you test your application locally.

5. Create a project in the Prisma Data Platform

Sign up for the Prisma Data Platform and create a project for your application so that you can enable the Data Proxy for it.

Steps

  1. Sign up for a free Prisma Data Platform account.

    Note

    You need a GitHub account to sign up for the Prisma Data Platform.

    Signup for Prisma Data Platform

  2. Click New Project.

  3. Connect the Prisma Data Platform to your database and enable the Data Proxy.

    1. Paste your PostgreSQL connection string.

    2. (Optional) If your database provider requires it, for Static IPs select Enabled to enable connections to your database from static IPs and add them to the database allowlist.

    3. Under Choose a Data Proxy region, select a Data Proxy location that is geographically close to your database.

    4. Click Create project.

      If the connection to the database is successful, Prisma Data Platform creates your project and redirects your browser to the Get started page. On the Get started page, you can optionally link your GitHub repository to keep your Prisma schema up-to-date.

      For a project in Prisma Data Platform, you need a linked Prisma schema if you plan to use Data Browser and Query Console.

      Deno Deploy requires a GitHub repository and you create that in Create a repository and push to GitHub.

      Prisma Data Platform - Create project - Paste database connection string, select Data Proxy region, enable static IPs
  4. Create a Data Proxy connection string.

    1. On the Get started screen, click Create a new connection string.

    2. Enter a name for the connection string and click Create.

    3. Copy the prisma:// connection string to your clipboard.

      Prisma Data Platform - Create project - Paste database connection string, select Data Proxy region, enable static IPs
    4. Save the connection string in a password manager or another safe location.

    5. Click Skip and continue to Data Platform to open the Data Browser for your project.

      When you test your application later, you come back to the Data Browser to review the records that your application creates.

What's next

Next in this guide, you use the connection string in your local .env file to connect to your database through the Data Proxy.

6. Configure the Data Proxy connection string in your environment

With the Data Proxy connection string copied, you can replace the direct PostgreSQL connection string that you used to create the database schema in your .env file.

Prisma Client for the Data Proxy does not read .env files by default, so you must also install dotenv-cli locally.

Steps

  1. Install dotenv-cli.

    $npm install dotenv-cli
  2. Add the Data Proxy connection string to the .env file. Also, comment out the direct connection string.

    .env
    1# DATABASE_URL="postgres://..."
    2DATABASE_URL="prisma://..."

Result

The configuration of your local environment is now ready to send Prisma queries to the database through the Data Proxy.

What's next

You are now ready to test your script locally.

7. Test your application locally

You can now start your application locally and test the creation of log entries.

Steps

  1. Run your script locally.

    $npx dotenv -- deno run -A ./index.ts
  2. In a web browser, open http://localhost:8000/. This page writes your request to the database.

    {
    "id": 3,
    "level": "Info",
    "message": "GET http://localhost:8000/",
    "meta": {
    "headers": "{}"
    }
    }
  3. Reload the page a few times.

    Every time you reload, the script generates a new log entry and the id of the current log entry increments. If you open the Data Browser for your project in Prisma Data Platform, you can verify that the application writes Info level logs to your database.

    Prisma Data Browser

Result

This confirms that your application works when you run it from your local environment.

8. Create a repository and push to GitHub

You need a GitHub repository to add your project to Deno Deploy and enable automated deployments every time you push changes to it.

Steps

  1. Create a private GitHub repository. Create a private repository
  2. Initialize your repository locally and push your changes to GitHub, with the following commands:
    $git init -b main
    $git remote add origin https://github.com/<username>/prisma-deno-deploy
    $git add .
    $git commit -m "initial commit"
    $git push -u origin main
Note

Optionally, you can now also link your GitHub repository to your project in the Prisma Data Platform so that you can keep it up-to-date with any changes you make in the schema.prisma file.

9. Deploy to Deno Deploy

Use the GitHub repository to add your application to Deno Deploy.

Steps

  1. Go to https://dash.deno.com/new.
  2. Select a GitHub organization or user and then select a repository.
  3. Select a production branch and select Automatic mode so that Deno Deploy can deploy every time you push a change to the repository.
  4. Select index.ts as the entry point to your project.
  5. To define the Data Proxy connection string, click Add Env Variable.
    1. For KEY, enter DATABASE_URL.
    2. For VALUE, paste the Data Proxy connection string. Deno Deploy - project parameters
  6. Click Link.
    Wait for the first Deno deployment to finish.

Result

When the first deployment finishes, your browser is redirected to the project view.

What's next

Click the blue View button at the top right to open the deployed Deno application.

The application shows a similar result as when you tested locally with a further increment of the new Log record id number.

{
"id": 5,
"level": "Info",
"message": "GET https://prisma-deno-deploy.deno.dev/",
"meta": {
"headers": "{}"
}
}

Summary

You successfully deployed a Deno application that you created in TypeScript, which uses Prisma Client for the Data Proxy to connect to a PostgreSQL database.

Edit this page on GitHub