MERN Stack deployment on Vercel and Render | Deploy node.js and React app for free

Поділитися
Вставка
  • Опубліковано 13 січ 2025

КОМЕНТАРІ • 165

  • @SwamiShreekant
    @SwamiShreekant Місяць тому

    Damn! this is (THE VIDEO!) I was looking for... Thanks for this video! this made my day and i was suffering a lot with all other videos

  • @asdivya3285
    @asdivya3285 Місяць тому +1

    Thank so much for your video.....After seeing more videos and tutorial nothing is working..... After seeing your video.....I am deployed my mern app...thank you very much😊😊

  • @AllInoneStatus1
    @AllInoneStatus1 3 місяці тому +3

    finally got it..... After watching more than 10+ videos

  • @MRCODER2.0
    @MRCODER2.0 Місяць тому +1

    it's most easy method to deploy ! thnx a lot for this video

  • @hrishabh999
    @hrishabh999 5 місяців тому

    After watching more than 10+ videos, finally I found what I needed👍thankyou so much

  • @mind_blazed
    @mind_blazed 10 місяців тому +1

    Thank you so much . i've watched lots of videos but not working . but this is really helpful and succesfully deployed

  • @hemantvishwakarma8751
    @hemantvishwakarma8751 Рік тому +14

    Thankyou so much... I have watched more than 15 videos but was not able to deploy... But now, by your video I have deployed my first web app....Thankyou so muchh❤❤❤

    • @SumansAcademy
      @SumansAcademy  Рік тому +1

      I'm thrilled to hear that you're happy! Your appreciation means lot to me❤️.

    • @rutikamble
      @rutikamble 6 місяців тому +2

      Same

  • @priyaarya6883
    @priyaarya6883 7 місяців тому +2

    Thankyou so much you helped me alot really worked. Earlier I was getting issue when I type vercel on cli then I saw I had to do vercel init at first then it worked 😅 if anyone is getting the same issue you can solve it through this message coders 😁🤭🙏 . And thankyou mam from 2 days I was trying and searching for such type of content you posted 🤗✨

    • @SumansAcademy
      @SumansAcademy  7 місяців тому +1

      You're welcome! I'm glad to hear that the solution worked for you. If anyone else is facing the same issue with Vercel, remember to use `vercel init` first to get things set up. It can save a lot of time and frustration. Thank you for sharing your experience and helping others with the same problem. Happy coding! 😊✨

  • @we-are-engineers
    @we-are-engineers 9 місяців тому +1

    Amazingly described ❤

  • @Virat5nov1988
    @Virat5nov1988 3 місяці тому

    From you i learned how to use render thank you so much❤

  • @RedZunamyBlogspotZ
    @RedZunamyBlogspotZ 7 місяців тому +1

    Gracias de tanto buscar al fin alguien lo explica bien.

    • @SumansAcademy
      @SumansAcademy  7 місяців тому

      ¡De nada! Me alegra saber que finalmente encontraste una explicación que te ayudó. Si tienes alguna otra pregunta o necesitas más ayuda, no dudes en preguntar. ¡Feliz codificación! 😊✨

  • @kartikay0111
    @kartikay0111 8 місяців тому +1

    Finally I was able to deploy Thanks

  • @AbdulSamad-kb3sm
    @AbdulSamad-kb3sm 8 місяців тому +1

    Thank you soo much, explanation is very clear and easy. thank you once again👌👌💕💕

  • @nidhi2843
    @nidhi2843 5 місяців тому

    Thanks a lot! Finally I deploy my project 😊✨

  • @MALLuKAPzTECHz
    @MALLuKAPzTECHz 9 місяців тому +1

    Subscribed I was looking for this video

  • @paramveer3590
    @paramveer3590 8 місяців тому

    Thank you so much ma'am, i watched around 15 to 20 videos but nothing worked. I was very upset but now I'm so happy ❤ dher sara pyaar🙏🙏🙏🙏🙏🙏🙏🙏🙏

    • @top_g755
      @top_g755 8 місяців тому

      Bro help me

    • @top_g755
      @top_g755 8 місяців тому

      Error aa rha hai

    • @top_g755
      @top_g755 8 місяців тому

      Module not found

    • @paramveer3590
      @paramveer3590 8 місяців тому

      @@top_g755 browser pe code run ho rha he kya? Deploy se pehle Frontend backend achhe se chal rha he?

    • @SumansAcademy
      @SumansAcademy  8 місяців тому

      Most welcome 😊

  • @dictator2852
    @dictator2852 6 місяців тому +1

    great and very easy explanation

  • @apnifamily-vy8my
    @apnifamily-vy8my Рік тому +1

    Thanks 😊. Helpful information.

  • @devmehta200
    @devmehta200 8 місяців тому

    personally i can say best ever video on internet explaining how to deploy web app , crystal clear explanation but mam i have one question i have used multer for image upload and i am giving path of that in my vite.config.js file so how to deal with that while deploying app please answer mam

  • @pawankumarmandaloju3846
    @pawankumarmandaloju3846 7 місяців тому +1

    Thank you for the information 🙏😊

  • @csayantan
    @csayantan 8 місяців тому

    backend and frontend separately is very wirdo idea for productions as it will publish whole data whoever hit the URL. it will be better if we can maintain these access from the application side only.

  • @SurajSURAJ-hm9kb
    @SurajSURAJ-hm9kb Рік тому +1

    Giving nice information 👍😊

  • @MatheusSilva-qm3ph
    @MatheusSilva-qm3ph 2 місяці тому

    Very good, congratulations! One question, do you know how to deploy this project to Firebase? If you know, please teach me. Thanks.

  • @AmruthShyju
    @AmruthShyju 7 місяців тому +2

    Thank You So much 💚💚

  • @gollapudibuchichowdary1914
    @gollapudibuchichowdary1914 5 місяців тому +1

    Wonderful 🎉🎉🎉

  • @DhRuVpAtE
    @DhRuVpAtE 3 місяці тому +1

    What About CORS if we used in backend index.js code
    we have to put the origin of frontend?
    how to do that?

    • @SumansAcademy
      @SumansAcademy  3 місяці тому +1

      app.use(cors())
      You can use this line in index.js to enable allCORS requests. This process is show in the video itself.
      You can also restrict to only your fronted url by using cors configuration please visit documentation www.npmjs.com/package/cors

  • @webturtles
    @webturtles Рік тому +1

    Found helpful Thanks

  • @ankit21309
    @ankit21309 7 місяців тому +1

    Informative !!

  • @shashwatsingh2748
    @shashwatsingh2748 11 місяців тому

    At 3:19 , is there any problem if we choose Compass instead of drivers ?

    • @mrsecretstatus9999
      @mrsecretstatus9999 9 місяців тому

      Compass is for running locally, while deploying we need to use driver only.

  • @vijayaragavan4168
    @vijayaragavan4168 Рік тому +1

    Thank you so much ❤️🎉

  • @Msd-bk7yc
    @Msd-bk7yc 9 місяців тому +1

    I was able to host both frontend and backend on render itself .why you host seprately?? by the way i hosted html css js express js mongo db without react website

  • @_aakashsaini
    @_aakashsaini 8 місяців тому +2

    vercel command not working in frontend. I run the command 'npm i vercel' but it's still not working. Don't know what's wrong...

    • @SumansAcademy
      @SumansAcademy  8 місяців тому +1

      Use this command : npm i -g vercel

    • @_aakashsaini
      @_aakashsaini 8 місяців тому

      @@SumansAcademy tnx.😄😄

    • @aakashsaini3963
      @aakashsaini3963 7 місяців тому

      Same doubt same name bhai 😂😂

    • @SumansAcademy
      @SumansAcademy  7 місяців тому

      What a coincidence! 💀💀

    • @aakashsaini3963
      @aakashsaini3963 7 місяців тому

      Above mentioned command is take so much time and leaked the memory not working

  • @TamilMani-t4l
    @TamilMani-t4l 11 місяців тому +1

    i have three files frontend , backend and admin panel. For admin i want to deploy it seperately or with the backend

    • @NIVI_TT
      @NIVI_TT 10 місяців тому

      Same doubt

  • @isaacnjenga4184
    @isaacnjenga4184 9 місяців тому +1

    do you have a tutorial on uploading images to the backend and displaying on the frontend?

    • @SumansAcademy
      @SumansAcademy  9 місяців тому

      Wait I will create it for you. Give me some time.

    • @isaacnjenga4184
      @isaacnjenga4184 9 місяців тому

      ok, thank you@@SumansAcademy

  • @hamzaazam203
    @hamzaazam203 7 місяців тому

    im maked the three folder in my project websocket, frontend and backend. where can i upload the websocket folder on which website.

  • @rameshjana7853
    @rameshjana7853 2 місяці тому

    MySQL databases how to connect?

  • @thorenjp
    @thorenjp 9 місяців тому

    How can i deploy a json server api im unable to fetch api with my project after deployed on netlify 😢

  • @Uv_Yadav04
    @Uv_Yadav04 9 місяців тому

    Can't we deploy frontend on render..
    When i am doing so, It's saying no open http port detected

  • @Msd-bk7yc
    @Msd-bk7yc 9 місяців тому

    AMAZING VIDEO

  • @thisaragunasekara924
    @thisaragunasekara924 10 місяців тому

    Hii can i know how many applications can we deploy in this way only one web site?

  • @afroz1189
    @afroz1189 9 місяців тому

    Hello, I followed all the steps and deployed backed but after clicking on link it says cannot get/..
    Any help will be appreciated.

  • @sanketkamble4705
    @sanketkamble4705 8 місяців тому

    hello. why did you deploy on two different servers? are they fast or something for node and react ?

  • @ZahidKhan-bg1uv
    @ZahidKhan-bg1uv 7 місяців тому

    Ma'am can you share the video of your project developement?

    • @SumansAcademy
      @SumansAcademy  7 місяців тому

      Deployment of "Vicharlikhita web app" is present in this video only. Which video do you want?

  • @codingwave56
    @codingwave56 5 місяців тому +2

    tysm 🙏🏻

  • @sayanmaity7630
    @sayanmaity7630 8 місяців тому

    Hello ma’am ! I tried deploying my MERN e-commerce website with this process. While everything turned out to be fine but in the frontend, the images are blank. No matter what I do, it isn’t showing. Any suggestion?

    • @SumansAcademy
      @SumansAcademy  8 місяців тому

      Are you uploading your images to the backend and then fetching in to the fronted. And then it is showing black? Or you are using url's to show images?

  • @GiuranRadu
    @GiuranRadu 9 місяців тому

    Important question! Does uploading files/images still works?

    • @SumansAcademy
      @SumansAcademy  9 місяців тому

      Yes it still works. Please create your new account and check. If you are using the user credentials given in this video then it may not work because accidentally I removed that file from my database.

    • @GiuranRadu
      @GiuranRadu 9 місяців тому

      ​@@SumansAcademy Thanks for your fast reply. I have a 7$ monthly plan on Render and i really can't succeed to configure it. I think it will be a good video for future... now i'm using Cloudinary as an alternative to upload images

  • @mrsecretstatus9999
    @mrsecretstatus9999 9 місяців тому

    I have done all steps correctly but I am not to login into my application, I don’t why but I am getting loging successfully message and my cookies is storing correctly.
    Can any one help me please

  • @mausam_007
    @mausam_007 10 місяців тому

    I'm trying to access my web page and there is an error in the console:- failed to load resource: the server responded with a status of 404 ///// actually in locally it's working fine .. pls help me

    • @SumansAcademy
      @SumansAcademy  10 місяців тому +1

      In Render.com check in Logs you will get details why you are getting that 404 error.
      If you have time then try to deploy it once again. Failed to load it had happened with me also. I deployed it again then it worked.

  • @gamerzhill8849
    @gamerzhill8849 7 місяців тому

    its really useful

  • @eeinfo1
    @eeinfo1 3 місяці тому

    maam can we make repository as pvt if we do that so is there any issues in deployment and accessibility. please reply maam

    • @SumansAcademy
      @SumansAcademy  3 місяці тому

      Yes, you can make your repository private without any issues for deployment on Render.com. However, ensure that the deployment settings allow Render to access your private repo. On Render, you’ll need to connect your GitHub or GitLab account and provide necessary permissions for private repos. There should be no impact on accessibility for the deployed app.

    • @eeinfo1
      @eeinfo1 3 місяці тому +1

      @@SumansAcademy tq maam for valuable time

  • @pearlwings_
    @pearlwings_ 8 місяців тому

    can you show me the proxy setting

  • @Sanji.Vinsmoke.99
    @Sanji.Vinsmoke.99 7 місяців тому

    Thank you veru much..

    • @SumansAcademy
      @SumansAcademy  7 місяців тому +1

      You're welcome! Happy coding ✌️

  • @abhayyraz
    @abhayyraz 5 місяців тому

    mam i getting this "Detected a new open port HTTP:8001" and the application is crashig

    • @SumansAcademy
      @SumansAcademy  5 місяців тому +1

      May be another application is using the port your application is trying to use (8001 in this case).
      const port = process.env.PORT || 3000; // Change 3000 to any other port number

    • @abhayyraz
      @abhayyraz 5 місяців тому

      @@SumansAcademy thank you so much mam now it's working

  • @navafff
    @navafff 4 місяці тому

    Thank you so much

  • @abhayyraz
    @abhayyraz 5 місяців тому

    i am getting this error "err = new ServerSelectionError();" please mam help me to solve this error...i just searched whole youtube and found your video helpful a lot. please mam

    • @SumansAcademy
      @SumansAcademy  5 місяців тому

      This error usually occurs when the MongoDB client cannot connect to the MongoDB server.
      1. Ensure that your MongoDB server is running.
      2. If you are using MongoDB Atlas, make sure your IP address is whitelisted in the network access settings.

    • @abhayyraz
      @abhayyraz 5 місяців тому

      @@SumansAcademy This works thank you so much man😊😊

    • @SumansAcademy
      @SumansAcademy  5 місяців тому

      Happy coding ❤️

  • @rishigupta1565
    @rishigupta1565 9 місяців тому

    Cannot find module '/opt/render/project/src/index.js

  • @rutikamble
    @rutikamble 6 місяців тому +1

    Thank you mam

  • @prajwalshaw9217
    @prajwalshaw9217 5 місяців тому

    Didi main jab render pe backend deploy karne ki kosish kar raha hu toh ek error aa raha hain bar bar.
    "npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open '/opt/render/project/src/package.json' "...
    Mere paas toh aisa koi path hain bhi nahi phir pata nahi render kaha point kar raha hain.
    Kindly guide me.

    • @SumansAcademy
      @SumansAcademy  5 місяців тому

      It looks like you're encountering an error because Render is unable to find the package.json file in the expected directory.
      1. Check Your Project Structure: Ensure that your package.json file is in the root directory of your project.
      2. Update the Build and Start Commands:
      --> Go to your Render dashboard.
      --> Navigate to your service settings.
      --> Ensure your Build Command is correctly pointing to where your package.json is located. For example, if your package.json is in a different directory, you might need to change the build command from npm install to cd && npm install.
      --> Update your Start Command similarly.
      If still you are getting error then send me your GitHub repository link. I will check your project structure.

    • @prajwalshaw9217
      @prajwalshaw9217 5 місяців тому

      @@SumansAcademy Thanks didi I was able to deploy it on render and vercel. But another issue arrived. Vercel par deploy karne ke baad jo url ko paste kar raha hu toh kuch nahi display ho raha browser par. Error 404 dikha raha hain. Render pe logs par jake check kiya toh waha as such koi error nahi dikha raha. Phirse se ekbar deploy kiya render aur vercel par tab bhi nahi aa rha. Samajh nahi aa raha yeh error.

    • @SumansAcademy
      @SumansAcademy  5 місяців тому

      Vercel ka deployed URL work nahi kr raha h kya?
      Aisa karo browser p vercel.com k website m login karo.
      Profile k icon m click kr k *Dashboard* page m jao.
      Waha pr sare deployed projects dekhenge. Usme click kr k *deployments* m jao or dekho kya error h.

    • @prajwalshaw9217
      @prajwalshaw9217 5 місяців тому

      @@SumansAcademy Ha didi deployments main Jake current project pe click Kiya aur build logs pe Jake check Kiya toh 0 errors dikha raha hai.

    • @SumansAcademy
      @SumansAcademy  5 місяців тому

      If vercel is not working for you then search on youtube for react app development and try to deploy on different platforms such as netlify or github pages.

  • @top_g755
    @top_g755 8 місяців тому

    Mam help me please on render it's showing module not found error

    • @SumansAcademy
      @SumansAcademy  8 місяців тому

      “module not found” error means you are importing a file with a wrong path. Please check all imports and exports in your code.

    • @top_g755
      @top_g755 8 місяців тому

      @@SumansAcademy Done mam yesterday I was about to cry😑
      But finally it got deployed thankyou mam

  • @WebCoder-12
    @WebCoder-12 3 місяці тому

    Am getting error module not found in render . What should i do ..i have done same process

    • @SumansAcademy
      @SumansAcademy  3 місяці тому

      Check if the module file names are in the correct case. For example, require('./MyFile') won’t work if the actual file is named myfile.js.

    • @WebCoder-12
      @WebCoder-12 3 місяці тому

      @@SumansAcademy error: cannot find module '/opt/render/project/src/index.js am getting these type error

    • @SumansAcademy
      @SumansAcademy  3 місяці тому

      If you can share please share me your github Repository

    • @WebCoder-12
      @WebCoder-12 3 місяці тому

      @@SumansAcademy look at my code i have same processs getting error

    • @SumansAcademy
      @SumansAcademy  3 місяці тому

      Where is your code? Please share your github Repository link

  • @worthydart
    @worthydart 2 місяці тому

    Is the frontend is adding to github?

    • @SumansAcademy
      @SumansAcademy  2 місяці тому

      With this method you don't need to add it to github.

  • @srimanikanta8440
    @srimanikanta8440 7 місяців тому

    My backend is perfectly running on my device but when i try to deploy it , its showing deployment failed. Can you please resolve my issue. i am trying to deploy my project since 30 days but still i cant able to deploy

    • @srimanikanta8440
      @srimanikanta8440 7 місяців тому

      Its Giving nodemon access denied

    • @SumansAcademy
      @SumansAcademy  7 місяців тому

      Send your source code I will try it from my end. (Github repo)

    • @srimanikanta8440
      @srimanikanta8440 7 місяців тому

      @@SumansAcademy Thank you. The deployment is successful using your demo itself. But the dynamic process is not working, means I have a uploads folder in the backend in which if we upload any image that will be stored in the uploads folder and in mongoDB I just store the name of the image. So I render the images such that I check the name of the image in DB ans shows the image using uploads folder in the backend. But it's working upto my local host. But when I deployed , the image is not rendering, may be because it cannot enter to uploads folder.
      🤧Sorry for asking these much of doubts

    • @SumansAcademy
      @SumansAcademy  7 місяців тому

      You're welcome! No worries at all about the questions. If you're using only Multer to upload images, try uploading images using the method described in this video: ua-cam.com/video/UNKQ1I4O7eU/v-deo.html. This has worked for me and might solve the issue with the images not rendering after deployment. Let me know if you need any further assistance!

    • @aakashsaini3963
      @aakashsaini3963 7 місяців тому

      Can i deploy using multer only

  • @chanduaadhf
    @chanduaadhf 5 місяців тому

    Thank You....:)

  • @fsnirjhor
    @fsnirjhor 9 місяців тому

    how to host backend on vercel ?

    • @SumansAcademy
      @SumansAcademy  9 місяців тому +1

      You can not deploy backend on vercel. I have once deployed json server on vercel only GET request was working. Rest Other where not working.
      Vercel is more like deploying frontend application.

  • @veldhisandeep9945
    @veldhisandeep9945 9 місяців тому

    Done thanks a lot

  • @shivam-mc7sx
    @shivam-mc7sx 6 місяців тому

    i am getting cors errr please help

    • @SumansAcademy
      @SumansAcademy  6 місяців тому

      In backend do this.
      1. npm i cors
      2. In index.js or server. js file write
      const cors = require ("cors")
      app.use(cors())
      Also sometimes due to network issue you may get cors error.

  • @ezzylearn2065
    @ezzylearn2065 Рік тому

    Behan vercel ke liye kya install Kiya vercel is not recognised dikha rha ha again and again

    • @SumansAcademy
      @SumansAcademy  Рік тому +1

      Run this command to install vercel globally on your system - - - > npm i -g vercel

  • @anmoldube9395
    @anmoldube9395 4 місяці тому

    Thank you

  • @yousseferaky8665
    @yousseferaky8665 11 місяців тому

    شكراااا ❤❤

  • @amstudio3386
    @amstudio3386 8 місяців тому +1

    source code?

    • @SumansAcademy
      @SumansAcademy  8 місяців тому

      Fronted :
      github.com/UmaSahni/VicharlikhitaFronted
      Backend :
      github.com/UmaSahni/VicharLikhita

  • @realpriyanshu02
    @realpriyanshu02 6 місяців тому

    best

  • @iqraaslam1923
    @iqraaslam1923 6 місяців тому

    Render is not free they are asking about credit card info

    • @SumansAcademy
      @SumansAcademy  6 місяців тому +1

      Hi @iqraaslam1923,
      Thank you for your comment!
      To ensure you can take full advantage of Render's free services without any hassle:
      Sign In Properly:
      1. Make sure to sign in using your original Gmail account or GitHub account via OAuth.
      Avoid using temporary email services as they may cause issues and might require additional verification, such as credit card information.
      Choose the Right Instance Type:
      2. Once signed in, select the "For hobby projects" instance type during setup.
      This option is completely free and perfect for small personal projects.
      If you have any more questions or need further assistance, feel free to ask. I'm here to help!

    • @twosidefact
      @twosidefact 6 місяців тому +1

      select the free version

  • @lakshayjain2309
    @lakshayjain2309 9 місяців тому

    what about api

    • @SumansAcademy
      @SumansAcademy  9 місяців тому

      Till 10:59 we were deploying our api endpoints only on render.
      Now in place of localhost:8080/
      You will use render.com api suppose this - rc-wc0f.onrender.com/

    • @lakshayjain2309
      @lakshayjain2309 9 місяців тому

      Thank a lot...this was the easiest way..... helped me a lot​@@SumansAcademy

    • @SMcutz
      @SMcutz 9 місяців тому

      ​@@SumansAcademydid use window.location.origin

  • @adarsha001
    @adarsha001 6 місяців тому

    I am getting 404 error

    • @SumansAcademy
      @SumansAcademy  6 місяців тому

      In Render.com check in Logs you will get details why you are getting that 404 error.
      If you have time then try to deploy it once again.
      Make sure you are giving the root file directory in render.
      If you are not able to resolve the issue by yourself then write more about the error here.

  • @architbatham4261
    @architbatham4261 5 місяців тому

    👍

  • @parasparashar7720
    @parasparashar7720 11 місяців тому

    Thanks

  • @PM-rs4te
    @PM-rs4te 9 місяців тому

    Having issues with CORS blocking access

    • @SumansAcademy
      @SumansAcademy  9 місяців тому +1

      In backend do this.
      1. npm i cors
      2. In index.js or server. js file write
      const cors = require ("cors")
      app.use(cors())

    • @PM-rs4te
      @PM-rs4te 9 місяців тому

      @@SumansAcademy Thank you for the response. Figured it all out.

  • @AnkitKumar-nl6mc
    @AnkitKumar-nl6mc 7 місяців тому

    Hey, i followed the steps but deploy failed on render , please help , please send your contact details where i can text you the problem

  • @NIVI_TT
    @NIVI_TT 9 місяців тому +1

    Thank you so much 🎉🎉🎉