Drizzle with Netlify Edge Functions and Neon Postgres

Setup Neon Postgres

Log in to the Neon Console and navigate to the Projects section. Select a project or click the New Project button to create a new one.

Your Neon projects come with a ready-to-use Postgres database named neondb. We’ll use it in this tutorial.

Setup connection string variable

In Project Dashboard section click the Connect button and copy your database connection string. It should look similar to this:

postgres://username:password@ep-cool-darkness-123456.us-east-2.aws.neon.tech/neondb?sslmode=require

Add the DATABASE_URL environment variable to your .env file, which you’ll use to connect to the Neon database.

DATABASE_URL=NEON_DATABASE_CONNECTION_STRING

Setup Netlify Edge Functions

Create netlify/edge-functions directory in the root of your project. This is where you’ll store your Edge Functions.

Create a function user.ts in the netlify/edge-functions directory.

import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  return new Response("User data");
};

Setup imports

Create a import_map.json file in the root of your project and add the following content:

{
  "imports": {
    "drizzle-orm/": "https://esm.sh/drizzle-orm/",
    "@neondatabase/serverless": "https://esm.sh/@neondatabase/serverless"
  }
}

Read more about import_map.json in Netlify Edge Functions here.

Create a Netlify configuration file

Create a netlify.toml file in the root of your project and add the following content:

[functions]
  deno_import_map = "./import_map.json"

[[edge_functions]]
  path = "/user"
  function = "user"

This configuration tells Netlify to use the import_map.json file for Deno imports and to route requests to the /user path to the user.ts function. Read more about netlify.toml here.

Create a table

Create a schema.ts file in the netlify/edge-functions/common directory and declare a table schema:

import { pgTable, serial, text, integer } from "drizzle-orm/pg-core";

export const usersTable = pgTable('users_table', {
  id: serial('id').primaryKey(),
  name: text('name').notNull(),
  age: integer('age').notNull(),
  email: text('email').notNull().unique(),
})

Setup Drizzle config file

Drizzle config - a configuration file that is used by Drizzle Kit and contains all the information about your database connection, migration folder and schema files.

Create a drizzle.config.ts file in the root of your project and add the following content:

import 'dotenv/config'; // remove this line if you use Node.js v20.6.0 or later
import type { Config } from "drizzle-kit";

export default {
  schema: './netlify/edge-functions/common/schema.ts',
  out: './drizzle',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.DATABASE_URL!,
  },
} satisfies Config;

In this tutorial we will use Drizzle kit to push changes to the Neon database.

Apply changes to the database

npx drizzle-kit push

Alternatively, you can use migrations workflow. Read about it here: Migrations.

Connect Drizzle ORM to your database

Update your netlify/edge-functions/user.ts file and set up your database configuration:

import type { Context } from "@netlify/edge-functions";
import { usersTable } from "./common/schema.ts";
import { neon } from '@neondatabase/serverless';
import { drizzle } from 'drizzle-orm/neon-http';

export default async (request: Request, context: Context) => {
  const sql = neon(Netlify.env.get("DATABASE_URL")!);
  const db = drizzle({ client: sql });

  const users = await db.select().from(usersTable);

  return new Response(JSON.stringify(users));
};

Test your code locally

Run the following command to start the Netlify dev server:

netlify dev

When you first run the command it will suggest to configure VS Code to use Edge Functions. Click Yes to configure it. settings.json file will be created in the .vscode directory. If you still see red underlines, you can restart the Deno Language Server.

Open your browser and navigate to the route /user. You should see the user data returned from the Neon database:

[]

It could be an empty array if you haven’t added any data to the users_table table.

Initialize a new Netlify project

Run the following command to initialize a new Netlify project:

netlify init

Answer the questions in the CLI to create a new Netlify project. In this tutorial, we will choose Yes, create and deploy site manually -> <YOUR_TEAM> -> <SITE_NAME>.

Setup Netlify environment variables

Run the following command to import your environment variables into Netlify:

netlify env:import .env

Read more about Netlify environment variables here.

Deploy your project

Run the following command to deploy your project:

netlify deploy

Follow the instructions in the CLI to deploy your project to Netlify. In this tutorial our publish directory is '.'.

It is a draft deployment by default. To do a production deployment, run the following command:

netlify deploy --prod