How to Deploy a Node.js App with TypeScript on Vercel

Deploying applications has become an essential skill for developers, and Vercel makes this process incredibly simple. If you’re working with Node.js and TypeScript, you might be wondering how to get your app live with minimal effort. In this guide, I’ll walk you through deploying your Node.js app with TypeScript to Vercel, covering everything from setup to final deployment.

Whether you're building APIs, web apps, or serverless functions, this tutorial will help you make the most of Vercel’s powerful platform.

Step 1: Create an Express + TypeScript boilerplate app

To get started, we'll create an Express project with TypeScript. Below are the steps to set up the boilerplate for your project.

Initialize a Node.js project

First, initialize a new Node.js project by running the following command in your terminal:

npm init -y

This will create a package.json file for your project.

Install dependencies

Next, install the necessary dependencies for Express and TypeScript. Use your preferred package manager (e.g., npm, yarn, or pnpm).

npm i express
npm i -D typescript @types/node @types/express nodemon ts-node

Set up TypeScript configuration

To use TypeScript, you’ll need a tsconfig.json file. You can generate this file by running:

npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true

This command creates a default tsconfig.json file. You can simplify it by replacing its content with the following configuration:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    }
  },
  "include": ["./src/**/*"]
}

Update scripts in package.json

Modify the scripts section of your package.json to include a command for starting the server:

"scripts": {
  "start": "nodemon src/index.ts"
}

Write the Express server code

Now, create the entry point for your application. Create a file named src/index.ts and add the following code:

import express, { Request, Response } from 'express';

const app = express();
const port = process.env.PORT || 3000;

app.get('/', (_req: Request, res: Response) => {
  return res.send('Express + TypeScript on Vercel');
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

Start the server

Finally, start your Express server by running the following command in your terminal:

npm start

Open your browser and navigate to http://localhost:3000 . You should see the response: "Express + TypeScript on Vercel".

Step 2: Add Vercel configuration to your project

Vercel needs to know that the app is an API and should be served as a serverless function. To achieve this, you need to configure the project for Vercel.

Add a vercel.json file

In the root of your project directory, create a file named vercel.json. Add the following configuration to the file:

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

Verify your tsconfig.json file

Check the tsconfig.json file in your project to confirm that the outDir value matches the directory specified in the vercel.json file (in this case, dist). If the outDir in your tsconfig.json is different, replace dist with the value specified in your outDir setting in both your vercel.json file and the corresponding build output.

Step 3: Add a pre-commit hook

To deploy a Node.js app with TypeScript on Vercel, the project needs to provide plain JavaScript files instead of TypeScript. To automate the process of building the project and adding the compiled JavaScript files to the repository before every commit, you can set up a pre-commit hook.

Install these packages

npm i -D pre-commit rimraf

These packages will help set up the pre-commit hook and clean the dist folder before every build.

Update package.json scripts

Modify the scripts section of your package.json file to include the following:

"scripts": {
  "start": "nodemon src/index.ts",
  "build": "rimraf dist && tsc",
  "ts-check": "tsc --project tsconfig.json",
  "add-build": "git add dist"
}

Add a pre-commit field in package.json

"pre-commit": [
  "ts-check",
  "build",
  "add-build"
]

Every time you commit changes, the following steps will automatically run:

Step 4: Initialize Git in your project

In this step, we'll initialize a Git repository for our project and connect it to a remote repository.

Create a .gitignore file In the root folder of your project, create a file named .gitignore if it doesn’t already exist. Add node_modules to this file to ensure that the node_modules directory is not tracked by Git:

Initialize a Git repository

git init

Connect to a remote repository

Now, connect your local Git repository to a remote repository hosted on a platform like GitHub or BitBucket.

git remote add origin <REMOTE_URL>

Push your code to the remote repo

git add .
git commit -m "Initial commit"
git push -u origin main

Step 5: Create a Vercel project

With your project ready and hosted on a version control platform, the next step is to deploy it on Vercel.

Log in to Vercel

Add a new project

And that’s it! With Vercel, deploying a Node.js app written in TypeScript is as straightforward as it gets. By following this guide, you’ve learned how to set up your project, configure TypeScript, and host your app in just a few steps.

Conclusion

Vercel’s intuitive interface and robust deployment capabilities make it an excellent choice for hosting Node.js applications. So, what’s next? Start building, deploying, and scaling your apps with confidence!