Day 48 of #100DayOfCode — Deployment I: Deploy Backend

Earlier, on Day 40, I built the backend for my auth system. Then on Day 44, I improved it by adding TypeScript and Zod for type safety and validation.

Today (Day 48), the goal was simple:
👉 Deploy the backend to production using Vercel

---

Why Vercel?

I chose Vercel for backend deployment because:

• Zero-config deployment (especially smooth with GitHub)
• Global edge network → fast response times
• Automatic CI/CD on every push
• Easy environment variable management
• Works well for serverless Node.js APIs

---

Step-by-Step Backend Deployment

Step 1: Add vercel.json

Create a vercel.json file in the root directory:

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

This tells Vercel:

• Where your built backend lives (dist/server.js)
• How to route all incoming requests

---

Step 2: Export Your App Properly

Make sure the main server is exported correctly.

In server.ts, after app.listen():

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`)
})
export default app;

⚠️ Important:

• Avoid calling app.listen() directly in serverless environments
• Vercel handles the server internally

---

Step 3: Build the Project

Run:

npm run build

This compiles your TypeScript into the dist folder.

---

Step 4: Deploy on Vercel

1. Go to vercel.com
2. Click Add New → Project
3. Import your GitHub repository

Now configure:

• Framework Preset → Auto-detect (or leave as Node.js)
• Build Command → npm run build
• Output Directory → dist
• Install Command → npm install

---

Step 5: Add Environment Variables

Before deploying:

• Go to Environment Variables
• Add all values from your .env file (e.g. DB URL, JWT secret, etc.)

⚠️ Never push .env to GitHub.

---

Step 6: Deploy

Click Deploy and let Vercel handle the rest.

After deployment:

• You’ll get a live URL
• Your backend API is now publicly accessible

---

Here's a simple explanation:

Normally (Local Development)

Your server runs like this:

app.listen(3000, () => console.log("Server running"))

Node.js starts a long-running process that keeps listening for requests 24/7 on your machine.

---

Problem with Vercel

Vercel is serverless, it doesn't run long-running processes. Instead it:

• Spins up a function only when a request comes in
• Shuts it down after the request is handled

So it doesn't need app.listen() — it just needs your app to handle requests.

---

The backend is live on this link. But you would see the text, "Cannot GET /" because it is an api backend. Try requesting "/api/users" and you would see the following message:

{
  "message": "Unauthorized"
}

That's because it needed authorized login from the frontend

---

What We Changed & Why

Change	Why
export default app	So Vercel can import and use your Express app as a serverless function
vercel.json	Tells Vercel where your built file is and to route all requests to it
"main": "dist/server.js"	Points to the compiled JS entry file
npm run build (tsc)	Vercel can't run TypeScript directly, needs compiled JS
Env vars on dashboard	.env file is never uploaded, so variables must be set manually

---

In Short

We're just telling Vercel "here is my Express app, treat it as a function that handles incoming requests" instead of a traditional always-on server.

---

Things I Learned

• Serverless ≠ traditional server (no listen() needed)
• Build output must match Vercel config (dist/server.js)
• Environment variables are critical for production
• Small config mistakes can break deployment 😅

---

🔜 What’s Next?

Day 49 → Deploy Frontend (Auth System UI)

---

Final Thoughts

This was my first proper backend deployment using Vercel, and honestly, it felt smoother than expected. The key is understanding how serverless works and structuring your project accordingly.

Thanks for reading. If you found this helpful, feel free to drop a like and share your thoughts.