How to fix NestJS deployment error to the Vercel? - node.js

Question

this is the now.json
{
"version": 2,
"name": "nestjs-now",
"builds": [
{
"src": "dist/main.js",
"use": "#now/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "dist/main.js"
}
]
}
I'm not sure what's the reason and how to fix.
I just followed the vercel tutorial to deploy my nestjs backend project, but don't works.
It inclues GraphQL APIs and Rest APIs together as well as socket.io server.

Answer 1

Why it doesn't work?
Serverless Functions on Vercel (at the moment) do not accept a build step for the code of the function. For that reason, any backend framework that needs a "build step" to generate a server, will not work.
What Vercel is best for?
Frontend deployments and Serverless Functions as helpers. Full-blown APIs should be deployed elsewhere. You can check the following resources:
https://vercel.com/guides
https://vercel.com/import
https://vercel.com/docs/runtimes#official-runtimes
What are my options?
I recommend that you use Heroku or Digital Ocean as alternatives.
Update 2021-11-11
Now you can deploy any framework with SSR, API routes, and Edge Functions (soon) to Vercel. Just make sure you are following the File System API specification.
You can read the introduction section for more information. Remember that Vercel is a platform optimized for frontend deployments.

Answer 2

the problem is that VERCEL looks for the DIST folder as soon as it starts the BUILD process
What you can do is remove the DIST folder from the .gitignore this way it will resolve the 404
after that, whenever you make a new deploy it is necessary to force deploy without cache to compile your dist againe

Answer 3

In your production dashboard you will find this buttom with
vercel function logs
and inside you can find what is breaking your app
but, in my opinion, the first mistake that are crashing is about your VERCEL.JSON file:
When you are building a serveless app in nestjs, you will not renderize by dist/ or output/, you gotta render from your src/, so your vercel.json must be like this:
{
"version": 2,
"builds": [
{
"src": "src/main.ts",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "src/main.ts",
"methods": ["GET", "POST", "PUT", "PATCH", "DELETE"]
}
]
}
And you must do set it with the documentation help
calling your API like it needs.
This following resolution doesn't works with NESTJS/SWAGGER because it is not sending SwaggerUIBundle to browser as in this image, but a solution to the same issue can be founded here with only swagger in C# (and if is your case, you can try to adapt it to nestjs/swagger)
I oppened this to find some solution

Answer 4

I have successfully deploy nestjs to vercel and I used the following starter project: https://github.com/nestjs/javascript-starter
1)- first, you need to install #babel/cli and #babel/core both at the same time, otherwise npx will install out-of-dated babel 6.x. which will cause issues later when building the project using babel, and thats according to babel own docs
2)- remove #babel/core from package.json
3)- remove #babel/cli if exists from package.json
4)- remove package-lock.json
5)- remove node_modules
6)- run the command npm i
7)- run the command npm i --save-dev #babel/core #babel/cli
8)- build/transpile the project using the command npx babel src --out-dir build
9)- add vercel.json to your project like with following
{
"version": 2,
"builds": [
{
"src": "build/main.js",
"use": "#vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "build/main.js",
"methods": [ "GET", "POST", "PUT", "PATCH", "DELETE" ]
}
]
}
10)- now push this to github, then deploy to vercel