DEV Community

Deploy Node API (Express Typescript) on Vercel

Tirth Patel on November 16, 2022

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-consumin...

Read full post

Cel2022 • Apr 15 '23

It was useful but what I don´t undestand is why do we need to create dist directory?
That directory must be created when commit occurs but only into vercel.

Could you please explain that?
Have you tried to do the same but without the pre-commit dist folder creation?

How do I change the output directory in vercel.json #5081

Tirth Patel • Aug 13 '23

Hi @cel2022_01,
Good question. Actually the way VERCEL works is based on plain Javascript files. It can't directly operate on Typescript code. So inorder to run our Typescript based Express App, firstly we compile TS to JS. That compiled js source files are stored in dist folder. The path for dist folder is given in vercel config. So when any endpoint is hit to the server, VERCEL find the respective route in the dist folder and processes the request accordingly.

Hope this might resolve your query. Please continue the thread if more discussion is needed.
Thanks.

ThanHtutZaw • Mar 10 '24

We understand that but why can't vercel build and create the dist itself . Why dist need to be in git after git push .

ThanHtutZaw • Mar 10 '24

Deploying Nest and nextjs doesn't need to include dist folder in git source code .

Milos Ristic • Jul 22 '24 • Edited

@thanhtutzaw @cel2022_01 @gaborpinter
I am a bit late to this, but:
The exact issue is that @vercel/node package, through builds prop in vercel.json, doesn't include buildCommand from vercel.json, it just serves what's already built.
However, builds and routes commands are deprecated and it's enough to use rewrite (vercel.com/docs/projects/project-c...).
The easiest solution would be to "skip" tsc and serve API directly through api/index.ts
vercel.json will look like:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/api"
    }
  ]
}

Gábor Pintér • Jun 3 '24

Any update on this question? Why indeed do we need to push compiled code to a "modern" platform?

Aliff Azmi • Apr 11 '23 • Edited

Thanks!

This is very helpful.

For those who's still stuck at 404 error code missing in Vercel. Just remove the ignore built ts files which is in your .gitignore file. In this case remove or comment out the dist directory.

Tirth Patel • Aug 13 '23

Good catch @aliffazmi. Thank you for pointing it out. 👍

fatemesoleymanian • Jul 21 '23

it helped me a lot! thank you

Manpreet Singh • Jul 21 '23

Welcome to DEV community @fatemesoleymanian

Luis Verteliz • Dec 13 '22 • Edited

Hi Tirth, I'v tried to follow your instructions but I can make my app work, I get the following error: "Due to builds existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply."

In my app url I get the following error: "This Serverless Function has crashed".

Would you take a look at my code please?
github.com/SoozaV/sinecta-maps-bac...

Regards!

Luis Verteliz • Dec 14 '22

I think I found out the issue looking at my function logs:

Do you have any idea on how to solve this? I can't find a solution.

Regards.

Tirth Patel • Feb 7 '23

Or you can do one more thing, in the vercel project setting page you can override the build command. You can try this one: npm i -g pg && npm run vercel-build

This will first install pg package in your VM on cloud server. Then you can access it while calling API. Please try this as well. And let me know if it works.

Cheers :)

As Manjaka Josvah • May 23 '23

I've tried it, but it seems like the error persists... Normally it should work, but I don't know why it doesn't... 😭

As Manjaka Josvah • May 23 '23

Finally, I've resolved it, not by installing pg globally with npm, but by adding the dialectModule option into my database configuration as below :

export const dbConfig = {
  username: process.env.DB_USERNAME,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  host: process.env.DB_HOSTNAME,
  port: process.env.DB_PORT,
  dialect: 'postgres',
  dialectModule: pg, // I've added this.
  timezone: 'Etc/GMT+3', // Because process.env.TZ generated an error maybe due to time format
  define: {
    charset: 'utf8mb4',
    collate: 'utf8mb4_general_ci',
  },
  logging: false,
};

Shimon Tolts • Aug 2 '23

This tutorial helped me, thank you

Lucas Vieira • Jan 17 '23

very useful thank you!

Pouria Rezaei • Feb 11 '23

Many thanks Tirth. I was stuck for 4 hours. Finally I found your post and Bingo!

Cakra Danu Sedayu • Apr 14 '24

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

Mihai-Adrian Andrei • Sep 10 '24

Hello! Have you found a way?

Diego Franchina • Nov 19 '23

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

Bobby Zhou • Dec 3 '23

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

Bobby Zhou • Nov 23 '23

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

Diego Franchina • Nov 23 '23

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

AEZamoraSanchez • Jul 16 '24

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 ?

Pedro Henrique Vieira Fernandes • Nov 30 '23 • 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.

Pedro Henrique Vieira Fernandes • Nov 30 '23

The solution until then is to build manually

uzzadev • Mar 2 '23

Hi Tirth!!
Today I was following your post, it's perfect and help me a lot, also is working very well, however I have a question/scenario...

Once that I deployed successfully but then I tried to add a config package from npm (npmjs.com/package/config), which I used to manage different environment variables (development, production for instance),
and then I deploy to Vercel, I get the same 404 NOT_FOUND error.

Since the npm config package require to add a folder in root project called "config" where can include the environments configurations files for each environment, I thinking the problem is something missing in vercel.json config file in order to include the compiled config ts files.

I would appreciate if you can help me with some clues about this error or help me to understand and fix it.

Regards!

Tirth Patel • Aug 13 '23

Hi @uzzadev ,
I'm happy to hear that many developers like you are following the blog and it is helping to resolve your issue.

For the error you are facing is because there is some mis configuration in the VERCEL config. In the tsconfig.json file we're putting which files to include. Please check those parameters as well. Generally we include src folder and its subfolders. If you need to include any files/folders which are in root of the project, then please modify the tsconfig.json file.

Once you have configured the parameter, run the yarn build command. And in the dist folder, check whether the files which you included are having any presence/reference or not.

So the thumb rule is, VERCEL will pick all which it will get in dist folder. If any file/configuration is missing the server will throw 404/500 error.

Hope this might help you out to further debug the issue.
Thanks :)

José María CL • Feb 11 '25

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.