DEV Community

Cover image for Deploy Node API (Express Typescript) on Vercel
Tirth Patel
Tirth Patel

Posted on

Deploy Node API (Express Typescript) on Vercel

#express #typescript #vercel #node

A couple of weeks back, I developed an API in Node based on Typescript. I tried to deploy it on Heroku.

But the process was long and time-consuming. Also, I noticed that Heroku is terminating free accounts from 28 Nov'22. ☹️

Heroku

So I tried to experiment with various other platforms to deploy my Typescript-based Node API. Amon them free, robust, and versatile platform I found is VERCEL. Based on my experience, here are a few simple steps which you can follow and easily deploy Typescript-based Node API on Vercel. 🚀

1) Express + Typescript Boilerplate App ✏️

Create express project with typescript. You can follow the below-mentioned steps to make a boilerplate for the project. (Github repo link is provided at end of article)

  • Initialize node project


    npm init -y

  • Install packages (you can use npm/yarn/pnpm)


    yarn add express
yarn add -D typescript
yarn add -D @types/node
yarn add -D @types/express
yarn add -D nodemon
yarn add -D ts-node

  • Create tsconfig.json
    To work with typescript we need to make tsconfig.json file which will help to compile and build Typescript files in plain JS. Execute below command


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



Once the file is created you can keep it as is, or cleanup non necessary stuff. Replace content of tsconfig.json with following :


    {
    "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/**/*"]
    }
Enter fullscreen mode Exit fullscreen mode

  • Update scripts in package.json


    "start": "nodemon src/index.ts",
  • Write express server code : Create file : src/index.ts and paste following code in it 
  import express, { Request, Response } from 'express'

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

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

  app.get('/ping', (_req: Request, res: Response) => {
    return res.send('pong 🏓')
  })

  app.listen(port, () => {
    return console.log(`Server is listening on ${port}`)
  })
Enter fullscreen mode Exit fullscreen mode
  • Spin up server : Run yarn start or npm run start command in terminal to start express serve. You can open browser and go to localhost:8080. API will return response of Express Typescript on Vercel.

2) Initialize git in our project. 📥

  • Make a .gitignore file in the root of the folder. And add node_modules to it. If .gitignore file exists check that node_modules is added into it.
  • Execute git init in the terminal (from root of project) or you can use VS Code's source control tab to initialize git repository.
  • Connect local repo to remote (github/bitbucket). You can use any of the version control system to publish your repository.

3) Create Vercel project 🗃️

  • Go to vercel.com -> Login
  • Login using the Version control platform you have kept your repository.

  • From the dashboard -> Add new project -> Select your repository -> Deploy

  • Afer deployment you will see something similar to this! 😟

Vercel Error
(ERROR 🚨)

  • Don't worry... Just follow on steps to fix it. 👍

4) Add Vercel config in app ⚙️

  • In the above step, after your fist deploy is completed, you can see that we're not getting Express Typescript on Vercel response from API.
  • To work this as expected, we need to tell Vercel that is a API and you need to serve this as a serverless function.
  • For this, simply we need to add vercel.json file in root of our project. Paste below code in file. 
{
    "version": 2,
    "builds": [
        {
            "src": "dist/index.js",
            "use": "@vercel/node",
            "config": { "includeFiles": ["dist/**"] }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/index.js"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode



NOTE: Check your tsconfig.json file. The value against outDir must be kept instead of dist. If your config file has any other value than dist, replace it at either of both places.

5) Add a pre-commit hook 🏷️

  • Vercel requires plain JS source files instead of Typescript. In order to do this, we need to build the project before committing and send compiled JS files so that Vercel can parse those files and serve the API.

  • Install pre-commit and rimraf package :


  yarn add -D pre-commit
  yarn add -D rimraf
Enter fullscreen mode Exit fullscreen mode
  • Modify scripts field in package.json file as follows: 
  "scripts": {
  "start": "nodemon src/index.ts",
  "build": "rimraf dist && tsc",
  "ts.check": "tsc --project tsconfig.json",
  "add-build": "git add dist",
  "test": "echo \"Error: no test specified\" && exit 1"
  },
Enter fullscreen mode Exit fullscreen mode
  • Add new field pre-commit field in package.json : 
  "pre-commit": [
      "ts.check",
      "build",
      "add-build"
  ]
Enter fullscreen mode Exit fullscreen mode
  • What this will do? → Whenever you will commit, the commands written in pre-commit will be executed. It will check Typescript errors, build the project and add build folder to the staged changes. (If you opt for manual build, don't forget to run build command to start build.)

5) Re-Deploy and Re-Check API 🔁

  • Commit the changes you have made and push the commit to GitHub. Check on vercel for the new deployment. Vercel will automatically trigger a new deployment on every push. Incase it is not started, you can manually start a deployment.

  • Once new deployment is live, you can copy the deploy URL and run in browser. You will see Express Typescript on Vercel as a API response. Hurrah 😃

API working

  • To assure that API is working perfectly, you can also hit /ping route which will return pong 🏓 as the response.

Ping Pong response

Closing comments 🙋‍♂️

  • Thank you for following steps with me. Incase you find any issue in above mentioned steps, please ping in comment.
  • Also a humble request you to write which topic you want in my next blog. I will include that in my target list. 🎯
  • Github repo link for this project : Express Typescript Code



Tirth Patel, signing off! 🫡

Latest comments (37)

Collapse
 
chema profile image
José María CL •

I'm not happy, and I'm not proud of adding the transpiled code to the git repository. But sadly I could't find a better way to deploy the app successfully.

Collapse
 
aezamorasanchez profile image
AEZamoraSanchez •

hello i followed all the steps and uploaded my repository which is connected with sequelize to postgresql but i get this error:
Error: Please install pg package manually
at ConnectionManager._loadDialectModule (/var/task/node_modules/sequelize/lib/dialects/abstract/connection-manager.js:55:15)
at new ConnectionManager (/var/task/node_modules/sequelize/lib/dialects/postgres/connection-manager.js:15:24)
at new PostgresDialect (/var/task/node_modules/sequelize/lib/dialects/postgres/index.js:13:30)
at new Sequelize (/var/task/node_modules/sequelize/lib/sequelize.js:194:20)
at Object. (/var/task/dist/db-connection.js:8:14)
at Module._compile (node:internal/modules/cjs/loader:1358:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
at Module.load (node:internal/modules/cjs/loader:1208:32)
at Module._load (node:internal/modules/cjs/loader:1024:12)
at /opt/rust/nodejs.js:1:11506
anyone know how to fix it ?

Collapse
 
cakrads profile image
Cakra Danu Sedayu •

thank you so much, this really helpful..

Is there a way to avoid pushing the dist folder?
So Vercel will build and generate the dist folder for us

Collapse
 
mihaiandrei97 profile image
Mihai-Adrian Andrei •

Hello! Have you found a way?

Collapse
 
samukbg profile image
Sam Kütt •

Super useful! Thanks mate

Collapse
 
pedrohvfernandes profile image
Pedro Henrique Vieira Fernandes • • Edited

Hello, I did as taught in the post, but the build is not done at the time of commit, I use github desktop to make the commits.
Image description

Collapse
 
pedrohvfernandes profile image
Pedro Henrique Vieira Fernandes •

The solution until then is to build manually

Collapse
 
glauberdm profile image
Glauber Duarte Monteiro •

Thank you very much!

Collapse
 
soydiego profile image
Diego Franchina •

Hi, I hope you can help me.
I follow the tutorial and a lot of tutorials more and I couldn't get the solution.
Always I receive the same error on vercel: 404 not found.

I wrote a post in StackOverflow, maybe someone can reply or if you know what i'm doing wrong, i will appreaciate. This is the post of my question: stackoverflow.com/questions/775091...

Thanks for your time

Collapse
 
zhouzhonghao profile image
Bobby Zhou •

Please refer to this question stackoverflow.com/questions/765767....
I posted an anwser there.

Collapse
 
zhouzhonghao profile image
Bobby Zhou •

You need to share a demo so that another person can help you.

Collapse
 
soydiego profile image
Diego Franchina •

Thanks. I didn't share a demo because I wrote my structure and my config file. with exactly all the things.

Collapse
 
ochukodotspace profile image
Ochuko •

Thank you, this helped a lot!

Collapse
 
musharaffleapo profile image
musharaf-fleapo •

Really Helpful thanks

Collapse
 
shimont profile image
Shimon Tolts •

This tutorial helped me, thank you

View full discussion (37 comments)