DEV Community

Cover image for Deploying Full Stack Apps to Vercel: Complete Guide
Vipin Yadav
Vipin Yadav

Posted on

Deploying Full Stack Apps to Vercel: Complete Guide

#nextjs #serverless #tutorial #webdev

Deploying Full Stack Apps to Vercel: The Complete Production Guide

Deploying a frontend application to Vercel is incredibly simple — often just a few clicks.

But deploying a production-ready full stack application requires a deeper understanding of:

  • Serverless functions
  • Environment variables
  • Database connection handling
  • CORS policies
  • API routing
  • Domain configuration
  • Deployment architecture

Whether you're deploying a Next.js SaaS platform, a MERN stack application, or an AI-powered web app, this guide covers everything you need to know.

Why Use Vercel for Full Stack Apps?

Vercel is no longer just a static hosting platform.

With Serverless Functions, Edge Middleware, and seamless Git integrations, it has become one of the best platforms for modern full stack deployments.

Key Advantages

⚡ Global Edge Network

Your frontend assets are automatically cached across Vercel’s global CDN for faster loading times and better Core Web Vitals.

🚀 Automatic Scaling

API routes scale automatically depending on traffic demand.

🔄 Git-Based Deployments

Every Git push generates:

  • Preview deployments
  • Production builds
  • Rollback support

🔒 Built-In SSL

Every deployment gets HTTPS enabled automatically.

🧠 Excellent DX (Developer Experience)

Minimal DevOps overhead lets you focus on building products instead of managing infrastructure.

Prerequisites

Before deploying, make sure you have:

  • A GitHub/GitLab/Bitbucket repository
  • A Vercel account
  • A production database
  • Environment variables ready

Recommended Databases

Database Best For
MongoDB Atlas MERN applications
Neon PostgreSQL Next.js + Prisma
Supabase Realtime apps
PlanetScale Scalable MySQL

Understanding Full Stack Architectures on Vercel

There are two common approaches.

1. Decoupled Architecture (MERN Stack)

Frontend and backend are deployed separately.

my-app/
├── client/          # React / Vite frontend
└── server/          # Express backend
Enter fullscreen mode Exit fullscreen mode

Typical Stack

Frontend

  • React
  • Vite
  • TailwindCSS

Backend

  • Node.js
  • Express.js
  • MongoDB

2. Monolithic Architecture (Next.js)

Everything lives in a single repository.

my-next-app/
├── app/
│   ├── page.tsx
│   └── api/
│       └── users/route.ts
Enter fullscreen mode Exit fullscreen mode

This is currently the most optimized architecture for Vercel.

Deploying a MERN Backend on Vercel

Unlike traditional VPS hosting, Vercel runs backend APIs as serverless functions.

This means:

  • No permanent server process
  • No app.listen()
  • Functions spin up only when needed

Setting Up vercel.json

Create a vercel.json file inside your backend directory.

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

This tells Vercel:

  • Which file is the serverless entry point
  • How to route incoming traffic

Express Server Setup for Vercel

api/index.js 

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');

const app = express();

app.use(cors({
  origin: process.env.CLIENT_URL,
  credentials: true
}));

app.use(express.json());

app.get('/api/health', (req, res) => {
  res.status(200).json({
    success: true,
    message: 'API Running'
  });
});

module.exports = app;
Enter fullscreen mode Exit fullscreen mode

Important: Never Use app.listen()

This is one of the biggest mistakes beginners make.

❌ Wrong:

app.listen(5000);
Enter fullscreen mode Exit fullscreen mode

✅ Correct:

module.exports = app;
Enter fullscreen mode Exit fullscreen mode

Vercel handles the server lifecycle automatically.

Environment Variables

Never push secrets to GitHub.

Add Variables in Vercel Dashboard

Go to:

Project → Settings → Environment Variables
Enter fullscreen mode Exit fullscreen mode

Common Variables 

MONGODB_URI=
JWT_SECRET=
CLIENT_URL=
NEXTAUTH_SECRET=
DATABASE_URL=
OPENAI_API_KEY=
Enter fullscreen mode Exit fullscreen mode

Database Connection Best Practices

Why This Matters

Serverless functions are stateless.

Every request may create a new database connection.

Without optimization:

  • You hit connection limits
  • Performance becomes unstable
  • APIs become slow

MongoDB Connection Caching

Recommended Approach 

let isConnected = false;

const connectDB = async () => {
  if (isConnected) return;

  const db = await mongoose.connect(process.env.MONGODB_URI);

  isConnected = db.connections[0].readyState;
};

module.exports = connectDB;
Enter fullscreen mode Exit fullscreen mode

Prisma Setup for Next.js

If using Prisma:

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis

export const prisma =
  globalForPrisma.prisma ||
  new PrismaClient()

if (process.env.NODE_ENV !== 'production')
  globalForPrisma.prisma = prisma
Enter fullscreen mode Exit fullscreen mode

This prevents multiple Prisma instances during development.

Deploying Frontend + Backend Separately

Frontend Deployment

Deploy:

/client
Enter fullscreen mode Exit fullscreen mode

Backend Deployment

Deploy:

/server
Enter fullscreen mode Exit fullscreen mode

Then connect them using environment variables.

Connecting Frontend to Backend

Example:

VITE_API_URL=https://your-api.vercel.app
Enter fullscreen mode Exit fullscreen mode

or

NEXT_PUBLIC_API_URL=https://your-api.vercel.app
Enter fullscreen mode Exit fullscreen mode

Deploying with GitHub (Recommended)

Step-by-Step

1. Push Code to GitHub 

git add .
git commit -m "Initial deployment"
git push
Enter fullscreen mode Exit fullscreen mode

2. Import Repository in Vercel

Go to:

  • Add New
  • Project
  • Import Git Repository

3. Configure Root Directory

Project Root Directory
Frontend /client
Backend /server
Next.js /

4. Add Environment Variables

Paste all required secrets before deployment.

5. Deploy

Vercel automatically:

  • Installs dependencies
  • Builds the project
  • Creates preview deployments
  • Generates a production URL

Deploying with Vercel CLI

Install CLI:

npm install -g vercel
Enter fullscreen mode Exit fullscreen mode

Login:

vercel login
Enter fullscreen mode Exit fullscreen mode

Deploy:

vercel
Enter fullscreen mode Exit fullscreen mode

Production deployment:

vercel --prod
Enter fullscreen mode Exit fullscreen mode

Custom Domain Setup

Add Your Domain

Go to:

Project → Settings → Domains
Enter fullscreen mode Exit fullscreen mode

Add:

yourdomain.com
Enter fullscreen mode Exit fullscreen mode

DNS Configuration

Vercel will provide records like:

A Record 

76.76.21.21
Enter fullscreen mode Exit fullscreen mode

CNAME Record 

cname.vercel-dns.com
Enter fullscreen mode Exit fullscreen mode

Common Deployment Issues

1. CORS Errors

Problem 

Access-Control-Allow-Origin
Enter fullscreen mode Exit fullscreen mode

Solution 

app.use(cors({
  origin: process.env.CLIENT_URL,
  credentials: true
}));
Enter fullscreen mode Exit fullscreen mode

Also verify:

  • Correct production frontend URL
  • No trailing slash mismatch

2. Function Timeout Errors

Problem 

504 Gateway Timeout
Enter fullscreen mode Exit fullscreen mode

Cause

Heavy processing inside serverless functions.

Solutions

Use Background Jobs

Recommended services:

  • Inngest
  • Upstash QStash
  • Trigger.dev

Optimize Database Queries

Avoid:

  • Large aggregations
  • Blocking operations

3. Build Failures

Common Reasons

Missing Environment Variables

Example:

DATABASE_URL missing
Enter fullscreen mode Exit fullscreen mode

Incorrect Node Version

Specify:

{
  "engines": {
    "node": "20.x"
  }
}
Enter fullscreen mode Exit fullscreen mode

4. API Routes Not Working

Check:

  • File naming
  • Export syntax
  • Route paths
  • vercel.json

Production Deployment Tips

Use Separate Environments

Vercel supports:

  • Development
  • Preview
  • Production

Enable Analytics

Vercel Analytics helps track:

  • Speed
  • Performance
  • Core Web Vitals

Use Edge Middleware Carefully

Great for:

  • Authentication
  • Redirects
  • Rate limiting

But avoid heavy logic inside middleware.

Recommended Tech Stack for 2026

Best Overall Stack

Frontend

  • Next.js 15
  • TailwindCSS
  • ShadCN UI

Backend

  • Server Actions
  • Route Handlers

Database

  • PostgreSQL + Prisma

Auth

  • Better Auth / Clerk

Deployment

  • Vercel

Final Thoughts

Vercel provides one of the best developer experiences for deploying modern full stack applications.

Once you understand:

  • Serverless architecture
  • Environment variable management
  • Database optimization
  • Routing strategies

you can deploy highly scalable production-grade apps in minutes.

The biggest advantage is speed:

  • Faster iteration
  • Preview deployments
  • Minimal infrastructure management

Which means more time building products and less time handling DevOps.

Useful Resources

Top comments (0)