Guide to Running Express.js Backend on Vercel

Let’s face it—who even uses JavaScript these days? TypeScript is the way to go for modern backend development. But deploying an Express.js backend with TypeScript on Vercel? That’s where things get tricky. In this guide, I’ll walk you through the common challenges, my journey to solving them, and how you can deploy your Express.js backend on Vercel (and other platforms) with ease.

TL;DR

If you’re here just for the solution, here’s the magic vercel.json configuration:

{
  "version": 2,
    "builds": [ { 
        "src": "src/index.ts", // This must be your entrypoint could be /server.ts
        "use": "@vercel/node"
    } ],
    "routes": [{ 
        "src": "/(.*)", // Redirecting all the route to / to src/index.ts
        "dest": "src/index.ts" 
    }]
}

With this setup, you can deploy your Express.js backend on Vercel without headaches. Here’s the Github repo and live links on vercel, railway, render. Keep reading if you want to know the why and how behind this configuration.

What is Vercel, and Why Use It for Express.js?

Vercel is a popular platform for deploying web applications, known for its seamless frontend deployments and serverless functions. While it’s often associated with frontend frameworks like Next.js, it’s also a great choice for deploying backend services, including Express.js apps. Vercel’s serverless architecture ensures scalability, fast deployments, and minimal configuration—perfect for modern developers.

However, deploying an Express.js backend on Vercel, especially with TypeScript, comes with its own set of challenges. Let’s dive into the solution.

Common Challenges While Deploying Express.js on Vercel

Deploying an Express.js backend on Vercel isn’t as straightforward as it seems. Here are some common issues you might face:

1. Code Visibility or File Downloads: Instead of running your server, Vercel serves your source code as static files. Hitting an endpoint might display your code or trigger a file download.

2. 404 Not Found Errors: You might see Vercel’s default 404 page, even when your routes are correctly defined.

3. Build Failures: Vercel’s build process might fail, especially when working with TypeScript, because it expects JavaScript files by default.

These issues can be frustrating, but they’re solvable with the right configuration.

My Journey: How I Found the Solution

The Initial Struggles: Why Vercel Felt Like a Maze

I’ll be honest—I never thought deploying an Express.js backend on Vercel would be this tricky. I usually deploy my backends on VPS or AWS EC2 instances, but suddenly, everyone started asking me how to do it on Vercel. I thought, “How hard can it be? Just link and deploy, right?” Oh, how wrong I was.

I started by following Vercel’s official Express.js starter guide, but it didn’t have a TypeScript setup. The folder structure felt weird (coding in an /api folder like Next.js), and the routing configuration seemed overly complicated. Plus, I wanted a setup that would work across multiple platforms like Railway and Render without rewriting my code.

The Turning Point: Hours of Googling and Experimentation

After hours of Googling, reading blogs, and watching YouTube videos, I realized most solutions either:

• Uploaded the dist folder to GitHub.

• Used JavaScript instead of TypeScript.

• Relied on complex rewrites in the vercel.json file.

None of these felt right to me. So, I decided to dig deeper into Vercel’s documentation and experiment with different configurations.

The Breakthrough: The Perfect vercel.json Configuration

After several failed attempts (you can see my desperation in the commit history), I finally cracked the code. The key was to configure the vercel.json file correctly:

{
  "version": 2,
  "builds": [
    {
      "src": "src/index.ts", // Point to your TypeScript entry file
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)", // Redirect all routes to your entry point
      "dest": "src/index.ts"
    }
  ]
}

This configuration tells Vercel to:

1. Use src/index.ts as the entry point.

2. Route all incoming requests to your Express.js server.

And just like that, it worked! No more code visibility issues, no more 404 errors—just a smooth, functioning backend.

The Result: One-Click Deployment Across Multiple Platforms

The best part? This setup isn’t just limited to Vercel. With the same configuration and industry-standard package.json scripts, I was able to deploy my Express.js backend on Railway and Render with just one click. Here’s an example of my package.json:

...  
"scripts": {
    "start": "node dist/index.js",
    "build": "tsc -b",
    "dev": "npm run build && npm run start"
  },
...

No platform-specific changes, no rewrites—just pure flexibility and efficiency.

Conclusion: Key Takeaways

To summarize, here’s what you need to deploy your Express.js backend on Vercel successfully:

• Use the correct vercel.json configuration (shown above).

• Stick to industry-standard package.json scripts for building and starting your app.

• Test your setup locally before deploying to avoid common issues like code visibility or 404 errors.

With these steps, you can deploy your Express.js backend on Vercel, Railway, Render, and more—without breaking a sweat.

Call to Action

Ready to deploy your Express.js backend on Vercel? Give this setup a try and let me know how it goes! If you run into any issues or have questions, drop a comment below or check out my Github repository for a working example. Happy deploying!