DEV Community: Vipin Yadav

Deploying Full Stack Apps to Vercel: Complete Guide

Vipin Yadav — Wed, 27 May 2026 21:49:15 +0000

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

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

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"
    }
  ]
}

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;

Important: Never Use `app.listen()`

This is one of the biggest mistakes beginners make.

❌ Wrong:

app.listen(5000);

✅ Correct:

module.exports = app;

Vercel handles the server lifecycle automatically.

Environment Variables

Never push secrets to GitHub.

Add Variables in Vercel Dashboard

Go to:

Project → Settings → Environment Variables

Common Variables

MONGODB_URI=
JWT_SECRET=
CLIENT_URL=
NEXTAUTH_SECRET=
DATABASE_URL=
OPENAI_API_KEY=

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;

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

This prevents multiple Prisma instances during development.

Deploying Frontend + Backend Separately

Frontend Deployment

Deploy:

/client

Backend Deployment

Deploy:

/server

Then connect them using environment variables.

Connecting Frontend to Backend

Example:

VITE_API_URL=https://your-api.vercel.app

NEXT_PUBLIC_API_URL=https://your-api.vercel.app

Deploying with GitHub (Recommended)

Step-by-Step

1. Push Code to GitHub

git add .
git commit -m "Initial deployment"
git push

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

vercel login

Deploy:

vercel

Production deployment:

vercel --prod

Custom Domain Setup

Add Your Domain

Go to:

Project → Settings → Domains

Add:

yourdomain.com

DNS Configuration

Vercel will provide records like:

A Record

76.76.21.21

CNAME Record

cname.vercel-dns.com

Common Deployment Issues

1. CORS Errors

Problem

Access-Control-Allow-Origin

Solution

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

Also verify:

Correct production frontend URL
No trailing slash mismatch

2. Function Timeout Errors

Problem

504 Gateway Timeout

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

Incorrect Node Version

Specify:

{
  "engines": {
    "node": "20.x"
  }
}

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

How I Reduced My Docker Image Size by 90% Using Multi-Stage Builds

Vipin Yadav — Wed, 28 Jan 2026 17:06:58 +0000

Optimizing Docker Images: From Gigabytes to Megabytes

Docker images bloating to several gigabytes? Your container deployments taking forever? Multi-stage builds are the key to shrinking images, as seen in this transition from 1.2GB to 120MB.

The Problem

Standard Dockerfile builds include everything: build tools, dev dependencies, source files, and compilation artifacts. Your production container doesn't need any of that.

Before (1.2GB):

FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
CMD ["node", "dist/server.js"]

The Solution: Multi-Stage Builds

Multi-stage builds allow the use of multiple FROM statements. Each stage can copy artifacts from previous stages while leaving behind everything else.

After (120MB):

# Stage 1: Build
FROM node:18 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build

# Stage 2: Production
FROM node:18-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY --from=builder /app/node_modules ./node_modules
COPY package*.json ./
USER node
CMD ["node", "dist/server.js"]

Key Improvements

Alpine Base Image
node:18 ≈ 900MB
node:18-alpine ≈ 110MB
Production Dependencies Only
npm ci --only=production excludes devDependencies.
No TypeScript, testing frameworks, or linters in the production layer.
Selective Copying
Only copies dist/, node_modules/, and necessary config files.

Real-World Examples

1. Go Application

Go benefits significantly as the entire compiler is excluded from the final image.
Result: 800MB → 15MB

# Build stage
FROM golang:1.21 AS builder
WORKDIR /app
COPY go.mod go.sum ./
RUN go mod download
COPY . .
RUN CGO_ENABLED=0 GOOS=linux go build -o main .

# Production stage
FROM alpine:latest
RUN apk --no-cache add ca-certificates
WORKDIR /root/
COPY --from=builder /app/main .
CMD ["./main"]

2. Python with pip

FROM python:3.11 AS builder
WORKDIR /app
COPY requirements.txt .
RUN pip install --user -r requirements.txt

FROM python:3.11-slim
WORKDIR /app
COPY --from=builder /root/.local /root/.local
COPY . .
ENV PATH=/root/.local/bin:$PATH
CMD ["python", "app.py"]

3. Java with Maven

FROM maven:3.9-openjdk-17 AS builder
WORKDIR /app
COPY pom.xml .
RUN mvn dependency:go-offline
COPY src ./src
RUN mvn package -DskipTests

FROM openjdk:17-jdk-slim
COPY --from=builder /app/target/*.jar app.jar
CMD ["java", "-jar", "app.jar"]

Best Practices & Performance

Optimization Tips

Order Layers by Change Frequency: Place COPY package*.json before COPY . to leverage layer caching.
Use .dockerignore: Exclude node_modules, .git, and environment files.
Combine Commands: Use && and \ to reduce the number of layers in a single stage.

Performance Impact

Metric	Impact
Build Time (Subsequent)	60% Faster
Push/Pull Time	~85-90% Faster
Disk Space	90% Reduction
Memory Usage	40% Reduction

Debugging Multi-Stage Builds

You can build or inspect specific stages using the --target flag:

# Build specific stage for debugging
docker build --target builder -t myapp:debug .

# Inspect intermediate layers
docker history myapp:builder

Conclusion

The initial investment in refactoring your Dockerfile pays dividends in performance, cost, and developer experience. Start with your largest images first—that's where you'll see the biggest wins.

What size reduction did you achieve? Share your results below!

#docker #devops #containers #performance

How I Built LaunchTrack: An AI Career Coach with Next.js and Gemini API

Vipin Yadav — Fri, 16 Jan 2026 04:30:00 +0000

Hey everyone! 👋

I'm excited to share my latest project - **LaunchTrack**, an AI-powered career coaching platform. In this post, I'll walk you through how I built it and the technologies I used.

## 🚀 What is LaunchTrack?

LaunchTrack is an AI career coach that helps job seekers with:

- Personalized job search support
- Interview preparation
- Resume analysis
- Career advice powered by AI

**Live Demo:** [launchtrack.vercel.app](https://launchtrack.vercel.app)
**GitHub:** [github.com/vipinyadav01/aicareercoach](https://github.com/vipinyadav01/aicareercoach)

## 🛠️ Tech Stack

- **Frontend:** Next.js 14 (App Router)
- **AI:** Google Gemini API
- **Database:** Prisma + PostgreSQL
- **Authentication:** Clerk
- **Styling:** Tailwind CSS + Shadcn UI
- **State Management:** Zustand
- **Background Jobs:** Inngest

## 💡 Key Features

### 1. AI-Powered Career Advice

Using Google Gemini API, users get personalized career guidance based on their profile and goals.

### 2. Resume Analysis

Upload your resume and get instant AI feedback on how to improve it.

### 3. Interview Preparation

Practice with AI-generated interview questions tailored to your target role.

### 4. PWA Support

Works offline and can be installed as a mobile app!

## 🔧 Architecture Overview

┌─────────────────────────────────────────────┐
│ Next.js App │
├─────────────────────────────────────────────┤
│ Pages │ API Routes │ Server Actions │
├─────────────────────────────────────────────┤
│ Prisma ORM │
├─────────────────────────────────────────────┤
│ PostgreSQL │ Gemini API │ Inngest │
└─────────────────────────────────────────────┘


## 🎯 Challenges & Solutions

### Challenge 1: Rate Limiting Gemini API
**Solution:** Implemented request queuing with Inngest background jobs.

### Challenge 2: Streaming AI Responses
**Solution:** Used Next.js Edge Runtime with streaming responses.

### Challenge 3: PWA Offline Support
**Solution:** Configured next-pwa with custom service worker caching.

## 📊 Results

- ⚡ **Lighthouse Score:** 95+
- 📱 **PWA:** Installable on all devices
- 🔒 **Security:** A+ rating

## 🔗 Links

- **Portfolio:** [devxvipin.me](https://devxvipin.me)
- **GitHub:** [github.com/vipinyadav01](https://github.com/vipinyadav01)
- **LinkedIn:** [linkedin.com/in/vipinyadav01](https://linkedin.com/in/vipinyadav01)

---

Thanks for reading! Let me know if you have any questions in the comments.

Follow me for more web development content! 🚀

#nextjs #ai #webdev #javascript

DEV Community: Vipin Yadav

Deploying Full Stack Apps to Vercel: Complete Guide

Deploying Full Stack Apps to Vercel: The Complete Production Guide

Why Use Vercel for Full Stack Apps?

Key Advantages

⚡ Global Edge Network

🚀 Automatic Scaling

🔄 Git-Based Deployments

🔒 Built-In SSL

🧠 Excellent DX (Developer Experience)

Prerequisites

Recommended Databases

Understanding Full Stack Architectures on Vercel

1. Decoupled Architecture (MERN Stack)

Typical Stack

Frontend

Backend

2. Monolithic Architecture (Next.js)

Deploying a MERN Backend on Vercel

Setting Up vercel.json

Express Server Setup for Vercel

api/index.js

Important: Never Use app.listen()

Environment Variables

Add Variables in Vercel Dashboard

Common Variables

Database Connection Best Practices

Why This Matters

MongoDB Connection Caching

Recommended Approach

Prisma Setup for Next.js

Deploying Frontend + Backend Separately

Frontend Deployment

Backend Deployment

Connecting Frontend to Backend

Deploying with GitHub (Recommended)

Step-by-Step

1. Push Code to GitHub

2. Import Repository in Vercel

3. Configure Root Directory

4. Add Environment Variables

5. Deploy

Deploying with Vercel CLI

Custom Domain Setup

Add Your Domain

DNS Configuration

A Record

CNAME Record

Common Deployment Issues

1. CORS Errors

Problem

Solution

2. Function Timeout Errors

Problem

Cause

Solutions

Use Background Jobs

Optimize Database Queries

3. Build Failures

Common Reasons

Missing Environment Variables

Incorrect Node Version

4. API Routes Not Working

Production Deployment Tips

Use Separate Environments

Enable Analytics

Use Edge Middleware Carefully

Recommended Tech Stack for 2026

Best Overall Stack

Frontend

Backend

Database

Auth

Deployment

Final Thoughts

Useful Resources

How I Reduced My Docker Image Size by 90% Using Multi-Stage Builds

Optimizing Docker Images: From Gigabytes to Megabytes

The Problem

The Solution: Multi-Stage Builds

Setting Up `vercel.json`

`api/index.js`

Important: Never Use `app.listen()`