Deploying an Express.js API on Vercel

Deploying an Express.js API can be challenging, especially when dealing with complex configurations and slow deployment times. While platforms like Render offer simplicity, they can sometimes be sluggish, leading to long load times for your applications. Vercel, on the other hand, provides a fast and efficient deployment solution that is well-suited for modern applications.

In this blog, I’ll provide a high-level overview of how to deploy an Express.js API on Vercel. By the end of this guide, you'll be able to deploy any Express.js API, regardless of its complexity, with ease.

Project Structure

Here’s a quick overview of the project files:

vercel.json: Vercel's configuration file.
src/app.ts: The main Express application file.
src/users.routes.ts: Routes for user operations.
src/analytics.routes.ts: Routes for analytics operations.
src/users.controllers.ts: Controller logic for user operations.
src/analytics.controllers.ts: Controller logic for analytics operations.

Vercel Configuration

Ensure you have a vercel.json file in the root of your project directory with the following content:

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

Breakdown of vercel.json:

version: Specifies the Vercel platform version.
builds: Defines how Vercel should build your application. We are using the @vercel/node builder to deploy a Node.js application.
routes: Maps incoming requests to your application’s entry point.

Code Files

Here’s the code for each file in the project:

`src/app.ts`

import express from "express";
import analyticsRoutes from "./routes/analytics.routes.js";
import usersRoutes from "./routes/users.routes.js";

const app = express();

app.use(express.json());

app.use("/api/users", usersRoutes);
app.use("/api/analytics", analyticsRoutes);

app.listen(8000);

export default app;

Don't forget to export the app instance!
Vercel requires the app instance to be exported because it uses this exported object to handle requests.
Vercel deploys your application as a serverless function. It needs to know where the entry point is to route requests properly.
By exporting app, Vercel can import and use it to handle incoming requests and manage server-side operations.

Important Note: Even though you’re using TypeScript, make sure to add .js at the end of the import paths. This is required because Vercel's serverless functions expect JavaScript files. TypeScript will be compiled to JavaScript, but Vercel needs to reference the JavaScript files directly.

`src/users.routes.ts`

import { Router } from "express";
import { DELETE, PUT } from "../controllers/users.controllers.js";

const usersRoutes = Router();

usersRoutes.route("").put(PUT).delete(DELETE);

export default usersRoutes;

`src/analytics.routes.ts`

import { Router } from "express";
import { GET, POST } from "../controllers/analytics.controllers.js";

const analyticsRoutes = Router();

analyticsRoutes.route("").get(GET).post(POST);

export default analyticsRoutes;

`src/users.controllers.ts`

import type { Request, Response } from "express";

export function PUT(req: Request, res: Response) {
  res.json({ message: "PUT /users" });
}

export function DELETE(req: Request, res: Response) {
  res.json({ message: "DELETE /users" });
}

`src/analytics.controllers.ts`

import type { Request, Response } from "express";

export function GET(req: Request, res: Response) {
  res.json({ message: "GET /analytics" });
}

export function POST(req: Request, res: Response) {
  res.json({ message: "POST /analytics" });
}

Deploy Using Vercel CLI

Install Vercel CLI:
```
 npm install -g vercel
```
Deploy Your Application: Navigate to your project directory and run:
```
 vercel
```
Follow the prompts to configure your deployment. You’ll be asked for your project name and whether you want to link it to an existing project or create a new one.
Verify Deployment: After deployment, you’ll receive a URL to access your live API. Test your endpoints to ensure everything is working correctly.

Deploy Using GitHub Integration

Push Code to GitHub: First, ensure your code is pushed to a GitHub repository.

 git init
 git add .
 git commit -m "Initial commit"
 git branch -M main
 git remote add origin <YOUR_GITHUB_REPO_URL>
 git push -u origin main

Create a Vercel Account: If you don’t have a Vercel account, sign up for one.
Import Your GitHub Repository:
- Go to your Vercel dashboard.
- Click on the “Add New” button and select “Import Project.”
- Choose “GitHub” as the source and authorize Vercel to access your GitHub repositories if you haven’t already.
Configure Your Deployment:
- Select your GitHub repository from the list.
- Set any environment variables if needed. You can configure these under the "Environment Variables" section.
Deploy Your Application:
- Click the “Deploy” button.
- Vercel will build and deploy your application automatically.
Verify Deployment: Once the deployment is complete, Vercel will provide a URL where you can access your live API. Test your endpoints to ensure everything is functioning as expected.

Conclusion

Deploying your Express.js API on Vercel is efficient and easy, whether you choose to use the Vercel CLI or GitHub integration. By following these steps, you can have your API live and accessible in no time. Customize your deployment configuration as needed and enjoy seamless deployment with Vercel.

For reference, check out the GitHub repository for this project: https://github.com/mskp/express-vercel-example

Sushant Pandey's Blog