Duc Le

Posted on Dec 1, 2022

How to deploy your NestJS apps on Vercel

#webdev #javascript #typescript #node

With my little knowledge, Vercel isn’t a platform for backend services, and companies often don’t pick Vercel for their deployments. According to Vercel, they claim Vercel is the platform for frontend developers.

But even frontend developers have their own desire to create their own APIs to serve their experiments ( like me ). And I often pick **NestJS **to write APIs due to its fast development and build time, easy to learn ( but hard to master )

If you deployed **React **for **NextJS **apps on **Vercel **before, you can find it pretty convenient to deploy because of Vercel’s presets for libraries and frameworks. But for **NestJS **apps, **Vercel **will recognize your repository with Others preset, and when you try to deploy it with default settings, this will happen:

To solve this is fairly easy, what you have to do is create the vercel.json file in root folder and write this:

The vercel.json configuration file lets you configure, and override the default behavior of Vercel from within your project, find more details here

Build object definition:

src (String): A glob expression or pathname. If more than one file is resolved, one build will be created per matched file. It can include * and **.
use (String): An npm module to be installed by the build process.

Route object definition:

src: A PCRE-compatible regular expression that matches each incoming pathname (excluding query string).
methods: A set of HTTP method types. If no method is provided, requests with any HTTP method will be a candidate for the route.
dest: A destination pathname or full URL, including query string, with the ability to embed capture groups as $1, $2…

Run Vercel deploy again, you can see that Vercel successfully deployed our apps with build outputs:

[

*Note: my vercel.json is just a basic example on how it works, you should find the configuration that best suits you and your app

You can check out my source code here](https://github.com/leduc1901/nestjs-jwt-auth)

Last Words

Although my content is free for everyone, but if you find this article helpful, you can buy me a coffee here

Top comments (16)

nicostubi • Jan 10 '23

Nice article.

The config you wrote allowed me to pass the problem of the public directory.
However I'm using graphql and I have the following error when browsing the app:

`2023-01-10T17:26:08.853Z baf32391-0925-4f77-b503-ea1ba0c55cee ERROR Cannot find module 'src/common/gql.type'
Require stack:

/var/task/src/products/products.resolver.js
/var/task/src/products/products.module.js
/var/task/src/app.module.js
/var/task/src/main.js 2023-01-10T17:26:08.853Z baf32391-0925-4f77-b503-ea1ba0c55cee ERROR Did you forget to add it to "dependencies" in package.json? RequestId: baf32391-0925-4f77-b503-ea1ba0c55cee Error: Runtime exited with error: exit status 1 Runtime.ExitError`

Any ideas how to solve this? The Vercel documentation mentions some potential issues around case, bug my imports are correct with gql.type and when I look into the source folder that is deployed, the fil is present at the correct location.

Cheers,
Nicolas

Oyugo Obonyo • Jul 19 '23

Did you find a way of fixing this? I'm getting a similar error

nicostubi • Jul 19 '23

No, I finally used Azure

Oyugo Obonyo • Jul 20 '23

I fixed it by reverting to relative imports over everything.In your code you had an
like import {} from src/common.gql.type. Changing it to import {} from ../common.gql.type would probably work.

Frederick Obeng-Nyarko • Sep 17

For those having this error,

This Serverless Function has crashed. Your connection is working correctly. Vercel is working correctly. 500: INTERNAL_SERVER_ERROR Code: FUNCTION_INVOCATION_FAILED ID: bom1::sgk4v-1711014022883-1e9ed54f4c37

The workaround I did was to make sure all my imports were not using aliases.

I found out from my vercel logs.

Cannot find module 'src/common'
Require stack:

/var/task/api/src/modules/users/users.service.js

/var/task/api/src/modules/users/users.module.js

/var/task/api/src/app.module.js

/var/task/api/src/main.js Did you forget to add it to "dependencies" in package.json? Node.js process exited with exit status: 1. The logs above can help with debugging the issue. INIT_REPORT Init Duration: 1138.81 ms Phase: invoke Status: error Error Type: Runtime.ExitError

So I changed src/common to its actual path. eg .../.../.../common, and everything worked.

It appears vercel is unable to properly handle import aliases, particularly with NestJS. I guess you have to do some extra hacking to make it work, else you have to avoid path aliases.

Shafin The Developer • Jan 13

I wrote this article using Vercel CLI.

todayunboxed.com/deploy-your-nestj...

Anyone can check this out!

Sara Lufi • Jan 3 '23

Thanks for this post. If you don't mind, can you do one post on how to deploy a NestJS application which is inside an Nx monorepository that already has a NextJS app or ReactJS app.

Artem Shchirov • Sep 5 '23

Hi! Did you find how to do it?

Amit Thakur • Mar 21

Harsh gupta • May 28

Hey did you find any solution for this?

Nerd Corner • Nov 14

I had some issues when I deployed my Nest App on Vercel, i made a collection of the issues and wrote it down. Mainly for myself to remember when I need it again for another project, but it might also be helpful for others: nerd-corner.com/lessons-learned-hosting-nestjs-app-on-vercel/

hezf • Sep 24

Does anyone know how to deploy socket.io service on vercel？

HuyyDinhh • Nov 22 '23

pls, help me

es404020 • Feb 15

Any fix to the bug

Luís Felipe • Jan 8 '23

Thank you! i just want to ask you to put the OPTIONS method on your vercel.json file. if it is not there, the browser cannot make preflight requests, so you cannot make json requests and etc