Deploying Express.js with Prisma API on Vercel 🚀

Deploying Express.js with Prisma on Vercel: A Step-by-Step Guide

This guide walks you through the process of setting up an Express.js application with Prisma and deploying it to Vercel. Follow these steps to get your API up and running.

---

Why Choose Vercel?

Vercel makes it incredibly easy to deploy serverless functions with minimal configuration. It’s developer-friendly, highly performant, and offers built-in support for JavaScript frameworks like Next.js. Moreover, it seamlessly supports deploying custom Express.js APIs, giving you flexibility and ease of use.

---

---

Step 1: Set Up index.js

Create an index.js file in your project directory and add the following code:

const express = require('express');
const bodyParser = require('body-parser');
const { PrismaClient } = require('@prisma/client');
const cors = require('cors');

const app = express();
// const prisma = new PrismaClient();
const PORT = 5000;

// Initialize Prisma Client for serverless environments
let prisma;

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

// Middleware 
app.use(bodyParser.json());
app.use(cors());

// Replace this with your actual JWT secret
const JWT_SECRET = 'your_jwt_secret';

// Test database connection on startup
app.get('/', async (req, res) => {
  try {
    await prisma.$connect();
    res.status(200).json({ status: "Connected to database" });
  } catch (error) {
    console.error("Database connection error:", error);
    res.status(500).json({ 
      error: "Database connection error",
      details: error.message 
    });
  }
  // Don't disconnect here as it might affect other routes
});

// Export the Express app
module.exports = (req, res) => {  
  app(req, res);
};

---

Step 2: Update package.json Scripts

Add the following scripts to your package.json file:

"scripts": {
    "dev": "nodemon index.js",
    "start": "node index.js",
    "build": "prisma generate",
    "vercel-build": "prisma generate"
}

• prisma generate ensures Prisma client is ready before deployment.
• vercel-build runs during Vercel's build process to prepare Prisma.

---

Step 3: Create vercel.json

Create a vercel.json file in your project directory and include these lines:

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

This configuration instructs Vercel to use the @vercel/node runtime to handle requests.

---

Step 4: Update schema.prisma for Serverless Deployments

Modify your schema.prisma file to include the shadowDatabaseUrl field for serverless environments:

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
  shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
}

The shadowDatabaseUrl is required for serverless platforms like Vercel to handle migrations effectively.

---

Step 5: Add Environment Variables to .env

Create a .env file in your project and include the following:

SHADOW_DATABASE_URL=YOUR_DATABASE_URL

• Replace YOUR_DATABASE_URL with your actual database connection string.

---

Step 6: Vercel Hosting Build Commands

When deploying to Vercel, ensure the following build commands are configured:

1. Build Command:

   prisma generate

1. Output Directory: Leave this blank as it is not required for serverless functions.

---

Deployment Steps Summary:

1. Install the Vercel CLI:

   npm install -g vercel

1. Log in to your Vercel account:

   vercel login

1. Deploy your application:

   vercel

Vercel will automatically detect the configuration and deploy your API.

---

That’s it! Your Express.js app with Prisma is now live on Vercel. 🎉