Deploy Full Stack App to Vercel | React Nodejs Express Mongo | MERN Tutorial

Поделиться
HTML-код
  • Опубликовано: 13 июн 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

Комментарии • 106

  • @lavanyam3224
    @lavanyam3224 Год назад +1

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

  • @basurabasura
    @basurabasura Год назад +1

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

  • @stonecomstock
    @stonecomstock Год назад +1

    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!

  • @aryanpinto5105
    @aryanpinto5105 Год назад +3

    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 11 месяцев назад

      I have the same 404 error.

    • @GideonOtuka
      @GideonOtuka 11 месяцев назад

      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

  • @pavanibasa5463
    @pavanibasa5463 4 месяца назад +1

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

    • @tuattrananh
      @tuattrananh  4 месяца назад

      I'm glad you found it useful

  • @Hyp3rX360
    @Hyp3rX360 8 месяцев назад

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

  • @sandip_kanzariya8476
    @sandip_kanzariya8476 9 месяцев назад +1

    Working Man
    Awesome
    Thanks

  • @dionisiocarovasquez9125
    @dionisiocarovasquez9125 5 месяцев назад

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

  • @_elusivex_
    @_elusivex_ Год назад

    This video was helpful, thanks!

  • @Jade_Hanson
    @Jade_Hanson Год назад

    Thanks a bunch this helped a lot.

  • @gorankukic777
    @gorankukic777 Год назад

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

  • @hamzahassan2933
    @hamzahassan2933 Год назад

    Thank you sooo much for this video brooo

  • @netsaosa4973
    @netsaosa4973 Год назад

    thx bro out of 3 vercel tutorials this one worked 👍

  • @gyunayify
    @gyunayify Год назад +1

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

  • @shubhamsinghvi9338
    @shubhamsinghvi9338 Год назад +1

    Amazing video...Thanks

  • @chrtravels
    @chrtravels 9 месяцев назад

    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.

  • @sagarsharma007
    @sagarsharma007 Год назад

    it helped thanks a lot

  • @pokotyec
    @pokotyec Год назад +4

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

  • @nagarajutirumani8760
    @nagarajutirumani8760 7 месяцев назад

    Thanks for the video.

  • @Pagegift
    @Pagegift 6 месяцев назад

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

  • @Denjiro_sasaki
    @Denjiro_sasaki 6 месяцев назад +2

    I got cors error allow origin not defined

  • @renjithroy8422
    @renjithroy8422 10 месяцев назад +1

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

  • @thanhnt612
    @thanhnt612 Год назад

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

  • @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?

  • @techandgaming17
    @techandgaming17 11 месяцев назад

    Very useful

  • @ayoubdev8019
    @ayoubdev8019 Год назад

    thank u so much

  • @MuhammedRamees-kl7py
    @MuhammedRamees-kl7py 6 месяцев назад

    really useful 🤩🤩

  • @tinnguyen9651
    @tinnguyen9651 Год назад +1

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

  • @emvoinamdinh
    @emvoinamdinh Год назад

    Thanks bro

  • @AlexanderBogdanov-dw6cw
    @AlexanderBogdanov-dw6cw 7 месяцев назад

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

  • @BeyondTheLog108
    @BeyondTheLog108 6 месяцев назад +1

    backend not deployed showing 'page not found'😪

  • @jingli9232
    @jingli9232 Год назад

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

  • @tukukode
    @tukukode Год назад

    thank you so much

  • @sanmurdetpierre4020
    @sanmurdetpierre4020 7 месяцев назад

    🔥🔥🔥🔥🔥

  • @alikhanbulat2150
    @alikhanbulat2150 23 дня назад

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

  • @user-ub7uh8mn3y
    @user-ub7uh8mn3y 7 месяцев назад

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

  • @nguyenngockhoa6529
    @nguyenngockhoa6529 Год назад +1

    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

  • @martinpasaribu4864
    @martinpasaribu4864 4 месяца назад

    Thanks

  • @harveynatividad8670
    @harveynatividad8670 7 месяцев назад

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

  • @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.

  • @shikharawat4086
    @shikharawat4086 Год назад +1

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

  • @mohitrobbin5401
    @mohitrobbin5401 Месяц назад

    Please tell me the theme you are using on bsvode

  • @quanghuynguyen8679
    @quanghuynguyen8679 Год назад

    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

  • @nirmalapusparatna8940
    @nirmalapusparatna8940 Месяц назад

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

  • @mfaiz6
    @mfaiz6 Год назад +2

    what is version 2 at 8:15 ???

  • @iamakashkumarram
    @iamakashkumarram Год назад +1

    When your next video coming and which topic?

  • @iamakashkumarram
    @iamakashkumarram Год назад +1

    Sir when your next video coming?

  • @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.

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

  • @ultrasoundaudio7844
    @ultrasoundaudio7844 8 месяцев назад

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

  • @dotgilchrist3168
    @dotgilchrist3168 Год назад +1

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

  • @MunibDalati
    @MunibDalati 8 месяцев назад

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

  • @asdrty123
    @asdrty123 10 месяцев назад

    y you dont have this repo in github

  • @Spkntei
    @Spkntei Год назад

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

  • @kienvan6780
    @kienvan6780 Год назад +1

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

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

  • @HoangAnhNguyen-gt3nr
    @HoangAnhNguyen-gt3nr 9 месяцев назад

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

  • @true227
    @true227 3 месяца назад +2

    don`t use version anymore, it's deprecated

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

  • @BestCoden
    @BestCoden 4 месяца назад

    500 error why?

  • @OganicaBean
    @OganicaBean 11 месяцев назад +1

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

    • @MunibDalati
      @MunibDalati 8 месяцев назад

      ruclips.net/video/9V5F-OnPsms/видео.html

  • @melaku7
    @melaku7 6 месяцев назад

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

    • @tuattrananh
      @tuattrananh  4 месяца назад

      did you see the error message?

    • @melaku7
      @melaku7 4 месяца назад

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

  • @anupkumardutta_6196
    @anupkumardutta_6196 Год назад +2

    Getting 404 page after deploying server

  • @uguur
    @uguur Год назад

    How did you manage to pass cors error ?

    • @tuattrananh
      @tuattrananh  Год назад

      app.use(cors()) in express

    • @uguur
      @uguur Год назад +1

      @@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 Год назад +1

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

  • @yeabsratesfaye7012
    @yeabsratesfaye7012 Год назад

    opps it's not working

  • @true227
    @true227 3 месяца назад

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

    • @tuattrananh
      @tuattrananh  3 месяца назад

      where is "verSel"?

    • @true227
      @true227 3 месяца назад

      @@tuattrananh in my case

  • @NguyenDucDo2001
    @NguyenDucDo2001 10 месяцев назад

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

  • @bdan-xs3qe
    @bdan-xs3qe Год назад +1

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

  • @nextgendev83
    @nextgendev83 Год назад

    Thanks mate you helped me a lot 🫱

  • @mahendrabishnoi716
    @mahendrabishnoi716 Год назад +1

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

  • @hoainhannguyenphan5318
    @hoainhannguyenphan5318 Год назад +2

    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 🤯