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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
Good catch @aliffazmi. Thank you for pointing it out. 👍
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.
How do I change the output directory in vercel.json #5081
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 fordist
folder is given in vercel config. So when any endpoint is hit to the server, VERCEL find the respective route in thedist
folder and processes the request accordingly.Hope this might resolve your query. Please continue the thread if more discussion is needed.
Thanks.
We understand that but why can't vercel build and create the dist itself . Why dist need to be in git after git push .
Deploying Nest and nextjs doesn't need to include dist folder in git source code .
@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:
Any update on this question? Why indeed do we need to push compiled code to a "modern" platform?
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!
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.
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 :)
I've tried it, but it seems like the error persists... Normally it should work, but I don't know why it doesn't... 😭
Finally, I've resolved it, not by installing pg globally with npm, but by adding the dialectModule option into my database configuration as below :
Hello, I have the same problem, I put the dialectModule: pg in the DB conifg and nothing, still with the error. I have the DB in supabase and in vercel I installed the integration with supabase to see if it would be corrected but it didn't either. I don't know what to do anymore, is there any other alternative? Thank you.
Hi @soozav It seems there is some issue with pg package. I've found one resource that might help you. Please check this PG package issue
it helped me a lot! thank you
Welcome to DEV community @fatemesoleymanian
This tutorial helped me, thank you
very useful thank you!
Many thanks Tirth. I was stuck for 4 hours. Finally I found your post and Bingo!
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
Hello! Have you found a way?
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 ?
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
Please refer to this question stackoverflow.com/questions/765767....
I posted an anwser there.
You need to share a demo so that another person can help you.
Thanks. I didn't share a demo because I wrote my structure and my config file. with exactly all the things.
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!
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 includesrc
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 :)
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.
The solution until then is to build manually
Thank you very much!
Thank you, this helped a lot!
Really Helpful thanks
Super useful! Thanks mate