How to Deploy MERN Application on Vercel? HOST Full-Stack MERN App to Vercel for Free
ฝัง
- เผยแพร่เมื่อ 1 ธ.ค. 2024
- #deploy #mernstack #free
In this video we will teach you How to Deploy MERN Application on Vercel? HOST Full-Stack MERN(MongoDB, Express, React, Node) App to Vercel for Free. First we will Deploy our server side app then front-end app to vercel.
Finally, I deployed my first MERN STACK ❤ app by watching your video.. thanks a lot 😊🙃
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
I currently find myself in the exact same position lol
As always Yousaf, you read my mind and make a video for what it needs. Thanks dude!
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
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
@@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
I am struggling for 2 days now,
It gives 504 error for my backend
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!
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
🎩
Thank you sir ,
I deploy my first MERN crud operation performing project on vercel😊
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
@@arunnishad7733 ok i will help you
send me your github repository url
I faced issues while deploying my mern project. Thanks for helping me ❤
How you do that , i am facing issue can you please help me
Finally I deployed my first MERN Application by your video thanks a lot ❤
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
@@why_not01 same issue with me also
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.☺
🙏
te amo hno
this is the only video that worked for me. thanks a lot!!
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
Thank you for excellent tutorial, bro! Especially thanks for deploying FULL STACK app.
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
Thank you for such an amazing video. It was a great guide to also deploy my app .
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.
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?
I am having the same problem in server side only with post method.. I can't use post method:(
i have the same issue how did you do if you found a solution please tell us
@@imempire69same how did you solve it?
i am having the same problem, anyone of you guys solve the issue
I am having the same issue, did u solve it yet?
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
Thanks a lot, this video perfectly covers everything
Everything is correct but you missed giving ENV variables while hosting Backend....which I figured it out later.
U R Right.
@@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...
How to give env while hosting backend
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
lol bro your dp has been my desktop image since i started dev.
Bro what about Build (npm run build)
Do you skipped it or we dont have to do that
Yeah i want to know it also, did you figure it out!
no req vercel do it own
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?
No matter how much i try to get rid of CORS error, doesn't work
The CORS error occured on vercel or on local machine also
Yes same for me, dont know why ? Not able to debug it
In local it works fine, but on Vercel its giving Error
Sameeee
@@sykbot
Thank you this was very helpful!
VERY GOOD TUTORIAL THANK YOU VERY MUCH
if your server isn't running, maybe try giving access to any ip in database
The vercel app says while deployment build cache uploaded: 1.405s what to do
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
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?
bro same here did u got the solution
iam also got same error @@saurabhtambolkar3406
Hey did you figure this out? I have the same issue
did u got the solution
I am facing same cors error again and again. Did you get the Solution?
My server show 404 not found. I've already entered the domains and atlas is allowing all the ips
I will upload a video. Everything will be OK
Thanks my friend. What if my DB is local? I mean, I'm not using atlas, should I use it instead?
for deploying you need connect with mongoDB atlas
wow very nice video
What if i use mangodb docker container to connect to db ?
try it.
bro can you do the class on cart section the selected products should display in the cart page bro
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.
@@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
@@sai-lb7ii Maybe I create a video in the future full-stack ecommerce
@@codewithyousaf try to do soon 🔜 I have pending on this bro really bro I am waiting for since one month onwards bro
@@sai-lb7ii Yes place make one I have the same problem
I have got 404: Not found error when I deployed backend file what should I do sir?
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.
github.com/YousafKhan1/Deploy_MERN
Thanks @@codewithyousaf will try and update soon.
i have question i have multiple pages so should I have to add API URL on each page ?
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.
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
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?
where ur image files are stored?
@@monke3043 an uploads folder located in the root path
uploading file on git hub directly selecting file or drag and drop right.
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
Bro still I'm getting Cors error! Could you please resolve it! I have written everything what you have written!
ya same here i am also cors error don't what to do?
can you please help ? im getting the index.js code back by visiting the server page
I am getting CORS error after adding cors configuration
in cors write app.use({
origin: "url of front-end that you hosted",
credentials: true
})
Bro , trying since a very long time , the cors error isn't solving for me . I'm dying
github.com/YousafKhan1/Deploy_MERN
clone the project and try it
Even for me, sad
Did you solve it?
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
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
What ever I do I'm getting the cors error in my application
Sir i am still getting cors error again and again
i still get the cors error
Bro run npm cors in terminal and fixed that
Can express and react deploy with same domain?
Bro I am getting npm run build error while deploying the frontend what to do
dont know why adding frontend url then also getting cors errors
I am using mongo db compass instead of mongo atlas is it work if i follow all deployment steps
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.
No, it is local to you only.
bro i am getting an error "this serverless function has crashed." please help
allow all ip to access mongodb not just local ip
i have some downloaded video and tell me how to make api/crud.
You want to create API using node js.
You should have given the git link difficult to copy things from video!
I didn't use axios can i stills host??
Vercel is faster than render ?
i am getting cors error .. any help please
did you put front-end URL inside Cors()
Great help
i am facing the error about the cross origin error
you are the man
on local machine app is working fine but on vercel in front end its giving cors error
same i tried many times if you find any solution share with me
@@m.zulqarnainchohan7773 same problem facing how can i fix it
Same error, Did you resolve it by now?
bina build command ke kaise deploy krdiya bhai tune or env variable ka kya usko public rakhe 🤣🤣🤣🤣
Vercel automatically runs the build command
@@codewithyousaf mere error hi build command mai aari hai bhai kaise auomatically krdega
@@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"
I am getting 404 error after deploy?
can you give src for this application?
can we upload file like pdf and img on vercel deployment
I got question to ask . Is there a way to change the domaine name for ur fronted app🤔
You mean custom domain
You saved me bro
help get api working but login isnot
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
Have u resolve this prblm
@anasmehmood627 have u solved it
would it be still work if i use mongodb compas instread atlas?
mongodb compass is a visualiser whereas mongodb atlas is a database service used to store db
Yeah it will work compass is a GUI tool for managing data
How to do it without github ? Just git
Diplaaaayyyy😂
how to get cors orgin url ?
the name you assigned you app like
ecomerce.vercel.com
Hey Yousaf, could you please help to deploy my MERN app.
thanks alot
thanks
ERROR 404
cool
can you share the source code
cors block hi aa raha hai
same your error resolved?
@@himasailagonugunta2758 nhi tumhara hua ????
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
❤🎉❤
int i = 1;
ok
please help
how to hide the password?
add to .env file
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.
s
learn to speak more clearly dude work with your pronunciation
so trashy.
at least you should have attached the repo of this code man.
mine is giving unlimited cors error
at least send the repository
github.com/YousafKhan1/Deploy_MERN
Thankyou sir
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
"src": "/(.*)",
"dest": "/",
"methods": ["GET","POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
"headers": {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
}
}
],
}
solve (No 'Access-Control-Allow-Origin' header is present)
You need to add the cors middleware in your backend code to handle CORS.
I am getting a reload error from vercel. It is an react app
ok