Deploy Full Stack App to Vercel | React Nodejs Express Mongo | MERN Tutorial
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
Пікірлер: 107
Thanks a ton!!! I've been struggling for a while with deployment and your video helped :)
This was really useful, thank you so much. Exactly what I needed
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!
@tuattrananh
Жыл бұрын
❤️❤️❤️❤️
thanks a lot!! very relevant for my case now!
Working Man Awesome Thanks
Thank you so much. This tutorial helped after 3 hours of struggle
@tuattrananh
5 ай бұрын
I'm glad you found it useful
Thanks brother, after trying many tutorials, yours was the one that worked for me. Greetings from Colombia
@tuattrananh
5 ай бұрын
Glad it's useful to you
Thanks a bunch this helped a lot.
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.🙏
@GideonOtuka
Жыл бұрын
I'm getting 404: NOT_FOUND when I try to deploy the server folder
@OganicaBean
Жыл бұрын
I have the same 404 error.
@GideonOtuka
Жыл бұрын
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
This video was helpful, thanks!
@tuattrananh
Жыл бұрын
❤️❤️❤️❤️
I got cors error allow origin not defined
Thank you sooo much for this video brooo
Thanks for this video, you got a new subscriber! :)
@tuattrananh
Жыл бұрын
thank you so much ❤️
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.
Amazing video...Thanks
thx bro out of 3 vercel tutorials this one worked 👍
@tuattrananh
Жыл бұрын
👍👍👍
@anupkumardutta_6196
Жыл бұрын
@tuattrananh i am getting 494 error page after deploying server
it helped thanks a lot
Thanks for the video.
I didnt understand anything you said but this video helped me deploy ty :)
@tuattrananh
Жыл бұрын
😂😂
Very grateful. Please do a tutorial on React, Node, and Postgres on Vercel.
I do not use a db. Req is made from frontend to express server. How do I connect this in the last step?
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?
This is amazing video, you are a very good teacher! I will give you a like and subscribe to your channel.
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
thank u so much
Hay quá bạn ơi. Cảm ơn rất nhiều !!!!!!
@tuattrananh
Жыл бұрын
❤️❤️❤️❤️
Very useful
thx, but how do you know what to add as suffix for deployed api
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
Cannot read properties of undefined (reading 'data') How can i fix?
🔥🔥🔥🔥🔥
Thanks bro
thank you so much
@tuattrananh
Жыл бұрын
❤️❤️❤️❤️
really useful 🤩🤩
@tuattrananh
5 ай бұрын
thank you
Please tell me the theme you are using on bsvode
Have you deployed web fullstack with React Js (Front-end) and Sailjs(Backend)? Can you help me deploy Sailsjs ?
do you know Rasa NLU?, I just wanted to ask if I can deploy my mern with Rasa NLU ?
backend not deployed showing 'page not found'😪
Thank you for the video! Please tell me, if I wrote a backend on Nest, a database on Mongo_DB, how to deploy it?
How it is mern app if can't deploy it as single project just like we do on heroku
thanks a lot, but why when I reload or window.onreload it turns 404: NOT_FOUND
what is version 2 at 8:15 ???
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
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.
Thanks
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!!!!!!!!!!
@tuattrananh
Жыл бұрын
I don't understand your problem??
When your next video coming and which topic?
Sir when your next video coming?
Sao mình toàn bị lỗi 404 nhỉ
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." ?
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ỉ
You didn't explain where you found the TMDB_BASE_URL or the TMDB_key? or is that something we make up
@tuattrananh
Жыл бұрын
kzread.info/dash/bejne/nGGH0JObZLLSfKQ.html
@abrarhussain_00
Жыл бұрын
did you figure this out?
y you dont have this repo in github
I got the error after deploying the vercel.json, the error is 404
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.
@tuattrananh
Жыл бұрын
it is impossible
everything is worked but I can't see the data coming from MongoDB!
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
@chihaile3927
Жыл бұрын
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 :
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?
Please create portfolio with next js 13, tailwind and Sanity
@_elusivex_
Жыл бұрын
See JavaScript Mastery channel
I’m getting 404 error code. Please help sir.
@MunibDalati
9 ай бұрын
kzread.info/dash/bejne/a4ppqI-InrPZndY.html
500 error why?
don`t use version anymore, it's deprecated
i use the same steps but i can't connect with the database what is the issue
@tuattrananh
5 ай бұрын
did you see the error message?
@melaku7
5 ай бұрын
Error connecting to the database: Cannot read properties of undefined (reading 'admin') @@tuattrananh
Getting 404 page after deploying server
@anupkumardutta_6196
Жыл бұрын
What to do
@ruthra5398
6 ай бұрын
Mee too
How did you manage to pass cors error ?
@tuattrananh
Жыл бұрын
app.use(cors()) in express
@uguur
Жыл бұрын
@@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 ?
@lethitruc6794
Жыл бұрын
@@uguur adding a origin = true app.use(cors({ credentials: true, origin: true }));
@Lotpite
Жыл бұрын
@@tuattrananh it doesnt work. I got the same issue
opps it's not working
guys, be careful name of the file is verCel, not verSel
@tuattrananh
4 ай бұрын
where is "verSel"?
@true227
4 ай бұрын
@@tuattrananh in my case
ông nói tiếng anh như người việt bản địa z 🐧🐧🐧🐧
Thanks mate you helped me a lot 🫱
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?
@anupkumardutta_6196
Жыл бұрын
404 page
@AmanThakur-ke1is
Жыл бұрын
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
@ambiguity1768
Жыл бұрын
ohh...i have the same problem and really can't figure out what's going on 🤯