How to Deploy MERN Application on Vercel? HOST Full-Stack MERN App to Vercel for Free

[@MdArif-pc9bz]

Finally, I deployed my first MERN STACK ❤ app by watching your video.. thanks a lot 😊🙃

[@hannah51238]

As always Yousaf, you read my mind and make a video for what it needs. Thanks dude!

[@briankiprop7743]

Hey man this was dope i have been struggling with deployments ever since Heroku took down their free tier , one of the best instructional videos i have seen on the internet

[@simoncordova5655]

I currently find myself in the exact same position lol

[@micnguyen]

Thank you so much Mr. Yousaf, I was trying to deploy my project using Firebase but the backend wasn't working properly, your video is very helpful and I was able to deploy it now with Vercel! Thank you so much again!

[@andreavicari2159]

This Video is GOLD, the only one that Works!! Many Thanks 👏🎉 FOR OTHER USER: I tried and work fine ONLY, follow carefully the instructions. A masterpiece this video 🎩

[@golukaintura-u3h]

thanks man i struggle lot's for 5 hours to just deploy a mern stack app you are the one who solved my error thanks man

[@why_not01]

How you do that , i am facing issue can you please help me , i use vercel and my backend give 404 error please help me

[@_lessthanzero_]

@@why_not01 have u named the entry point file of the backend as index.js ? i resolved it like that. I has named it as server.js where all routes were then i changed it to index.js it worked

[@devmadaan5146]

I am struggling for 2 days now, It gives 504 error for my backend

[@nicobustelo]

te amo hno

[@VinayKotiya]

Thank you sir , I deploy my first MERN crud operation performing project on vercel😊

[@arunnishad7733]

Bhai kaise hua maine deploy kiya hua hai but jab post request mara maine contact pe toh detail save nhi ho paa rahi hai provide solution

[@VinayKotiya]

@@arunnishad7733 ok i will help you send me your github repository url

[@VijenderChimma]

bro i have created amother one trying to deploy it but is is showing 404 not found what i have to do i created vercel.json in server side pasted same code you written in vercel.json

[@samuellucas593]

lol bro your dp has been my desktop image since i started dev.

[@shivanisinha787]

This video was so helpful. I was getting problem in deploying my MERN project. But your video made it so easy for me to deploy the project. Thanks a lot.☺

[@codewithyousaf]

🙏

[@abhipathania2772]

Finally I deployed my first MERN Application by your video thanks a lot ❤

[@why_not01]

How you do that , i am facing issue can you please help me , i use vercel and my backend give 404 error please help me

[@adityakhajone250]

@@why_not01 same issue with me also

[@gedeonagmas]

this is the only video that worked for me. thanks a lot!!

[@why_not01]

How you do that , i am facing issue can you please help me , i use vercel and my backend give 404 error please help me

[@shoaibhasan4026]

I faced issues while deploying my mern project. Thanks for helping me ❤

[@why_not01]

How you do that , i am facing issue can you please help me

[@HieuNguyen-vn9vm]

I got a cors error in the server side uploads folder, it can't make a GET request with these image files. Any ideas how to fix it?

[@monke3043]

where ur image files are stored?

[@HieuNguyen-vn9vm]

@@monke3043 an uploads folder located in the root path

[@onoseogbidi3830]

Thank you for such an amazing video. It was a great guide to also deploy my app .

[@Pagegift]

Thank you for excellent tutorial, bro! Especially thanks for deploying FULL STACK app.

[@why_not01]

How you do that , i am facing issue can you please help me , i use vercel and my backend give 404 error please help me

[@bilalrasheed8272]

Bro what about Build (npm run build) Do you skipped it or we dont have to do that

[@JoonasKarp]

Yeah i want to know it also, did you figure it out!

[@shivdix]

no req vercel do it own

[@rupalsharma9948]

I am getting error 404: Not found on deploying the server. I have created the same vercel.json file as yours. My server contains app.js instead of index.js. how can I solve this issue?

[@imempire69]

I am having the same problem in server side only with post method.. I can't use post method:(

[@mostbeautifulpsychopath3876]

i have the same issue how did you do if you found a solution please tell us

[@akpofure9903]

@@imempire69same how did you solve it?

[@simonftwi4726]

i am having the same problem, anyone of you guys solve the issue

[@harshdangi6289]

I am having the same issue, did u solve it yet?

[@vikrams788]

Thanks a lot, this video perfectly covers everything

[@mix_mash3703]

Brother , I'm facing some challanges while deploying as I'm using express-session for my authentication in MERN app and cookies are not getting stored in browser in production environment but working fine in local environment

[@thrifterspoint1002]

who getting 404 the issue in vercel.json file it should b backend root directory if still error double check verscel.json code and those who facing error cors error or not getting data from database on calling backend api just go to your database under network access tab allow ur database ip address from everywhere.

[@ChandanKumarYadav-w4j]

after following the video instructions if any one gets an error they should follow this comment instruction it will work

[@markbtesh9485]

hey thanks for the tutorial. im still getting a CORS blocking error (No 'Access-Control-Allow-Origin' header is present) when i make a post request, i followed the way you did it and added the cors origin domain and its still giving me issues. any ideas?

[@saurabhtambolkar3406]

bro same here did u got the solution

[@mudhamvineethkumar5873]

iam also got same error @@saurabhtambolkar3406

[@feareeper494]

Hey did you figure this out? I have the same issue

[@aronstone4905]

did u got the solution

[@bilalillahi6347]

I am facing same cors error again and again. Did you get the Solution?

[@ashoknandurka7204]

What if i use mangodb docker container to connect to db ?

[@codewithyousaf]

try it.

[@krupapatel3769]

The vercel app says while deployment build cache uploaded: 1.405s what to do

[@mohdkhaleeq7468]

I am using mongo db compass instead of mongo atlas is it work if i follow all deployment steps

[@mohd.irfanlohar4544]

No brother you should have to use mongo db atlas because it's a cloud technology and mongo db compass is just a GUI for mongo db database which is present on your local machine.

[@bilalillahi6347]

No, it is local to you only.

[@rajatshukla2605]

Thank you this was very helpful!

[@victoremanoel8114]

My server show 404 not found. I've already entered the domains and atlas is allowing all the ips

[@codewithyousaf]

I will upload a video. Everything will be OK

[@JayaprasadB-px4vc]

uploading file on git hub directly selecting file or drag and drop right.

[@webdevtutorials6579]

No matter how much i try to get rid of CORS error, doesn't work

[@codewithyousaf]

The CORS error occured on vercel or on local machine also

[@sykbot]

Yes same for me, dont know why ? Not able to debug it In local it works fine, but on Vercel its giving Error

[@Ramya-zp7ew]

Sameeee @@sykbot

[@mohd.irfanlohar4544]

Too much helpful jus have one doubt actually my folder is like this inside frontend or react app folder I have backend folder so shall I continue with that I have to use folder structure like yours

[@Yonatan2479]

VERY GOOD TUTORIAL THANK YOU VERY MUCH

[@prince-k6586]

can this work if my server and client are in the same folder?

[@thoranchandramuvvala8128]

Everything got deployed but database connection is not getting established. Could anyone please help mee

[@darkexcalibur2999]

But the problem is you are running 2 servers, which is not efficient. For 1 project you are running two different servers, how can you deal with that

[@AshutoshYadav-r5p]

Hi @codewithyousaf, I am getting errors while using vite.config.js on the client side, can you please mention your client-side vite.config.js code content here. Also, how are you able to take index.html out of the public folder on the client side and not get an error if you are running with react-script. Anyone please reply if you know how to handle this issue, I am stuck and not able to deploy.

[@codewithyousaf]

github.com/YousafKhan1/Deploy_MERN

[@AshutoshYadav-r5p]

Thanks @@codewithyousaf will try and update soon.

[@hanifahabib-k7u]

i have question i have multiple pages so should I have to add API URL on each page ?

[@monke3043]

You should have created a configuration file in which the URL is assigned to a variable and exported. Then, you can import it on all the pages where needed. This will make your work easier, as you will only need to update the link in the configuration file.

[@adityakhajone250]

I have got 404: Not found error when I deployed backend file what should I do sir?

[@ankijitroy4786]

i still get the cors error

[@Rakesh._bhai]

Bro run npm cors in terminal and fixed that

[@white-listochechki]

can you please help ? im getting the index.js code back by visiting the server page

[@madhanarjun4767]

Bro I am getting npm run build error while deploying the frontend what to do

[@GopiKumar-r9k]

Hello Yousaf, I tried to deploy the project, I got issue. My issue is API is not running, It is showing index.js code only. Another issue is with frontend, initially it is displaying the login page and after refresh i am getting 404 error. Can you please help me asap

[@eklavyasanmotra3371]

if your server isn't running, maybe try giving access to any ip in database

[@MrBunny-fr4dz]

Bro still I'm getting Cors error! Could you please resolve it! I have written everything what you have written!

[@adarshrajyadav4963]

ya same here i am also cors error don't what to do?

[@bhupathinannu7098]

I didn't use axios can i stills host??

[@monishbk5612]

What ever I do I'm getting the cors error in my application

[@joshualazar40]

Your video on multer for uploading images was very helpful, I now need to deploy my app that uses multer. How does this effect that process?

[@adarshrajyadav4963]

Sir i am still getting cors error again and again

[@sumukhasureban8249]

I am getting CORS error after adding cors configuration

[@codewithyousaf]

in cors write app.use({ origin: "url of front-end that you hosted", credentials: true })

[@ashokreddy2982]

Everything is correct but you missed giving ENV variables while hosting Backend....which I figured it out later.

[@codewithyousaf]

U R Right.

[@ashokreddy2982]

@@codewithyousaf Thanks man you really made it soo simple and within one day i learnt how to host an Application myself with guidance of your video + some of my previous experiences learnt from my senior devs about changing APIs from local host to backend hosting path...

[@arpitajain1526]

How to give env while hosting backend

[@sagarmoriya9773]

dont know why adding frontend url then also getting cors errors

[@AkinRumah]

Can express and react deploy with same domain?

[@shabankhan4383]

Bro , trying since a very long time , the cors error isn't solving for me . I'm dying

[@codewithyousaf]

github.com/YousafKhan1/Deploy_MERN clone the project and try it

[@bilalillahi6347]

Even for me, sad

[@bilalillahi6347]

Did you solve it?

[@santhiraju1836]

Hi bro I've tried this and deployed perfectly, but database connection is lost, can you help me in this?

[@codewithyousaf]

where is the error?

[@why_not01]

How you do that , i am facing issue can you please help me , i use vercel and my backend give 404 error please help me

[@SurajX1100]

bro i am getting an error "this serverless function has crashed." please help

[@sohaililyas5560]

allow all ip to access mongodb not just local ip

[@motivationalmusic3721]

Vercel is faster than render ?

[@AdrianAlejandrino]

wow very nice video

[@anasmehmood627]

bro in my case main folder have store frontend and in main folder one have backend folder so how could i do it any one help me please remeber when i made a client folder and paste frontend file then coming error so please any one help me

[@amankumargupta8365]

Have u resolve this prblm

[@amankumargupta8365]

@anasmehmood627 have u solved it

[@aboubakrghout8180]

I got question to ask . Is there a way to change the domaine name for ur fronted app🤔

[@codewithyousaf]

You mean custom domain

[@javatutorials6747]

i am facing the error about the cross origin error

[@j.villasmil9575]

Thanks my friend. What if my DB is local? I mean, I'm not using atlas, should I use it instead?

[@Ai2025Batch]

for deploying you need connect with mongoDB atlas

[@Dev-Phantom]

on local machine app is working fine but on vercel in front end its giving cors error

[@m.zulqarnainchohan7773]

same i tried many times if you find any solution share with me

[@MrSIVA-uy4bx]

@@m.zulqarnainchohan7773 same problem facing how can i fix it

[@bilalillahi6347]

Same error, Did you resolve it by now?

[@VikramRathod-f4g]

would it be still work if i use mongodb compas instread atlas?

[@RohitKumar-qh5bq]

mongodb compass is a visualiser whereas mongodb atlas is a database service used to store db

[@codewithyousaf]

Yeah it will work compass is a GUI tool for managing data

[@ruthra5398]

I am getting 404 error after deploy?

[@LokeshPrajapati-e5c]

can we upload file like pdf and img on vercel deployment

[@sai-lb7ii]

bro can you do the class on cart section the selected products should display in the cart page bro

[@codewithyousaf]

I have a video for React JS. I didn't use backend that is just Front-end I made ecommerce app you can check that on my channel on first page.

[@sai-lb7ii]

@@codewithyousaf do it from backend only i selected the cart items after that only i did not get items selected to display selected products display

[@codewithyousaf]

@@sai-lb7ii Maybe I create a video in the future full-stack ecommerce

[@sai-lb7ii]

@@codewithyousaf try to do soon 🔜 I have pending on this bro really bro I am waiting for since one month onwards bro

[@aditibhatt7845]

@@sai-lb7ii Yes place make one I have the same problem

[@WebAppMeta]

Hey yousaf . thank you for the video. my problems when I tried to deploy api folder: Invalid request: `builds[0]` should NOT have additional property `user`. Please remove it. Please help

[@JoonasKarp]

How to do it without github ? Just git

[@NoumanKhan-ck7vx]

help get api working but login isnot

[@giomeskhoradze9994]

can you give src for this application?

[@md.al-amin9670]

i have some downloaded video and tell me how to make api/crud.

[@codewithyousaf]

You want to create API using node js.

[@ghulammohiyuddin387]

Great help

[@aryanmaheshwari1006]

how to get cors orgin url ?

[@codewithyousaf]

the name you assigned you app like ecomerce.vercel.com

[@ayushwaghe4038]

You should have given the git link difficult to copy things from video!

[@dhruvkumarroy892]

you are the man

[@himasailagonugunta2758]

i am getting cors error .. any help please

[@codewithyousaf]

did you put front-end URL inside Cors()

[@redbama30]

You saved me bro

[@Udit_singh]

bina build command ke kaise deploy krdiya bhai tune or env variable ka kya usko public rakhe 🤣🤣🤣🤣

[@codewithyousaf]

Vercel automatically runs the build command

[@Udit_singh]

@@codewithyousaf mere error hi build command mai aari hai bhai kaise auomatically krdega

[@codewithyousaf]

@@Udit_singh aj my ny ik aur video banalya MERN stack how to deploy it on vercel whatch it. I will publish it after one hour. when you are deploying there is a dropdown for "Build and Output Setting"

[@DevanshuAugusty]

thanx man

[@MrSIVA-uy4bx]

hi bro apis are deploy sucessfully in vercel bro. but after deployed apis are intigrated the front end code in reactjs cors error is comming how can i fix it bro tell me bro

[@alfaloverss3116]

cors block hi aa raha hai

[@himasailagonugunta2758]

same your error resolved?

[@alfaloverss3116]

@@himasailagonugunta2758 nhi tumhara hua ????

[@vashakir2452]

thanks alot

[@developerstring]

Hey Yousaf, could you please help to deploy my MERN app.

[@masterjodu6410]

thanks

[@siddhant56]

can you share the source code

[@Roozikhan565]

❤🎉❤

[@ojasshukla1501]

Diplaaaayyyy😂

[@muhammadalamzebmahar]

You tried your best but you are not good at English why don't you just your native language to communicate it would be better approach I believe.

[@mymemories8565]

cool

[@FalcoAMV]

ERROR 404

[@SurajX1100]

please help

[@aruha2847]

how to hide the password?

[@Curiousdev01]

add to .env file

[@AdrianAlejandrino]

int i = 1;

[@sachinvarma9949]

ok

[@Nyzz12]

s

[@AsterixAstrix]

so trashy.

[@throwawayaccount5464]

learn to speak more clearly dude work with your pronunciation

[@Dev-Phantom]

mine is giving unlimited cors error

[@Dev-Phantom]

at least you should have attached the repo of this code man.

[@Dev-Phantom]

at least send the repository

[@codewithyousaf]

github.com/YousafKhan1/Deploy_MERN