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)