How to Deploy TypeScript Express App to Vercel

Recently, I’ve been refactoring a project, and after updating it, Vercel deployment completely broke. The backend kept throwing 404 or 500 errors and just wouldn’t work properly. After a long debugging session and trying countless fixes, I finally got it running again. I’m documenting the solution here for future reference.

This project follows a frontend-backend separation approach:

• Frontend: React
• Backend: Express
• Language: TypeScript
• Deployment: Vercel

Vercel’s Serverless Function only run when triggered by a request. That means all API endpoints must be routed through api/index.ts, which serves as the entry point for the Express app. Additionally, request forwarding must be configured in vercel.json to ensure proper routing.

Backend Folder Structure:

Setting Up the Express Server:

To check if the backend is running properly, I added a simple homepage route that returns a response.

1
import express from "express";
2
import cors from "cors";
3

4
const app: express();
5

6
app.use(cors());
7
app.use(express.json());
8

9
// confirm the backend is working
10
app.get('/', (req, res) => res.send('Express on Vercel.'));
11

12
export default app;

Entry Point for Vercel:

Vercel only executes files inside the api/ folder as API endpoints, we need to create index.ts in api folder to load our Express app.

1
import app from '../src/app';
2

3
export default app;

If your Express app isn’t located inside api/, you’ll need to configure a rewrite rule to redirect.

Routing Requests Correctly:

This config file ensures that all incoming requests are routed to api/index.ts.

1
{
2
  "version": 2,
3
  "builds": [
4
    {
5
      "src": "api/index.ts",
6
      "use": "@vercel/node"
7
    }
8
  ],
9
  "routes": [
10
    {
11
      "src": "/(.*)",
12
      "dest": "/api/index.ts"
13
    }
14
  ]
15
}

No special configurations are needed in tsconfig.json or package.json.

Deployment Success!

Once deployed, visiting the backend URL should display “Express on Vercel.” (the response from the homepage route)

If you see this, congratulations—your backend is up and running! 🎉

Refer to How to deploy your Express.js app at Vercel