DEV Community

Alifa Ara Heya
Alifa Ara Heya

Posted on

Deploy a TypeScript Node.js App to Vercel using Vercel CLI

#vercel #deployment #webdev

This guide will walk you through how to deploy a TypeScript-based Node.js backend using the Vercel CLI.

📂 Folder Structure (Simplified)

Your project directory should look like this:

.
├── src/
│   ├── app/
│   │   ├── controllers/
│   │   ├── models/
│   │   ├── interfaces/
│   ├── server.ts
│   ├── app.ts
├── dist/                  ← Compiled output (after build)
├── vercel.json
├── package.json
├── tsconfig.json
Enter fullscreen mode Exit fullscreen mode

✅ Prerequisites

  • You have a working TypeScript Node.js project.
  • TypeScript is properly configured (tsconfig.json).
  • You have a dist/ directory after building.
  • You have no errors after building (npm run build)

🧪 Step 1: Add Build Script

In your package.json, make sure you have the following scripts:

"scripts": {
  "dev": "ts-node-dev --respawn --transpile-only src/server.ts",
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "tsc",
  "lint": "npx eslint .",
  "lint:fix": "npx eslint . --fix"
}
Enter fullscreen mode Exit fullscreen mode

Then build the project:

npm run build
Enter fullscreen mode Exit fullscreen mode

This compiles TypeScript into JavaScript inside the dist/ folder.

⚙️ Step 2: Add vercel.json File

Create a file named vercel.json at the root of your project with the following content:

{
  "version": 2,
  "builds": [
    {
      "src": "dist/server.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/server.js"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

This config tells Vercel how to build and route requests to your backend.

📦 Step 3: Install Vercel CLI

If not already installed globally, run:

npm install -g vercel
Enter fullscreen mode Exit fullscreen mode

🔐 Step 4: Login to Vercel

Run:

vercel login
Enter fullscreen mode Exit fullscreen mode

You'll be prompted to log in using GitHub or email.

🚀 Step 5: Deploy to Vercel

Run the deployment command:

vercel --prod
Enter fullscreen mode Exit fullscreen mode

Follow the prompts:

? Set up and deploy “your-project”? (Y/n) → y
? Link to existing project? (y/N) → N
? What’s your project’s name? → library-management-api
? In which directory is your code located? → ./
Enter fullscreen mode Exit fullscreen mode

Vercel will build and deploy your app from the dist/server.js file.

🌐 Step 6: Access Your Deployed App

Once deployment completes, Vercel will display two URL links, one is inspection link and another one is production link. Choose (ctrl+click) inspection link. Vercel will show you a domain link.This is your live deployment link. Make sure the link works even in browser incognito mode.

https://library-management-api.vercel.app
Enter fullscreen mode Exit fullscreen mode

🔁 Redeploying

Anytime you make changes:

npm run build
vercel --prod
Enter fullscreen mode Exit fullscreen mode

Top comments (0)