Deploying an Existing Express API + Prisma + Supabase Project to Vercel

Deploying an existing Express API integrated with Prisma and Supabase to Vercel can be straightforward if done correctly. In this guide, we’ll cover the steps to deploy your project using the Vercel CLI (instead of GitHub Connect), the necessary configurations, and potential pitfalls to avoid.

---

Prerequisites

Before we start, ensure you have:

• An existing project using Express, Prisma, and Supabase.
• A Vercel account.
• The Vercel CLI installed:

  npm install -g vercel

• Supabase database credentials.

---

Step 1: Prepare Your Project for Vercel

1.1 Ensure Your Entry Point is Serverless Compatible

Vercel’s serverless environment works differently from traditional Node.js servers. Modify your server.js or app.js to export the Express app as a module. For example:

const express = require('express');
const app = express();

// Your routes
app.get('/', (req, res) => {
  res.send('Hello, Vercel!');
});

module.exports = app;

Then create a vercel.json file to define the serverless configuration:

{
  "version": 2,
  "builds": [
    {
      "src": "server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/server.js"
    }
  ]
}

1.2 Prisma Client Initialization

Ensure your Prisma Client is initialized correctly to avoid multiple instances in a serverless environment. Use a singleton pattern:

const { PrismaClient } = require('@prisma/client');

let prisma;

if (!global.prisma) {
  global.prisma = new PrismaClient();
}
prisma = global.prisma;

module.exports = prisma;

1.3 Add prisma generate to postinstall

To avoid runtime errors due to missing Prisma Client files in the serverless environment, add the prisma generate command to the postinstall script in your package.json:

{
  "scripts": {
    "postinstall": "prisma generate"
  }
}

This ensures Prisma Client is always generated after dependencies are installed.

---

Step 2: Configure Supabase Connection

2.1 How to Get Your Database URL from Supabase

To retrieve your DATABASE_URL and DIRECT_URL from Supabase:

1. Log in to your Supabase Dashboard.
2. Select your project.
3. Navigate to Project Settings > API > Connection string for Prisma.
4. Under this section, you will find:
   • DATABASE_URL: This is the connection string for using Supabase's connection pooling.
   • DIRECT_URL: This is the direct connection string to your database for administrative tasks like migrations.
5. Copy these values and store them securely.

2.2 Add DATABASE_URL and DIRECT_URL

In Vercel, environment variables are stored securely. Navigate to Project Settings > Environment Variables in your Vercel dashboard and add:

• DATABASE_URL: This connects Prisma to Supabase using connection pooling.

  postgresql://<USER>:<PASSWORD>@<PROJECT>.pooler.supabase.com:6543/<DB_NAME>?pgbouncer=true

• DIRECT_URL: This allows direct connections for migrations.

  postgresql://<USER>:<PASSWORD>@<PROJECT>.supabase.co:5432/<DB_NAME>

Ensure these variables match the ones defined in your schema.prisma file:

datasource db {
  provider   = "postgresql"
  url        = env("DATABASE_URL")
  directUrl  = env("DIRECT_URL")
}

---

Step 3: Deploy Using Vercel CLI

3.1 Login to Vercel CLI

Run the following command to log in:

vercel login

3.2 Deploy the Project

Run the deployment command from your project’s root directory:

vercel

Follow the interactive prompts to configure your project. Select the root folder and default settings if unsure.

3.3 Set Environment Variables via CLI

You can also set environment variables using the CLI:

vercel env add DATABASE_URL
vercel env add DIRECT_URL

Paste your Supabase credentials when prompted.

---

Step 4: Run Prisma Migrations

To apply your Prisma migrations, use the Vercel CLI to spawn a shell on your deployment and run migrations:

vercel --prod --exec "npx prisma migrate deploy"

This ensures your database schema is up to date without manual intervention.

---

Conclusion

Deploying an Express API with Prisma and Supabase to Vercel requires careful configuration of serverless patterns, environment variables, and database connections. By following the steps outlined here, you can ensure a smooth deployment process and avoid common pitfalls.

If you encounter any issues or have questions, feel free to share them in the comments below! 🚀

Comments

[CV]

Nice tutorial! Keep up the good work

[Twilight]

Thank you! Glad you liked it. I'll keep it up!