Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial

Поділитися
Вставка
  • Опубліковано 30 чер 2024
  • Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
    Learn how to deploy a full stack app in this MERN Stack Project tutorial. The MERN Stack is made up of Mongo (M), Express (E), React (R), and Node.js (N). In this tutorial, we deploy the frontend React app and the backend Node.js REST API to Render.com
    💖 Support me on Patreon ➜ / davegray
    ⭐ Become a full-stack web dev with Zero To Mastery Courses:
    - Advanced React & Redux: bit.ly/AdvReactDev
    - The Complete Node.js Developer: bit.ly/CompleteNodeJS
    - Jr to Senior Web Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
    🚩 Subscribe ➜ bit.ly/3nGHmNn
    📬 Course Updates ➜ courses.davegray.codes/
    ❓ Questions - Please post them to my Discord ➜ / discord
    ☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
    👇 Follow Me On Social Media:
    Github: github.com/gitdagray
    Twitter: / yesdavidgray
    LinkedIn: / davidagray
    🔗 All Resources for this MERN Stack Project: github.com/gitdagray/mern_sta...
    🔗 Playlist for this MERN Stack Project Series: bit.ly/3Sn4EaI
    Deploy a Full Stack App - React, Node.js, Express, Mongo | MERN Tutorial
    (00:00) Intro
    (00:08) Welcome
    (00:19) Starter Code - Frontend
    (00:42) Disable React Devtools
    (02:09) Disable Redux Devtools
    (02:28) Update baseUrl in apiSlice
    (03:04) Create git repository & push to Github
    (04:39) Deploy React app to Render.com
    (07:59) Starter Code - Backend
    (08:10) Update allowedOrigins
    (09:08) corsOptions decision to make
    (09:46) Confirm .env is listed in .gitignore
    (10:09) Create repository & push backend to Github
    (11:35) Deploy the backend to Render.com
    (15:08) Check out the live application
    (16:26) User Stories Review
    (17:30) Check mobile view
    (18:39) Extra clean-up
    (19:06) Additional features & scope creep
    Corrections:
    (7:20) Missing step for page reloads & refreshes to work: Go to Redirects/Rewrites and add a rule with Source set to /* and Destination set to /index.html and Action set to Rewrite. Save the rule.
    📚 Suggested Pre-requisites for this MERN course:
    🔗 Node.js for Beginners full course: • Node.js Full Course fo...
    🔗 React JS for Beginners full course: • React JS Full Course f...
    🔗 Redux Toolkit for Beginners full course: • React Redux Full Cours...
    🔗 React Login Playlist: • React Login, Registrat...
    📚 Tutorial References:
    🔗 disable-react-devtools: www.npmjs.com/package/@fviler...
    🔗 Full-Stack Host Render.com: render.com/
    Was this tutorial on How to deploy a full stack app for our MERN Stack Project helpful? If so, please share. Let me know your thoughts in the comments.
    #deploy #full #stack

КОМЕНТАРІ • 221

  • @nwaguchima2280
    @nwaguchima2280 Рік тому +6

    It is always beautiful seeing how much effort you put into your work. My one true source for intermediate and advanced tutorials. I am very grateful Dave, Thank you for all you do, this is beautiful, like every other work you have.

  • @XJerome124
    @XJerome124 Рік тому +49

    Thanks a lot Dave, most tech youtubers do a good job at teaching the basics, however, you are one of the very few ones who go the extra step and teach intermediate to advanced topics in a very thorough but easy to follow manner, I am looking forward to seeing your next series, keep all the good content coming!

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +3

      Thank you for the kind words, Jerome! 💯

    • @XJerome124
      @XJerome124 Рік тому +2

      @@DaveGrayTeachesCode by the way, there is an issue with pages reload that are not the home page, to sort it out, just go to the Redirects/Rewrites tab for your service and add a rule with the following values Source Path = /* , Destination Path = /index.html and Action = Rewrite.

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

      +1 for this. I personally found it hard when looking for an intermediate level tutorial. Glad that Dave's channel provides it (most of the time).

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +4

      Valuable note here Jerome! 💯 Thank you! This is something I overlooked that I _should_ have included in this lesson. I'll make sure to note it in the description and include it in the compilation version.

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

      Thank you, Barathrum! 💯

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

    You are a life saver! This gave me a great idea on how to deploy my full stack app. I was really struggling with Azure but your helpful instructions really paved the path. I am subscribed!

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

    Dave - I have been in software development for quite sometime myself and watched few tutuorials, but by far you are above the rest. It is just beautiful seeing you explain everything. I am very greatful for helping me decide pick the technology stack for the project I am working on. You are great!!! I will be followoing you closely from now on.

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

    Great job here Dave.
    I love the way you teach with simplicity and at the same time not insult the intelligence of your audience by spending too much time on obvious and and extremely simple things.
    Thanks a lot 🙏😍

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

    Every time I watch any of your tut, I learn something new. Thank you Dave, thanks a lot.

  • @DaveGrayTeachesCode
    @DaveGrayTeachesCode  Рік тому +11

    Part 13 of The MERN Stack Project Series - In this lesson, we deploy both the frontend and backend code repositories to Render.com. ***PLEASE NOTE:*** For reloads & refreshes to work, in addition to the deploy instructions for the frontend you must also: Go to the Redirects/Rewrites section in Render.com and set Source to /* , set Destination to /index.html , and set Action to Rewrite. Again, that missing step is for the frontend deployment.*** This tutorial is not for beginners. If you are a beginner, check out my full courses all in one playlist here: ua-cam.com/play/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm.html

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

      Do you know why refreshing on render deploy only works when the trailing ‘/’ is added to the url? Removing the trailing slash takes it to an unknown route

    • @buraksurumcuoglu8303
      @buraksurumcuoglu8303 Рік тому +2

      I've done exactly what you said, the problem persists Dave, please give me a hand.

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

      Please pin this comment to the top of the comments section so people can find it easier! Thanks for the whole MERN stack tutorial.

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

      Hi Dave, Thanks for the great work you're doing. I have completed the mern fullstack tutorial, and I have based a project of my own on it. However, after deploying, the deployed backend works with my localhost and the user can login and acess all of the endpoints but that's not the case with the deployed frontend url, it seems like when logging in the user, the backend fails on checking whether the user is part of the Users collection and therefore foundUser is false. But it does work with the localhost and I hope someone can help me with that.

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

      @@buraksurumcuoglu8303 I still have the same problem, how'd you fix it?

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

    One of the most underrated front end channels out there
    He really puts emphasis on beginner by making everything really simple and covers a whole lot most other people don't making it very comprehensive blow this man up already 😤

  • @hamedayinde9434
    @hamedayinde9434 Рік тому +8

    I completed the entire series of this project and I can't express how profound the knowledge these series imparted on me. It's even more astonishing that contents like these are free. Thank you for putting these series out. I am a frontend developer looking to delve into backend development and these series have done nothing but gave me the requisite confidence to explore further. Thank you Dave.

  • @harshithtejadontoju5312
    @harshithtejadontoju5312 22 дні тому

    Thanks a lot Dave, been following your tutorials from a long time, I've learned the whole full stack development in your channel, and now doing a project by putting all of those technologies together was truly wonderful and insightful. I bet no other course(even a paid one) out there will meet even half of the standards that you have in your videos. Though this series was a bit overwhelming for a beginner like me, your slow and succint deliveries made sure that learned everything eventually. I will never get tired of watching your tutorials and looking forward to learning more content from you. Thanks again for the hard work that you put in your videos. God bless you.

  • @sibusisokumalo7718
    @sibusisokumalo7718 11 місяців тому +3

    Dave, your name is permanently etched in my gratitude list. Of all the teachers, that have taught me, you are my greatest, You did it all to get me to learn to do something for me! maybe, and a cup of coffee, thank you.

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

    Thanks a lot Dave ,just completed the tutorial today and it was amazing journey so far learning from you 🙂.

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

    😍 thank you dave for taking the time out to teach us all this

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

    Thank you Dave! This tutorial was great as the Heroku bump had me in a bit of a tizzy! With this video I'm more understanding of how deployment actually works!

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

    One of the best videos, I have seen so far

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

    Finally I'm watching this tutorial after few months and it's only one which satisfies me for deploying a full-stack app. It doesn't wants to host project on different services and doesn't require additional packages to install! . Everything in single place! I'm watching Your videos for over a year now, strange how time flies :D. Anyway I hope You will grow into a new WebDevSimplified! (He's talking too fast to understand everything after first watch, anyone asked him why D:?)

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

    Thank you very much dave I made it to the end and was able to deploy it. it's the mobile body surrounding the responsive sizes an extension

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

      I think you are asking how I view the responsive sizes in what looks like a mobile phone? An older video of mine shows here: ua-cam.com/video/C12eI5IEin8/v-deo.html

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

      @@DaveGrayTeachesCode Thanks dave

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

    Thank you, this is very informative. this is the only tutorial I found that works for me in deploying MERN App.

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

    Awesome Dave.. i'm learning alot from you.. keep it UP 💪💪

  • @ahmad-murery
    @ahmad-murery Рік тому

    Thanks Dave for the whole tutorial and especially for the advice at the end 19:15

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

      You're very welcome, Ahmad! I hope you have a great day and weekend my friend 💯🚀

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

    Thank you so much great work Dear Dave, pls keep it up continue

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

    Fantastic series! I'm a new viewer, but I'll definitely be checking out some of your other projects (any recommendations?) and I'll be keeping an eye on you in the future. I thought I knew Redux/RTK pretty well, but I learned a lot from this.

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

      Glad I could help! No specific suggestions. Just browse / search for channel for what may interest you. More new content always on the way, too! 💯🚀

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

    Thanks a ton Dave!!

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

    Dave,you are awesome the way you teach any body can learn it

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

    Thank you for this video!

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

    Thank you for this tutorial It helped me to publish my project easily

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

    You are excellent teacher!!!!

  • @o.h.n.o.
    @o.h.n.o. Рік тому +1

    Hey Dave! Love your content. Could you do a tutorial on testing using JS for beginners please?

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

    Amazing!!

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

    Thank YOU,like always Best of the BEST!!!💪👍

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

    Thanks a lot Dav

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

    Thanks Dave You are my inspiration

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

    Hi dave thank you so much for your help

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

    the best lesson thx Dave

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

    I love you!may you love long and teach us much more❤

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

    I finally finished. Great tutorial, with a ton of good knowledge and useful practical skills. I haven't deployed yet but before I do, am curious if there are changes on the Atlas/MongoDB side when you deploy. I seem to recall they restrict access via IP address. Anyhow thank you so much!

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

      Good work! When you deploy, note the comment in the description about setting the rewrite/redirect setting in Render.com so React Router works correctly.

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

    Dave, you are the sunshine of my life, I wonder if there are any forum or chatting group or webpage to discuss the detail about your tutorial? --- I still have a lot of question to ask, thanks.

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

      I think you are looking for my Discord where viewers discuss, ask and answer questions: discord.gg/neKghyefqh ...I answer questions there, too.

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

    Thanks a lot!!

  • @VishalSharma-fj7fd
    @VishalSharma-fj7fd Рік тому

    Amazing 😍😍

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

    Awesome tutorial thank you

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

    Excellent series Dave! Shall we expect something similar with TypeScript?

  • @legendkiller456
    @legendkiller456 13 днів тому +1

    This is awesome, thank you! Is it normal to separate your back-end and front-end like this? My server folder (back-end) is located inside the app so I think it would be uploaded together with the front-end.

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

    Thanks Dave sir ❤️❤️

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

    Excellent bro!! I changed from zeet to render.

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

    Very good. Thanks.

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

    Thanks for another great video!
    So what do you do if you are in a situation where you dont have a place from the host to put .env? How would you get around that? It would be awesome to see a tutorial on how to host the server from your own network and how you would deal with making sure the env is hidden in that circumstance.

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

      You can create a .env file on the server if your host doesn't provide a UI for you to enter the values.

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

    thankiu alot my love

  • @user-ce4og2hs5k
    @user-ce4og2hs5k 3 місяці тому

    Removing the ' !origin ' from the cors options will throw an error I just wrote it back and now it works as expected, thank you

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

    thank you, kind sir!

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

    Thank you!

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

    Thanks Dave

  • @big-jo89
    @big-jo89 Рік тому

    excellent tutorial as expected.
    just one question, do we have to split the repos or can we just make one big repo that contain both front and back end code? is it doable this way?

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

      You could keep both codebases in one repo, but I wanted to keep this as real as possible - and you just won't see the frontend and backend share a repo other than in your practice projects. Likewise, when you deploy as shown in this video, you've got a frontend static website and a backend web service. Two different deployments.

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

    Many thanks Dave for the advanced MERN stack tutorial. Will it be possible to have a MERN stack tutorial using microservice architecture?

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

      You could say this tutorial uses microservices. We built a separate frontend and backend. They aren't required to be hosted on the same server or even with the same host. Reference: microservices.io/

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

    Hopefully you will make this series into one long video

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

    Hi Dave, thanks for all you do from a fellow Kansas Citian! I caught that in one of your previous videos. I stumbled upon your channel last year and was very impressed compared to the myriad of teachers out there. Pretty freaking awesome to learn you're here in KC! I've just completed this project but unfortunately ran into a little snag with creating notes. It happened last week as I was in the initial stages (setting up Mongo and seeding a couple records via Postman). I spent a decent chunk of time when it occurred, but in the spirit of "Progress Not Perfection" I wanted to press on and learn as much as I could thinking I might find the solution along the way in my review sessions. Long story short: I have not fixed the issue yet so I'm reaching out for some help. I can't efficiently detail it here so I'm wondering what might be the best method/place to post my issue and ask some questions. Thanks in advance! Go Chiefs!!!

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

      I am definitely in the KC area! On my Discord, it has been discussed that mongoose-sequence is not working with Mongoose 7. You could roll back Mongoose to the version I have in my package.json file or find an alternative to mongoose-sequence - but I'm guessing that is the issue.

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

      @@DaveGrayTeachesCode Much appreciated. Worked like a charm!

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

    great tutorial! one question, where are all the database data are stored? don't you need to deploy the mongo DB to a remote server as well?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  11 місяців тому +1

      We are using MongoDB Cloud Atlas. You are already accessing MongoDB in the cloud here.

  • @sagargupta5135
    @sagargupta5135 11 місяців тому +1

    Thanks a lot......

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

    Thanks dave, for doing this series, they help a LOT..

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

    There is one part that wasn't explained (maybe it was earlier in the series). How did it know which MongoDB to use?

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

    Thanks Dave, this was a fun ride, been curious on tht feature too a "save to draft" especially saving automatically.
    Care to give it a spin, even a short one 🙆🏾‍♂️.
    Greetings from Tanzania 🇹🇿

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

      You're welcome and thank you for joining me on the journey! 💯🚀 I think the "save to draft" feature is a good viewer challenge 🚀 ...if I were to do it, I would apply the useInput and useLocalStorage hooks I cover in this video: ua-cam.com/video/eQrbjvn_fSc/v-deo.html

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

    hey dave, it's really cool but can you let me know if it's possible to have a single deployment for both frontend and backend?

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

      It depends on what you are using - for example, Next.js supports this because it is a fullstack framework. You can have a monorepo that contains your code for the frontend and backend.. but the backend is still deployed to the server and the frontend is usually deployed separately like this project unless using a framework like Next.js. Also, Next.js can use a separate backend if needed / wanted.

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

    I am a full time application developer who has been stuck in the past. I want to modernize our front end and move from aspx to react. Your mern playlist takes an application from development to deployment. Most just build an example and run on localhost. When is your book coming out. Do you teach via remote?

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +2

      I remember working with asp files! Thank you for asking about a book and remote teaching. I want to do both and need to start working on a premium course that offers both a book and video format. I am not doing one-on-one or group mentorship remotely at this time. I am getting consistent requests though and may start doing so. 💯

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

      @@DaveGrayTeachesCode I completely understand. I will keep an eye out should anything change. I am looking forward to future videoa and material.

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

    Thank you for this quick lesson sir. I have a question what if i use nodejs and flask together for backend they communicate with each other but how can i deploy my server should i create two web service and change request urls ?

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

      Sounds like two separate backends. Node.js and then another with Flask in a Python environment. They can all communicate as separate entities.

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

    thanks for the amazing tutorial dave, people who do what you do are common but people who do it the way you do it don't exist, could you please leave a link to you discord server,
    also when I refreshed the dash page on the deployed website I got a Not Found error, and I even took the code from your github repo and nohting changed

  • @blessingz
    @blessingz Рік тому +2

    I was stressed for my free apps seeing heroku going all paid thank Dav for the alt.

    • @DaveGrayTeachesCode
      @DaveGrayTeachesCode  Рік тому +3

      You're welcome! So far, I really like Render.com and am glad that it offers a free tier without asking for any billing info.

  • @singhgautam18
    @singhgautam18 24 дні тому

    nice

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

    Hello DaveI previously asked a question about splitting my repositories.I've finally known how do,but while preparing for production I am experiencing a problem: whenever I remove the proxy field from my package.json and add the URL in a .env to access as process.env in my code ,my app stops working in development.Is it a normal issue that will resolve after production,can I go ahead and push to GITHUB or is there something I am not doing right.I have cors referencing my frontend port and the domain name I intend to use on render.please I need help what should I do about the proxy in my package.json.

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

    Awesome video +++++++++++++++

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

    how did you diaplay the phone, look sso cool and realistic, i want that too

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

    hi sir can i ask what is publish directory? im getting an error saying ` Publish directory src does not exist! `

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

    The refresh cookies are not saved parmanently on the browser. When you refresh the app they disappear
    The app probably need to be deployed with a custom Domain for cookies to persist.

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

    Sir I tried to deploy the backend in node environment, i am getting this error in index.JS file
    for importing middleware function,
    Error: Cannot find module './AREAS/FUNC', here AREAS is the other folder, and FUNC is the JS file containing the middle wares,

  • @amhf-mernstackweb3822
    @amhf-mernstackweb3822 Рік тому +1

    hello, how are you?
    Why set.cookie... doesn't work after deploying to render? cookie sets locally only

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

      Compare your code to my completed code in the course resources. My thought is you may not have secure: true set in your cookie? When deployed, Render (and most hosts) will use "https" instead of "http" like your local dev setup.

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

    Awesome job! Screw paid Heroku, this is free and much easier.

  • @user-dy6rf3zn3g
    @user-dy6rf3zn3g Рік тому +1

    Hi Dave ,i followed all the steps you should
    At first deployed the frontend on render which is live and added that same url to the backend allowed origins
    But whenever I try to login from the online hosted frontend it is getting blocked by cors
    But if i try to access the online hosted api through my localhost and postman they are working fine
    I have added the frontend url inside the allowed origins but still cors is blocking the requests to the online hosted api
    Please suggest what to do

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

      It sounds like there must be an omission or typo in the allowed URL of the deployed site. It must match _exactly_ to what is in the allowed origins list. For example, if one has a / at the end and one doesn't = problem. Or one has http and the other has https. It is likely something little like that.

    • @user-dy6rf3zn3g
      @user-dy6rf3zn3g Рік тому

      @@DaveGrayTeachesCode Dave, you are correct. I was missing a '/' at the end, which caused the Cross-Origin Resource Sharing (CORS) to not allow it. Thank you for taking the time to answer my question.

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

    Greetings I have a mern stack app that was deployed to Heroku and it's in one repository I need help redeploying it to render but all the tutorials I have used so far split the code into two repositories. How do you deploy when everything is in one repository?

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

      I don't. You should split it up. Separation of concerns. That way you won't auto-deploy the backend when make a change to the frontend or vice-versa.

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

    Hy Dave i have a question. If we use redis cache with mern ,can this service will handle this or we have to change some settings .. A few time ago i have created a frontend app and when i uploaded it using free hosting service then some of its functionalities do not work .Thats why i asking this question..

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

      This project uses MongoDB instead of Redis. You can see in this tutorial that the free hosting at Render.com will work to host this project and the data is in the MongoDB cloud.

  • @user-sb1ex2ys1q
    @user-sb1ex2ys1q 8 місяців тому

    is it compulsory to disable react devtools or without it it'll work fine?

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

      It will work either way. I'd say it is a good idea for an app like this.

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

    Dave, amazing tutorial. How to deploy pern stack postgresql node react. I have code on GitHub but don't have npm run build and without migration tool. Is it possible to deploy pern stack on render

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

      I think you can because Render does support PostgreSQL: render.com/docs/databases

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

    why is .env in a git ignore file? Your going to set the dev or defaults variables there, the values of those variables can be picked up from the system variables that are set on the server where you deploy

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

    Even Render now asks for credit card details for Static Sites and Web Services. What would you recommend for MERN deployment now?

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

      That is too bad, but if they still don't charge you for small projects, it is a good service.

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

    Hi Dave, thanks for the tutorial. I'm currently trying to host an application I built using React, Node and PostgreSQL on Render and I keep hitting a bug. I'm storing my jwt token in the browser cookies on login. This works perfectly in Postman and in my local environment but once I host my application on Render, I noticed that when the user logs in, the token is no longer being saved in the cookies so the user can't make api requests to routes that require authentication. I've tried several ways to fix this but I'm stuck. The app also crashes when the user tries to refresh. I noticed that you disabled the devtools so I'm wondering if that has anything to do with the issue I'm encountering in my application

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

      I don't think it has anything to do with devtools. If it works in your local environment, you probably don't have secure: true set in the cookie - because that would require https and your local environment is http. If you add secure: true to the cookie, it should work when deployed which will use https.

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

    Sir make document tracking system web based in MERN stack with source code

  • @aniketwaghamare8474
    @aniketwaghamare8474 6 днів тому

    Can you try to make skin disease classification using CNN project .

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

    what is next ? waiting ..........................

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

    The web service is just refusing to run w/o error, im using mySQL, tried everything possible on the internet...

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

    dear Dave, I hope you are very fine. When I remove !origin from the corsOptions I get a CORB blocking the images (I have added images on the notes) do you have an idea why this is happening? many thanks for you help as usual 🙏

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

      CORS = Cross-Origin Resource Sharing. Where are the images coming from? If you are pulling them in from another domain, CORS will block that domain unless you list it in the allowedOrigins.

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

      @@DaveGrayTeachesCode Yes ! many thanks, I have seen that I was trying to pull images that were uploaded previously from the localhost (imageUrl is stored in the DB). Still I have problems because url is on http not https, I suppose I can store images url in the DB with relative path instead of absolute? 🙏

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

      @@DaveGrayTeachesCode dear Dave, in fact I try to upload and serve my image files from Render server disk (multer) maybe this is not allowed from their side and that causes the issue?

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

    Hey, Dave. I followed this whole tutorial and was able to successfully deploy and run the app. I ended up using much of the code to set up another app I am working on. What I can’t understand is why I can persist login on desktop and on safari (on my iPhone), but not on chrome mobile. I’ve searched and searched and I cannot find an answer at all. Any help would be appreciated! From what I can tell, Chrome is erasing the token on refresh, but Safari is not and neither is Chrome desktop.

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

      Strange.. it could be a setting you have in your Chrome on mobile. Check this: support.google.com/chrome/answer/95647?hl=en&co=GENIE.Platform%3DAndroid

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

      I don’t know how I missed it, but for anyone else having the same issue - turn on “Allow Cross-Website Tracking” for Chrome.

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

      @@DaveGrayTeachesCode I am having a similar problem, I can only persist login on chrome desktop, but not on safari and chrome mobile. Any suggestions??

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

    how about integrating swagger?

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

      That could be a nice addition! This project was not for a publicly consumed API so not as necessary. Swagger is great for public API documentation.

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

    Hii iam working on different mern project everything is working fine but when i reload the page it just says 404 error not found.......it is working well in local host it is not working after deployment.....

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

      Look at the Render.com section again and the note in the description about rewrite/redirect settings

  • @thanathatjivapaiboonsak2180

    What theme you use??

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

    Wow

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

    i sucessfully deployed my full stack site but the database is getting connected to mongo only when i locally connect the db in vs code terminal.... plz help me.... Is it due to origins url??

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

      did you find a solution?

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

      Whitelist the ip addresses of your api in the mongo settings. Render will give you a list of ips it uses for your apps.

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

    Has anyone faced the issue of the deployed app not storing cookies on safari(Desktop/mobile) and chrome(mobile). The cookie gets stored on chromes desktop but nothing else. I have set secure to true and even tried adding the domain property to the res.cookie but I am still not able to store the cookie in the browser for safari(desktop/mobile). Any help would be great..

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

      I'm currently facing the same issue, have you found a solution on this brother?

  • @BismaIjaz-qt6ep
    @BismaIjaz-qt6ep Місяць тому

    why is it asking me for a card?

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

    dear Dave, I have a "unauthorized - Please login again" at page refresh on safari (but all is ok on chrome or firefox), will you have an idea why by chance? 🙏

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

      If this is during deployment, you may have tried to access it with Safari before it was available - and now Safari has temporarily cached this result. Clear you cache and try again.

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

      @@DaveGrayTeachesCode damn no still getting the unauthorized after page refresh even if I clear the cache... I did not implemented your "prefetch vs initiate" refactor in my code this is not creating the issue no?

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

      @@DaveGrayTeachesCode Dear Dave, it seems Safari is blocking cross-site cookies by default... Do you have a workaround for that by chance?

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

      @@sebastiengautier3782 sounds like a CORS configuration issue. Check your CORS set up on the backend.

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

      @@DaveGrayTeachesCode dear Dave, I have the same CORS config as you. Should I not use refresh tokens rotation to bypass safari privacy tech ?

  • @user-vy2sw5zo6q
    @user-vy2sw5zo6q 8 місяців тому

    where can i find access_token_secret and refresh_token-secret tell me

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

      You must create your own. You learn how to do this in the recommended Node.js course prerequisite but I'm sure I also mention that in this series. You must then enter them with your host during deployment.

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

    cant see repository so it is usless for me

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

    Sir, The hosting is properly done but there is one problem, My website has a dashboard on every page and on dashboard i included the login user's profile. the profile is showing only in homepage and when i go to other page its undefine. please help me out with this

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

      Did you see the note in the description about setting the Render.com redirects/rewrites? I'm guessing that is the issue.

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

      @@shakirfarhan yes, do not send a .env file to Github. Instead, enter the environment variables in your host like Render.com

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

      @@DaveGrayTeachesCode i did that but whenever i push my data from frontend to mongodb. its not showing the added data. i have checked that in atlas there also i didnt get any data

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

      @@DaveGrayTeachesCode And the backend is connected with mongoDb.

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

      @@shakirfarhan check your .env values. If they are not being inserted, try to find out why not.

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

    I am getting an issue. the frontend and backend is hosted but i server is rendering only homepage, whenever i go on other router its showing 404 error. please help me

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

      Note the rewrite/redirect noted in the Render.com deployment. Look in the description if you have missed that setting.

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

      @@DaveGrayTeachesCode Thanks it got solved

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

      @@shakirfarhan I have the same issue, even though I did what Dave said about the issue, how did you solve it? Could you give me a hand?

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

      @@buraksurumcuoglu8303 search about redirects/rewrites in render and copy that to your render