Deploy Full Stack App to Vercel | React Nodejs Express Mongo | MERN Tutorial
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Hello friends. In this video, we are going to Deploy Full Stack MERN App to Vercel.
Full Stack Responsive React Movies App With API | MERN Project: • Part 1 | Full Stack Re...
Don't forget to click the like button and share the video with your friends if you found the video useful.
Please support me by LIKE, SHARE and SUBSCRIBE, thank you!
---- CONTACT
Facebook: / trananh2001
Github: github.com/trananhtuat
---- RESOURCE
Vercel: vercel.com/
Vercel config: vercel.com/docs/project-confi...
Mongo Atlas: www.mongodb.com/atlas/database
---- TIMESTAMP
00:00 - Intro
0:28 - Setup Mongo Atlas
04:24 - Deploy Node Express API to Vercel
10:38 - Deploy React App to Vercel
--------------------------------------------------
#tuattrananh #React #ReactJS #vercel #JavaScript #JS #HTML #CSS #JavaScript #Ecommerce #slider #responsive #Darkmode #landingpage #landing #Redux #reactredux #reacthook #reacthooks #hooks #router #reactrouter #reactrouterdom #swiperjs #swiperreact #swiper
Thanks a ton!!! I've been struggling for a while with deployment and your video helped :)
Dude, thank you so much! This finally helped me deploy my mern app. I have been searching for videos and been stuck for a while. Thank you!
❤️❤️❤️❤️
This was really useful, thank you so much. Exactly what I needed
I got cors error allow origin not defined
Thank you sooo much for this video!!!❤ Was worried about the deployment part of my application but this video was a blessing in disguise. Once again thanx.🙏
I'm getting 404: NOT_FOUND when I try to deploy the server folder
I have the same 404 error.
Check if you have a path with just "/". If you don't, make one with a message to display then everything should be okay. That was my own problem
Thank you so much. This tutorial helped after 3 hours of struggle
I'm glad you found it useful
Thanks brother, after trying many tutorials, yours was the one that worked for me. Greetings from Colombia
Glad it's useful to you
Thanks for the video. Nice to see you can deploy the backend and front end, separately, from the same repo.
I originally tried this on Netlify before realizing they don't support a traditional backend. It looks like Vercel also does not recommend this. They suggest using serverless functions, probably because this supports their business model. However for now, it looks like this can still be accomplished.
I probably wouldn't do a product app like this but for a portfolio project I think it's ok.
Do you know if the bandwidth that the frontend and backend will use to communicate, will consume the bandwidth offered by Vercel, or if both are hosted in Vercel it will not consume bandwidth?
Working Man
Awesome
Thanks
I do not use a db. Req is made from frontend to express server. How do I connect this in the last step?
thanks a lot!! very relevant for my case now!
I didnt understand anything you said but this video helped me deploy ty :)
😂😂
Thanks for this video, you got a new subscriber! :)
thank you so much ❤️
thx, but how do you know what to add as suffix for deployed api
This video was helpful, thanks!
❤️❤️❤️❤️
Thank you sooo much for this video brooo
Very grateful. Please do a tutorial on React, Node, and Postgres on Vercel.
Thanks a bunch this helped a lot.
Im having a similar issue my backend is deployed to vercel but somewhere on the frontend im still targeting localhost instead of the deployment url and idk where lol its starting to aggravate me at this point
Amazing video...Thanks
Have you deployed web fullstack with React Js (Front-end) and Sailjs(Backend)? Can you help me deploy Sailsjs ?
Cannot read properties of undefined (reading 'data') How can i fix?
Em deploy lên vercel nhưng api của em trả về "You need to enable JavaScript to run this app" là sao anh nhỉ ? Em cảm ơn
it helped thanks a lot
my website is deployed but chrome marked it as a deceptive site ahead, how did you bypass it?
ps: found the solution, the Netflix clone domain name mislead the google to interpret that I am impersonating as Netflix web app, thus marked as phishing malicious site.
How it is mern app if can't deploy it as single project just like we do on heroku
do you know Rasa NLU?, I just wanted to ask if I can deploy my mern with Rasa NLU ?
This is amazing video, you are a very good teacher! I will give you a like and subscribe to your channel.
backend not deployed showing 'page not found'😪
thx bro out of 3 vercel tutorials this one worked 👍
👍👍👍
@tuattrananh i am getting 494 error page after deploying server
Thanks for the video.
Hello anh
em đang là sinh viên và có một dự án Mern stack
em up theo anh thì nó chỉ lên được fe còn be thì lại không kết nối được
anh có thể giúp em được không
Thank you for the video! Please tell me, if I wrote a backend on Nest, a database on Mongo_DB, how to deploy it?
thanks a lot, but why when I reload or window.onreload it turns 404: NOT_FOUND
Please tell me the theme you are using on bsvode
what is version 2 at 8:15 ???
I got the error after deploying the vercel.json, the error is 404
Am I the only one who getting this error - "No Output Directory named "public" found after the Build completed. You can configure the Output Directory in your Project Settings." ?
thank u so much
Cho em hỏi là anh mất bao lâu để hoàn thành project này vậy ạ
10:20 sao đoạn này nó báo 504: gateway_timeout nhỉ
Very useful
y you dont have this repo in github
everything is worked but I can't see the data coming from MongoDB!
Sir when your next video coming?
When your next video coming and which topic?
Sao mình toàn bị lỗi 404 nhỉ
Hay quá bạn ơi. Cảm ơn rất nhiều !!!!!!
❤️❤️❤️❤️
really useful 🤩🤩
thank you
Mình đã xem video và làm theo hd của bạn nhưng vẫn bị lỗi mà ko hiểu tại sao luôn. Nếu bạn đọc đc cmt này thì có thể hỗ trợ mình được ko?
HI,
So in config file(environment variables) I am saving FRONTEND_URL and BACKEND_URL so that I can take it to configure cors, passport etc.
While deploying backend to vercel, what should I add these values in environment variables? Any Idea?
What I did:
First I deployed frontend and pasted the FRONTEND_URL as the environment variable while deploying backend, but what should I do for BACKEND_URL field.
Thanks in advance for the help!!!!!!!!!!
I don't understand your problem??
Thanks bro
🔥🔥🔥🔥🔥
Have you thought about a way to deploy the server and the client on one vercel instance?
I tried several ways, but i don't think that it is possible.
it is impossible
thank you so much
❤️❤️❤️❤️
anh sao em thử deploy be lên vercel làm theo như video anh. Mà bị 404 Not Found do sao ạ, em tìm các nguồn mà chưa fix đc ạ. Em cảm ơn anh
bạn có cách giải quyết chưa, mình cũng gặp trường hợp 404 như bạn :
500 error why?
You didn't explain where you found the TMDB_BASE_URL or the TMDB_key? or is that something we make up
th-cam.com/video/j-Sn1b4OlLA/w-d-xo.html
did you figure this out?
Thanks
don`t use version anymore, it's deprecated
I’m getting 404 error code. Please help sir.
th-cam.com/video/9V5F-OnPsms/w-d-xo.html
i use the same steps but i can't connect with the database what is the issue
did you see the error message?
Error connecting to the database: Cannot read properties of undefined (reading 'admin')
@@tuattrananh
Please create portfolio with next js 13, tailwind and Sanity
See JavaScript Mastery channel
opps it's not working
How did you manage to pass cors error ?
app.use(cors()) in express
@@tuattrananh I did but already getting
been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
do i have a chance to make api url http ?
@@uguur adding a origin = true
app.use(cors({ credentials: true, origin: true }));
@@tuattrananh it doesnt work. I got the same issue
Getting 404 page after deploying server
What to do
Mee too
guys, be careful name of the file is verCel, not verSel
where is "verSel"?
@@tuattrananh in my case
ông nói tiếng anh như người việt bản địa z 🐧🐧🐧🐧
I tried your method after doing my method still getting error 404 after deploying backend in vercel...please help me
@Tuat Tran Anh
bro how can i contact you I'm Facing Error in your Project?
404 page
Did your error get resolved?
B ơi có thể giúp mình được không? mình deploy lên vercel thì bị lỗi này, mong bạn giúp mình, mình cảm ơn nhiều lắm.
404: NOT_FOUND
Code: NOT_FOUND
ID: sin1::8bjrc-1683094520229-3b89ec3c0e9a
ohh...i have the same problem and really can't figure out what's going on 🤯
Thanks mate you helped me a lot 🫱