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

  • @lavanyam3224
    @lavanyam3224 Жыл бұрын

    Thanks a ton!!! I've been struggling for a while with deployment and your video helped :)

  • @basurabasura
    @basurabasura Жыл бұрын

    This was really useful, thank you so much. Exactly what I needed

  • @stonecomstock
    @stonecomstock Жыл бұрын

    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

    @tuattrananh

    Жыл бұрын

    ❤️❤️❤️❤️

  • @Hyp3rX360
    @Hyp3rX3609 ай бұрын

    thanks a lot!! very relevant for my case now!

  • @sandip_kanzariya8476
    @sandip_kanzariya847610 ай бұрын

    Working Man Awesome Thanks

  • @pavanibasa5463
    @pavanibasa54635 ай бұрын

    Thank you so much. This tutorial helped after 3 hours of struggle

  • @tuattrananh

    @tuattrananh

    5 ай бұрын

    I'm glad you found it useful

  • @dionisiocarovasquez9125
    @dionisiocarovasquez91256 ай бұрын

    Thanks brother, after trying many tutorials, yours was the one that worked for me. Greetings from Colombia

  • @tuattrananh

    @tuattrananh

    5 ай бұрын

    Glad it's useful to you

  • @Jade_Hanson
    @Jade_Hanson Жыл бұрын

    Thanks a bunch this helped a lot.

  • @aryanpinto5105
    @aryanpinto5105 Жыл бұрын

    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

    @GideonOtuka

    Жыл бұрын

    I'm getting 404: NOT_FOUND when I try to deploy the server folder

  • @OganicaBean

    @OganicaBean

    Жыл бұрын

    I have the same 404 error.

  • @GideonOtuka

    @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

  • @_elusivex_
    @_elusivex_ Жыл бұрын

    This video was helpful, thanks!

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    ❤️❤️❤️❤️

  • @_7Spike_
    @_7Spike_7 ай бұрын

    I got cors error allow origin not defined

  • @hamzahassan2933
    @hamzahassan2933 Жыл бұрын

    Thank you sooo much for this video brooo

  • @gorankukic777
    @gorankukic777 Жыл бұрын

    Thanks for this video, you got a new subscriber! :)

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    thank you so much ❤️

  • @chrtravels
    @chrtravels10 ай бұрын

    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.

  • @shubhamsinghvi9338
    @shubhamsinghvi9338 Жыл бұрын

    Amazing video...Thanks

  • @netsaosa4973
    @netsaosa4973 Жыл бұрын

    thx bro out of 3 vercel tutorials this one worked 👍

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    👍👍👍

  • @anupkumardutta_6196

    @anupkumardutta_6196

    Жыл бұрын

    @tuattrananh i am getting 494 error page after deploying server

  • @sagarsharma007
    @sagarsharma007 Жыл бұрын

    it helped thanks a lot

  • @nagarajutirumani8760
    @nagarajutirumani87608 ай бұрын

    Thanks for the video.

  • @gyunayify
    @gyunayify Жыл бұрын

    I didnt understand anything you said but this video helped me deploy ty :)

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    😂😂

  • @pokotyec
    @pokotyec Жыл бұрын

    Very grateful. Please do a tutorial on React, Node, and Postgres on Vercel.

  • @renjithroy8422
    @renjithroy842210 ай бұрын

    I do not use a db. Req is made from frontend to express server. How do I connect this in the last step?

  • @thesannchu
    @thesannchu Жыл бұрын

    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?

  • @Pagegift
    @Pagegift7 ай бұрын

    This is amazing video, you are a very good teacher! I will give you a like and subscribe to your channel.

  • @svnbeats6700
    @svnbeats67009 күн бұрын

    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

  • @ayoubdev8019
    @ayoubdev8019 Жыл бұрын

    thank u so much

  • @thanhnt612
    @thanhnt612 Жыл бұрын

    Hay quá bạn ơi. Cảm ơn rất nhiều !!!!!!

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    ❤️❤️❤️❤️

  • @techandgaming17
    @techandgaming17 Жыл бұрын

    Very useful

  • @jingli9232
    @jingli9232 Жыл бұрын

    thx, but how do you know what to add as suffix for deployed api

  • @nguyenngockhoa6529
    @nguyenngockhoa6529 Жыл бұрын

    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

  • @alikhanbulat2150
    @alikhanbulat2150Ай бұрын

    Cannot read properties of undefined (reading 'data') How can i fix?

  • @sanmurdetpierre4020
    @sanmurdetpierre40208 ай бұрын

    🔥🔥🔥🔥🔥

  • @emvoinamdinh
    @emvoinamdinh Жыл бұрын

    Thanks bro

  • @tukukode
    @tukukode Жыл бұрын

    thank you so much

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    ❤️❤️❤️❤️

  • @MuhammedRamees-kl7py
    @MuhammedRamees-kl7py7 ай бұрын

    really useful 🤩🤩

  • @tuattrananh

    @tuattrananh

    5 ай бұрын

    thank you

  • @mohitrobbin5401
    @mohitrobbin54012 ай бұрын

    Please tell me the theme you are using on bsvode

  • @tinnguyen9651
    @tinnguyen9651 Жыл бұрын

    Have you deployed web fullstack with React Js (Front-end) and Sailjs(Backend)? Can you help me deploy Sailsjs ?

  • @harveynatividad8670
    @harveynatividad86708 ай бұрын

    do you know Rasa NLU?, I just wanted to ask if I can deploy my mern with Rasa NLU ?

  • @BeyondTheLog108
    @BeyondTheLog1087 ай бұрын

    backend not deployed showing 'page not found'😪

  • @AlexanderBogdanov-dw6cw
    @AlexanderBogdanov-dw6cw8 ай бұрын

    Thank you for the video! Please tell me, if I wrote a backend on Nest, a database on Mongo_DB, how to deploy it?

  • @user-ub7uh8mn3y
    @user-ub7uh8mn3y8 ай бұрын

    How it is mern app if can't deploy it as single project just like we do on heroku

  • @nirmalapusparatna8940
    @nirmalapusparatna89402 ай бұрын

    thanks a lot, but why when I reload or window.onreload it turns 404: NOT_FOUND

  • @mfaiz6
    @mfaiz6 Жыл бұрын

    what is version 2 at 8:15 ???

  • @huynq24
    @huynq24 Жыл бұрын

    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

  • @prajwalurkude007
    @prajwalurkude007 Жыл бұрын

    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.

  • @martinpasaribu4864
    @martinpasaribu48645 ай бұрын

    Thanks

  • @shikharawat4086
    @shikharawat4086 Жыл бұрын

    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

    @tuattrananh

    Жыл бұрын

    I don't understand your problem??

  • @iamakashkumarram
    @iamakashkumarram Жыл бұрын

    When your next video coming and which topic?

  • @iamakashkumarram
    @iamakashkumarram Жыл бұрын

    Sir when your next video coming?

  • @kienvan6780
    @kienvan6780 Жыл бұрын

    Sao mình toàn bị lỗi 404 nhỉ

  • @aditibhatt7845
    @aditibhatt7845 Жыл бұрын

    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." ?

  • @Spkntei
    @Spkntei Жыл бұрын

    Cho em hỏi là anh mất bao lâu để hoàn thành project này vậy ạ

  • @HoangAnhNguyen-gt3nr
    @HoangAnhNguyen-gt3nr10 ай бұрын

    10:20 sao đoạn này nó báo 504: gateway_timeout nhỉ

  • @dotgilchrist3168
    @dotgilchrist3168 Жыл бұрын

    You didn't explain where you found the TMDB_BASE_URL or the TMDB_key? or is that something we make up

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    kzread.info/dash/bejne/nGGH0JObZLLSfKQ.html

  • @abrarhussain_00

    @abrarhussain_00

    Жыл бұрын

    did you figure this out?

  • @asdrty123
    @asdrty12310 ай бұрын

    y you dont have this repo in github

  • @ultrasoundaudio7844
    @ultrasoundaudio78449 ай бұрын

    I got the error after deploying the vercel.json, the error is 404

  • @alexpeev9
    @alexpeev9 Жыл бұрын

    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

    @tuattrananh

    Жыл бұрын

    it is impossible

  • @MunibDalati
    @MunibDalati9 ай бұрын

    everything is worked but I can't see the data coming from MongoDB!

  • @cuongtran-vv1hi
    @cuongtran-vv1hi Жыл бұрын

    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

    @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 :

  • @dangkha1105
    @dangkha1105 Жыл бұрын

    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?

  • @haian_
    @haian_ Жыл бұрын

    Please create portfolio with next js 13, tailwind and Sanity

  • @_elusivex_

    @_elusivex_

    Жыл бұрын

    See JavaScript Mastery channel

  • @OganicaBean
    @OganicaBean Жыл бұрын

    I’m getting 404 error code. Please help sir.

  • @MunibDalati

    @MunibDalati

    9 ай бұрын

    kzread.info/dash/bejne/a4ppqI-InrPZndY.html

  • @BestCoden
    @BestCoden5 ай бұрын

    500 error why?

  • @true227
    @true2274 ай бұрын

    don`t use version anymore, it's deprecated

  • @melaku7
    @melaku77 ай бұрын

    i use the same steps but i can't connect with the database what is the issue

  • @tuattrananh

    @tuattrananh

    5 ай бұрын

    did you see the error message?

  • @melaku7

    @melaku7

    5 ай бұрын

    Error connecting to the database: Cannot read properties of undefined (reading 'admin') @@tuattrananh

  • @anupkumardutta_6196
    @anupkumardutta_6196 Жыл бұрын

    Getting 404 page after deploying server

  • @anupkumardutta_6196

    @anupkumardutta_6196

    Жыл бұрын

    What to do

  • @ruthra5398

    @ruthra5398

    6 ай бұрын

    Mee too

  • @uguur
    @uguur Жыл бұрын

    How did you manage to pass cors error ?

  • @tuattrananh

    @tuattrananh

    Жыл бұрын

    app.use(cors()) in express

  • @uguur

    @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

    @lethitruc6794

    Жыл бұрын

    @@uguur adding a origin = true app.use(cors({ credentials: true, origin: true }));

  • @Lotpite

    @Lotpite

    Жыл бұрын

    @@tuattrananh it doesnt work. I got the same issue

  • @yeabsratesfaye7012
    @yeabsratesfaye7012 Жыл бұрын

    opps it's not working

  • @true227
    @true2274 ай бұрын

    guys, be careful name of the file is verCel, not verSel

  • @tuattrananh

    @tuattrananh

    4 ай бұрын

    where is "verSel"?

  • @true227

    @true227

    4 ай бұрын

    @@tuattrananh in my case

  • @NguyenVanA888
    @NguyenVanA88811 ай бұрын

    ông nói tiếng anh như người việt bản địa z 🐧🐧🐧🐧

  • @nextgendev83
    @nextgendev83 Жыл бұрын

    Thanks mate you helped me a lot 🫱

  • @bdan-xs3qe
    @bdan-xs3qe Жыл бұрын

    I tried your method after doing my method still getting error 404 after deploying backend in vercel...please help me ​@Tuat Tran Anh

  • @mahendrabishnoi716
    @mahendrabishnoi716 Жыл бұрын

    bro how can i contact you I'm Facing Error in your Project?

  • @anupkumardutta_6196

    @anupkumardutta_6196

    Жыл бұрын

    404 page

  • @AmanThakur-ke1is

    @AmanThakur-ke1is

    Жыл бұрын

    Did your error get resolved?

  • @hoainhannguyenphan5318
    @hoainhannguyenphan5318 Жыл бұрын

    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

    @ambiguity1768

    Жыл бұрын

    ohh...i have the same problem and really can't figure out what's going on 🤯