How to Deploy a Node.js App on Vercel (with API Routes Support)

Node.js has become the backbone of modern web applications, thanks to its speed, simplicity, and extensive ecosystem. Whether you're building a small web service or a full-fledged SaaS product, Node.js is often a reliable choice. However, deploying your app—especially one that includes backend functionality like API routes—can sometimes feel like navigating a minefield.

Enter Vercel.

Vercel is not just another hosting provider; it’s a powerful platform tailored for frontend frameworks and static sites, but it also offers robust support for serverless Node.js functions, making it an excellent choice for developers who want to deploy full-stack applications effortlessly.

Why Vercel?

Before we get technical, let’s quickly look at why you might choose Vercel for deploying your Node.js app.

Pros of Vercel for Node.js:

• Serverless Architecture: Your API routes run as serverless functions, scaling automatically.
• Zero Configuration: Push to Git and your app is deployed. It doesn’t get easier than this.
• Blazing Fast CDN: Static assets and dynamic content are served from the edge.
• Custom Domains & Previews: Automatic preview URLs for every branch/pull request.
• Built-in CI/CD: Integrates seamlessly with GitHub, GitLab, and Bitbucket.
• Great Developer Experience: CLI, Dashboard, and logs are easy to use and understand.

If you’re building a JAMstack, full-stack, or just a REST API with Node.js, Vercel is a strong candidate for deployment.

Step 1: Prepare Your Node.js App

Let’s say you have a simple Node.js app with some frontend pages and API routes. For this tutorial, we’ll keep it straightforward but Vercel supports complex setups too.

Here’s the folder structure we’ll use:

my-node-vercel-app/
│
├── api/
│   ├── hello.js
│   └── users.js
│
├── public/
│   └── logo.png
│
├── pages/
│   └── index.js
│
├── vercel.json
├── package.json
└── README.md

Key Points:

• api/ folder: Each file in this folder will become a serverless function (e.g., api/hello.js → /api/hello endpoint).
• pages/: If you're using a frontend like Next.js, it will be rendered here. Otherwise, you can just focus on API routes.
• public/: Static assets like images.
• vercel.json: Optional configuration file for Vercel deployments.

Step 2: Create a Node.js API Route

Let’s write a basic API route.

Create api/hello.js:

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Node.js on Vercel!' });
}

Or using CommonJS syntax:

module.exports = (req, res) => {
  res.status(200).json({ message: 'Hello from Node.js on Vercel!' });
};

Tip: Vercel supports both ESM and CommonJS, but you should stick to one to avoid confusion.

Let’s add one more route for demo:

Create api/users.js:

module.exports = (req, res) => {
  const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
  ];
  res.status(200).json(users);
};

Step 3: Test Locally Before Deploying

Before deploying, test your routes locally using Vercel CLI.

Install Vercel CLI

npm install -g vercel

Run Locally

From your project root:

vercel dev

This will start a local development server at http://localhost:3000.

Visit:

• http://localhost:3000/api/hello
• http://localhost:3000/api/users

If you see the expected JSON output, you’re good to go.

Step 4: Deploy to Vercel

Now comes the fun part—deployment!

Option A: Use GitHub (Recommended)

1. Push your project to GitHub.
2. Go to vercel.com and sign in.
3. Click “Add New Project” → Import your GitHub repo.
4. Configure project settings if prompted (usually Vercel detects everything).
5. Click Deploy.

That’s it. Your app is now live

Option B: Use Vercel CLI

Alternatively, deploy using CLI:

vercel

It will prompt you to:

• Link or create a project
• Set the project root
• Choose the scope/team
• Choose whether it’s a static or serverless project

Once done, Vercel gives you a public deployment URL like:

https://my-node-vercel-app.vercel.app

Visit:

• https://my-node-vercel-app.vercel.app/api/hello
• https://my-node-vercel-app.vercel.app/api/users

Step 5: Configuration with vercel.json

You can fine-tune deployments using vercel.json.

Here’s a basic example:

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

This tells Vercel to:

• Use Node.js for everything in api/
• Route any /api/* requests to corresponding JS files

You can also:

• Set custom headers
• Add rewrites, redirects
• Specify environment variables

Step 6: Add Environment Variables

If your app uses secret keys, database URLs, or API tokens, don’t hardcode them.

Instead, define them in the Vercel Dashboard:

1. Go to your project on vercel.com.
2. Click Settings > Environment Variables
3. Add key-value pairs, e.g.:

   * MONGO_URI
   * JWT_SECRET
   * API_KEY

To use in your code:

const uri = process.env.MONGO_URI;

Environment variables won’t be available in static files or frontend unless explicitly exposed.

Step 7: Handle CORS and Middleware

If your API routes will be consumed by a frontend hosted elsewhere (like a React SPA), you’ll need to handle CORS.

Install cors package:

npm install cors

Use it in your handler:

const cors = require('cors');
const handler = (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.status(200).json({ message: 'CORS-enabled!' });
};
 
module.exports = handler;

 For complex use cases, consider writing a wrapper middleware.

Step 8: Organize Your API Codebase

To avoid clutter, keep your API route handlers clean.

Consider this pattern:

api/
├── users/
│   ├── get.js
│   └── post.js
└── auth/
    └── login.js

Then route using:

{
  "routes": [
    { "src": "/api/users/get", "dest": "/api/users/get.js" },
    { "src": "/api/auth/login", "dest": "/api/auth/login.js" }
  ]
}

This helps scale your project nicely.

Step 9: Debugging Common Issues

Here are some common Vercel deployment errors with Node.js apps and how to fix them:

❌ "404 Not Found" for API route

• Check that your file is named correctly (case-sensitive).
• Make sure the route is defined correctly in vercel.json.

❌ process.env is undefined

• Make sure you’ve set the env variables in the Vercel dashboard.
• For frontend access, use the NEXT_PUBLIC_ prefix (for Next.js apps).

❌ Internal Server Error (500)

• Check the function logs: vercel logs <deployment-url> --since 1h
• Make sure you’re not using Node.js modules not supported in a serverless context (e.g., fs with large files).

Bonus: Integrate with a Frontend

If you’re using React, Next.js, or SvelteKit, you can seamlessly fetch data from your API routes.

// Inside your frontend component
useEffect(() => {
  fetch('/api/users')
    .then(res => res.json())
    .then(data => console.log(data));
}, []);

API routes act like a backend layer for your frontend. Great for authentication, database calls, and 3rd-party APIs.

When to Avoid Vercel (Caveats)

While Vercel is awesome, it’s not for every project.

You might want to avoid it if:

• You need persistent server state (e.g., WebSockets, in-memory cache)
• You run long background jobs or need cron jobs
• Your app requires access to a local file system at runtime

In such cases, platforms like Render, Railway, or traditional servers like DigitalOcean might suit better.

Final Thoughts

Deploying a Node.js app with API support on Vercel is a breeze once you understand the flow. It’s a perfect setup for projects where you need fast deployments, CI/CD, scalability, and serverless functions without managing infrastructure.

Whether you’re building a side project, MVP, or production-grade app, Vercel helps you focus on writing code and shipping fast.

TL;DR

• Place your API routes in api/ folder
• Use Vercel CLI to test locally
• Deploy via GitHub or vercel command
• Use vercel.json for config and routing
• Handle environment variables securely
• Avoid heavy server-side logic or persistent state

You may also like:

1. 10 Common Mistakes with Synchronous Code in Node.js

2. Why 85% of Developers Use Express.js Wrongly

3. Implementing Zero-Downtime Deployments in Node.js

4. 10 Common Memory Management Mistakes in Node.js

5. 5 Key Differences Between ^ and ~ in package.json

6. Scaling Node.js for Robust Multi-Tenant Architectures

7. 6 Common Mistakes in Domain-Driven Design (DDD) with Express.js

8. 10 Performance Enhancements in Node.js Using V8

9. Can Node.js Handle Millions of Users?

10. Express.js Secrets That Senior Developers Don’t Share
    Read more blogs from Here

Share your experiences in the comments, and let’s discuss how to tackle them!

Follow me on Linkedin