Deployment on Vercel — The Lazy Genius Way

Alright, so you’re ready to go from Localhost Hero to Cloud Legend. But first — the question:

🤔 Why Vercel?

Imagine you want to host your NestJS app. You could:

• Buy a server 🖥️
• Install Linux 🐧
• Configure Nginx 🧑‍🔧
• Pray to the DevOps gods 🙏

…OR you could just use Vercel.

Vercel is like:

• Uber for apps → You don’t need to buy a car, you just ride.
• The fast-food of deployment → Push code, get a free .vercel.app domain, done. 🍔
• Free plan → Perfect for devs, students, and broke startup founders. 💸

So yeah, we choose Vercel because:

👉 It’s easy.

👉 It’s free.

👉 It makes you look smart in front of non-tech friends.

⚡ How Does Vercel Deploy?

Let’s break it down:

1. You push code → to GitHub / GitLab / Bitbucket.
2. Vercel sees it → like a nosy neighbor 👀.
3. It builds your app → runs npm install & npm run build.
4. It hosts your app → on its super cool servers.
5. Gives you a URL → something like https://my-nest-api.vercel.app.

So basically:

• You code.
• You push.
• You chill. 😎

🛠️ Deployment Method 1: Deploying with Full Source Code

This is the “everything-in-the-bag” approach. You give Vercel your whole source code and let it do the building. Easy peasy 🍋.

Folder Structure

my-nest-project/
│── src/
│   │── app.controller.ts
│   │── app.module.ts
│   │── main.ts
│── package.json
│── tsconfig.json
│── vercel.json

vercel.json

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

Steps to Deploy

1. Push your code to GitHub.

2. Go to vercel.com.

3. Click New Project → Import your repo.

4. Select project → click Deploy.

5. Wait 30 seconds.

6. Brag:

   Hey guys, my NestJS API is live at https://my-nest-project.vercel.app

🎉 Congratulations, you’re now a Cloud Engineer (well… kind of).

🧳 Deployment Method 2: Deploying Only the dist/ Folder

So you’re not just a developer… You’re a control freak developer 😎.

You don’t trust Vercel to touch your TypeScript — you want to build locally and ship only the finished product.

This is called dist-only deployment.

🧐 Why Deploy Only dist/?

• 🚀 Faster Deploys → no build step on Vercel.
• 🛠️ Predictable Builds → what runs locally = what runs in the cloud.
• 📦 Smaller Upload → only compiled JavaScript gets shipped.
• 🤓 Pro Mode → feels cooler to say “I control my production builds.”

🗂️ Final Folder Structure

After you run the build, your repo should look like this before pushing:

nest-dist-only/
│── dist/
│   │── main.js
│   │── app.module.js
│   │── app.controller.js
│── package.json
│── vercel.json
│── vercel.ts

📝 vercel.json

Tell Vercel to use your custom entry file:

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

⚡ vercel.ts (your entrypoint)

Create a vercel.ts in the root (not inside dist/). This will load your already-built NestJS app from dist/main.js.

import type { VercelRequest, VercelResponse } from '@vercel/node';
import app from './dist/main';

export default async function handler(req: VercelRequest, res: VercelResponse) {
  return app(req, res);
}

---

⚙️ Modify main.ts for Serverless

In NestJS, normally we do app.listen(3000).

But in Vercel (serverless) we don’t want that. Instead, we just return the handler.

Update your main.ts:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  await app.init(); // ❌ no listen() for serverless
  return app.getHttpAdapter().getInstance();
}

export default await bootstrap();

👉 This way, vercel.ts can just import app from './dist/main'.

🏗️ Step-by-Step Deployment

1. Build your app locally

   npm run build

   This creates the dist/ folder.

2. Prepare your files Your repo should include only:

   dist/
   package.json
   vercel.json
   vercel.ts

   (No src/, no node_modules/ — keep it clean 🧹).

3. Push to GitHub

   git add .
   git commit -m "dist-only deploy setup"
   git push origin main

4. Go to Vercel → vercel.com

   • Click New Project.
   • Import your repo.
   • Deploy 🚀

5. Celebrate 🎉 You now have your NestJS app live at:

   https://your-dist-app.vercel.app

🎯 Quick Comparison

Method	Who should use it?
Full Source	Beginners, lazy devs, students
Dist Only	Pros, control freaks, people who hate waiting for Vercel builds

🏆 Final Thought

If Full Source Deployment is like packing your entire wardrobe for a 2-day trip…

Then Dist Deployment is like flying with only a backpack — efficient, light, and stylish. ✈️

So go ahead. Deploy that dist/ and flex on Twitter:

“Production build deployed to Vercel. Only pros will understand. 😉”