Hosting a MERN Web App on Vercel and Render: Step-by-Step Guide

แชร์
ฝัง
  • เผยแพร่เมื่อ 30 มิ.ย. 2023
  • In this comprehensive tutorial, we walk you through the process of hosting your MERN (MongoDB, Express.js, React.js, Node.js) web application on Vercel and Render. Whether you're a beginner or an experienced developer, this step-by-step guide will help you seamlessly deploy your app to these powerful hosting platforms.
    🔥 Get ready to learn:
    Setting up your MERN web app for deployment
    Creating an account on Vercel and Render
    Deploying your MERN app on Vercel
    By the end of this tutorial, you'll have a solid understanding of how to deploy your MERN web app on Vercel and Render, ensuring a seamless experience for your users.

ความคิดเห็น • 60

  • @UECAshutoshKumar
    @UECAshutoshKumar 5 วันที่ผ่านมา +2

    Thank You!!!!

  • @arghadeepdey7796
    @arghadeepdey7796 3 หลายเดือนก่อน +3

    Totally to the point ! Was having an issue with using custom port numbers, but with your explanation, I resolved that. Thanks a lot.

  • @onkarHINDU
    @onkarHINDU 2 วันที่ผ่านมา +1

    Thanks bhaiya . you explained it very well..
    I have one Doubt.
    my deployment was successfull but
    what if i have made some changes locally , how to reflect that on vercel .
    do, i have to follow all same steps again?

  • @Pavankumar_Mhaske
    @Pavankumar_Mhaske 2 หลายเดือนก่อน +1

    This is the best video i have ever seen for the deployment. It's perfectly helped me. it's easily explain and clearly explain

    • @saikatmu31
      @saikatmu31  2 หลายเดือนก่อน

      Thanks For Your Kind Words.

  • @Rohitkumar-vq1yk
    @Rohitkumar-vq1yk 6 หลายเดือนก่อน +1

    Thank you so much, its help me a lot

  • @motivationhub2101
    @motivationhub2101 5 หลายเดือนก่อน

    Thanks brother

  • @sreesen3159
    @sreesen3159 22 วันที่ผ่านมา

    My backend on render is not setting cookies on frontend deployed on vercel

  • @usamaansari4231
    @usamaansari4231 4 หลายเดือนก่อน

    Brother what if we do not have server folder inside client? I am trying ty deploy my app but getting build errors in my App.jsx.

  • @developerstring
    @developerstring 7 หลายเดือนก่อน

    I have deployed my backend on render and using local frontend code am trying to login, but not able to generate a token which I am using for login authentication

  • @rahulkathayat8542
    @rahulkathayat8542 10 หลายเดือนก่อน +3

    thankyou for this , another point that i would like to add is that the mongo db url in .env should not be in string quotes , keep the url free from any quotation marks i was stuck on it for a long time lol , alsooo you didnt add port in env saikat

    • @nitinkumar-zx2ru
      @nitinkumar-zx2ru 9 หลายเดือนก่อน

      bro .env mai quotes use nhi karna hai kya please reply mera deploy nhi ho pa rha hai

  • @shivanshmahajan2281
    @shivanshmahajan2281 11 หลายเดือนก่อน +4

    please upload deployment video again with details we are facing issue in it.

  • @user-bp7ee7jv6c
    @user-bp7ee7jv6c 3 หลายเดือนก่อน

    is there any problem if mongodb install on my local system ??

  • @shubhampathak7667
    @shubhampathak7667 3 หลายเดือนก่อน

    Please upload a video to host MEVN app to
    because i made a good project, but following these steps lead me to an error
    npm ERR! enoent ENOENT: no such file or directory, open '/opt/render/project/src/package.json'
    please help

  • @akshayyy13
    @akshayyy13 2 หลายเดือนก่อน +1

    Upload full details please.. there is issue occuring in cors

  • @yadavmunna9801
    @yadavmunna9801 3 หลายเดือนก่อน

    please make a full video with the working project in my system it is not working

  • @developerstring
    @developerstring 7 หลายเดือนก่อน

    Could you please tell me. Can I use my frontend code of the local machine and the backend code deployed on render to test the backend logic

    • @saikatmu31
      @saikatmu31  7 หลายเดือนก่อน

      yes Just Change the CORS Policy and your Backend Links Properly

    • @Vishalsaini-mn1nj
      @Vishalsaini-mn1nj 5 หลายเดือนก่อน

      Dude you saved me 😢

  • @GSKHappyLearning
    @GSKHappyLearning 3 หลายเดือนก่อน

    sorry new here: i have codes of frontend and backend saperate in client and server folders so where to do npm run build for server or client

    • @GSKHappyLearning
      @GSKHappyLearning 3 หลายเดือนก่อน

      Done, thank you so much successfully deployed....

  • @kungagyaltsenlachungpa8915
    @kungagyaltsenlachungpa8915 11 หลายเดือนก่อน +2

    ur content is awesome.

    • @saikatmu31
      @saikatmu31  11 หลายเดือนก่อน

      Thank You

  • @archiexzzz
    @archiexzzz 11 หลายเดือนก่อน

    big fan sir

    • @saikatmu31
      @saikatmu31  11 หลายเดือนก่อน

      😂😂😂😂😂😂

    • @user-qr7hs9jd7c
      @user-qr7hs9jd7c 2 หลายเดือนก่อน

      @@saikatmu31 sir can you plz run this code on my machine , i am enroll in love babbar course

  • @vkkumar7146
    @vkkumar7146 11 หลายเดือนก่อน +1

    Thank you bhaiya codehelp

  • @afnanbhai241
    @afnanbhai241 11 หลายเดือนก่อน +1

    Bas ek cheez puchni thi bro !!!!
    Humko Mongo mei jaaki add ip (IP allow) karna padta hai,,, wo step aapne include nhi kiya, phir bhi aapka chal rha hai,,, ayese kaise ?
    ( Don't worry, I know how to do that, but baakiyo ko shayad problem aayegi ?? )

    • @saikatmu31
      @saikatmu31  11 หลายเดือนก่อน

      I've Whitelisted All IP's that's why it's working, and everyone need to do that as well.

    • @nitinkumar-zx2ru
      @nitinkumar-zx2ru 9 หลายเดือนก่อน +1

      bro mongo db mai kya karna hai please help mera deploy nhi ho rha hai

  • @ameywalwaikar603
    @ameywalwaikar603 11 หลายเดือนก่อน

    I hosted my backend on render and it is working fine, then the IP addresses which I got from render I whitelisted them all, then I hosted my frontend on vercel. But when I opened my project link, the frontend was unable to fetch the backend. Please help me out

  • @sagarsingh1430
    @sagarsingh1430 11 หลายเดือนก่อน +2

    bhai nhi chal rha hai, saari IP whitelist kar diya hu mongodb atlas pe, fir bhi backend se data fetch nhi horaha frontend me. please remake 1 video. my interviews are scheduled from 11th july. please help bro nhi toh saara paisa waste ho jaayega codehelp se course lene ka

    • @AnmolSharma-bi5oz
      @AnmolSharma-bi5oz 11 หลายเดือนก่อน +1

      Same backend nhi chl rha bhai, frontend deploy ho gaya, backend b ho gaya but chl n rha

    • @amanshekhawat8696
      @amanshekhawat8696 3 หลายเดือนก่อน

      ​@@AnmolSharma-bi5ozBhai solve hua kya

  • @srs8074
    @srs8074 9 หลายเดือนก่อน

    Please 🙏 Anyone help me to deploy

  • @indian_gaurav_8648
    @indian_gaurav_8648 11 หลายเดือนก่อน +1

    yrr backend work nahi karrraa

  • @user-qf7mc3zs3w
    @user-qf7mc3zs3w 11 หลายเดือนก่อน +2

    Bhai Mera toh crash hogya
    Ip vali btt toh btayi nhi apne bta do kya btt h voh
    Aisai adha content hi upload Kia tumne bhi bakio ki trh kya fayda rha paida course ka

    • @saikatmu31
      @saikatmu31  11 หลายเดือนก่อน

      If you are Using MongoDB Cloud Atlas, Go to your Render Account Dashboard -> Click on the Project -> Click on Connect -> Switch to Outbound Tab and Whitelist all the following IPs in MongoDB.

    • @sadakvali8930
      @sadakvali8930 10 หลายเดือนก่อน

      @@saikatmu31 Whitelisting all IP addresses effectively opens your MongoDB instance to the entire internet, making it accessible to anyone with an internet connection. How can we handle this?

  • @shauncrasta619
    @shauncrasta619 3 หลายเดือนก่อน

    Here are the certain issues you will face due to the lack of information in this video,
    1. WhiteList all the outbound IP's at mongodb cluster/atlas
    2. Update your CORS in server.js/index.js to the relevant front-end endpoint provided by vercel.
    3. Be careful with the env values, do not include any trailing spaces while entering the env values in vercel or render.

    • @amanshekhawat8696
      @amanshekhawat8696 3 หลายเดือนก่อน +2

      Bro my backed is not working after deploying

  • @09_b_adityachaudhari5
    @09_b_adityachaudhari5 6 หลายเดือนก่อน +2

    Bhai kisi ka ho gaya ho to thodi help kardo yaar

  • @ritikrajsinha5895
    @ritikrajsinha5895 11 หลายเดือนก่อน

    bhaiya deploy bhi ho gya sab ho raha hai par backend se log in nhi kar pa raha plzz help

  • @RiteshKumar-xt1wz
    @RiteshKumar-xt1wz 2 หลายเดือนก่อน

    Video mai to sab itna aasan lg rha h
    But reality mai kisi ka host hi nhi huaa h
    Duniya bhar ki error h

  • @akashboss7309
    @akashboss7309 3 หลายเดือนก่อน

    Brother , while deploying backend on render , It failed throwing error - Error: /opt/render/project/src/Server/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header . after than i tried a lots doing npm install bcrypt ... but error not going and failed to deploy on render. please Help!!!

    • @akshayyy13
      @akshayyy13 2 หลายเดือนก่อน

      Bro remove the node modules file

    • @parthpanchal815
      @parthpanchal815 2 หลายเดือนก่อน

      Did you got the solution i am facing same error

  • @Gavran_jevan_
    @Gavran_jevan_ 10 หลายเดือนก่อน +3

    Adha adha batata hai pagal hai kya

  • @nitinkumar-zx2ru
    @nitinkumar-zx2ru 9 หลายเดือนก่อน

    bhaiyo kisi ka hua kya agr ho gya hai to meri help krdo