Previous
Written by: rJTutorial Team | Last Updated:

Express.js Deploying Apps to Vercel

Vercel is a powerhouse cloud platform specifically optimized for the frontend and serverless functions. While many developers associate Vercel with Next.js, it is also an incredible home for Express.js applications. By converting your Express app into serverless functions, Vercel provides a deployment pipeline that is incredibly fast, scales to zero when not in use, and requires virtually no server maintenance.

 

Key Features of Deploying Express.js to Vercel

  • Serverless Deployment: Instead of paying for a server that runs 24/7, Vercel executes your code only when a request comes in. This means your application scales automatically from one user to thousands without manual intervention.
  • Global Distribution: Your Express endpoints are deployed to an edge network. This ensures that a user in Tokyo and a user in New York both experience low-latency responses.
  • Ease of Use: With the Vercel CLI and Git integrations, "Push to Deploy" becomes a reality. Every time you push code to your main branch, Vercel automatically builds and updates your production environment.
Developer Tip: Because Vercel uses a serverless architecture, your Express app "sleeps" when not in use. The first request after a period of inactivity might take a second longer to respond—this is known as a "cold start."

 

Steps to Deploy Express.js Apps to Vercel

1. Set Up a Vercel Account

First, head over to Vercel and sign up. It is highly recommended to sign up using your GitHub, GitLab, or Bitbucket account to make future deployments seamless.

2. Install Vercel CLI

The Vercel Command Line Interface (CLI) allows you to manage deployments directly from your terminal. Install it globally using npm:

npm install -g vercel

3. Prepare Your Express.js App

Before deploying, ensure your project structure is clean. Your main entry file (usually index.js or app.js) should export the Express instance so Vercel can handle the routing.

Best Practice: Ensure you export your app instance using module.exports = app; at the end of your main file. This allows Vercel to treat your Express app as a bridge for serverless functions.

Make sure your package.json includes the necessary start script:

{
  "scripts": {
    "start": "node index.js"
  }
}

4. Create vercel.json Configuration File

This is the most critical step. Vercel needs to know how to route incoming traffic to your Express application. In the root of your project, create a file named vercel.json:

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

What does this do? The builds section tells Vercel to use the Node.js runtime for your index.js file. The routes section ensures that all incoming requests are forwarded to your Express app, allowing Express to handle the routing internally.

Common Mistake: Forgetting to add the routes configuration. Without it, Vercel might only try to serve static files or return a 404 for any path other than the root.

5. Login to Vercel CLI

Authenticate your machine by running:

vercel login

This will open a browser window to verify your identity. Once confirmed, you're ready to deploy from the terminal.

6. Deploy the App

To start the deployment process, simply run:

vercel

The CLI will ask a few setup questions. For most Express apps, you can hit Enter to accept the default settings. Once the "Preview" deployment is finished, you can push to production using:

vercel --prod

7. Access the Deployed Application

After the command finishes, Vercel will output a unique URL. It usually looks like https://your-project-name.vercel.app. You can click this link to see your live Express API.

8. Set Up a Custom Domain (Optional)

If you have a professional domain, you can link it easily. While you can use the dashboard, the CLI makes it simple:

vercel domains add your-domain.com

9. Set Up Environment Variables (Optional)

Most real-world apps need database URLs or API keys. Never hardcode these! You can add them through the Vercel dashboard under Settings > Environment Variables, or use the CLI:

vercel env add DB_PASSWORD production
Watch Out: Do not upload your .env file to your Git repository. Always add it to .gitignore and use Vercel's built-in environment variable management to keep your secrets safe.

 

Example of package.json for Vercel

A production-ready package.json should look like this. Note that you don't need to specify a port in Vercel, as the platform handles the connection logic for you:

{
  "name": "express-vercel-demo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

 

Summary

Deploying Express.js to Vercel transforms your traditional server-side app into a modern, scalable, serverless API. By following the vercel.json configuration steps and using the CLI, you eliminate the headaches of server management and infrastructure scaling. Whether you are building a small hobby project or a high-traffic API, Vercel’s global edge network ensures your Express app remains fast and reliable for users everywhere.

Previous