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

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

Пікірлер: 217

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

    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

    Жыл бұрын

    Thank you for the kind words, Jerome! 💯

  • @XJerome124

    @XJerome124

    Жыл бұрын

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

    Жыл бұрын

    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! 💯

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

    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.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you for the kind words! 🙏

  • @Sadgesaltine
    @Sadgesaltine6 ай бұрын

    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!

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you for the kind words, Donatus! 🙏

  • @fahmihussein17
    @fahmihussein176 ай бұрын

    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.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    6 ай бұрын

    Thank you!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad to hear that!

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

    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 😤

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you! 💯🚀

  • @sibusisokumalo7718
    @sibusisokumalo771811 ай бұрын

    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.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    11 ай бұрын

    You are very welcome!

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

    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.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Great to hear!

  • @stephenafari8821
    @stephenafari88216 ай бұрын

    One of the best videos, I have seen so far

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

    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: kzread.info/head/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm

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

    Жыл бұрын

    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?

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Welcome!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Great to hear!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad I could help!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad to hear it! 💯

  • @vinayryuzakikale7247
    @vinayryuzakikale72479 ай бұрын

    Thanks a ton Dave!!

  • @ahmad-murery
    @ahmad-murery Жыл бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

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

  • @bilalahmedkhan5876
    @bilalahmedkhan58768 ай бұрын

    Thank you for this video!

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

    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

    Жыл бұрын

    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: kzread.info/dash/bejne/dWVmx6tueajPnps.html

  • @stephenasiedu76

    @stephenasiedu76

    Жыл бұрын

    @@DaveGrayTeachesCode Thanks dave

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome, Rammehar! 🙏💯

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you for the kind words, Dharmesh!

  • @vladimirjovanovic3540
    @vladimirjovanovic35403 ай бұрын

    You are excellent teacher!!!!

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

    Thanks Dave You are my inspiration

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Glad I can help!

  • @badrbeh5706
    @badrbeh57065 ай бұрын

    Thanks a lot Dav

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome! 💯

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

    the best lesson thx Dave

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

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

    Amazing!!

  • @jellyfish1772
    @jellyfish17724 ай бұрын

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

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

    Hi dave thank you so much for your help

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You are very welcome!

  • @sadafhossain521
    @sadafhossain5219 ай бұрын

    Thanks a lot!!

  • @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! 💯🚀

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

    Awesome tutorial thank you

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome! 💯

  • @o.h.n.o.
    @o.h.n.o. Жыл бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Great suggestion!

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

    Thanks Dave sir ❤️❤️

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome, Adarsh!

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

    Жыл бұрын

    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.

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

    Very good. Thanks.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Welcome!

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

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

    Excellent bro!! I changed from zeet to render.

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Nice work!

  • @VishalSharma-fj7fd
    @VishalSharma-fj7fd Жыл бұрын

    Amazing 😍😍

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you, and yes, eventually! 💯

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

    thank you, kind sir!

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

  • @vominhtrioffical7157
    @vominhtrioffical71574 ай бұрын

    thankiu alot my love

  • @user-ce4og2hs5k
    @user-ce4og2hs5k3 ай бұрын

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

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

    Жыл бұрын

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

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

    Thank you!

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    You're welcome!

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

    Thanks Dave

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Welcome!

  • @21almog
    @21almog10 ай бұрын

    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

    10 ай бұрын

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

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

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

    Жыл бұрын

    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.

  • @sagargupta5135
    @sagargupta513510 ай бұрын

    Thanks a lot......

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

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    My pleasure!

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

    Hopefully you will make this series into one long video

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Indeed! 💯

  • @dragonore2009
    @dragonore20096 ай бұрын

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

  • @germaneswalter8560
    @germaneswalter85602 ай бұрын

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

  • @ecedlnsskn
    @ecedlnsskn6 ай бұрын

    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

    6 ай бұрын

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

  • @hariacharya2050
    @hariacharya205011 ай бұрын

    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

    11 ай бұрын

    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.

  • @ehee27
    @ehee2711 ай бұрын

    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

    11 ай бұрын

    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

    11 ай бұрын

    @@DaveGrayTeachesCode Much appreciated. Worked like a charm!

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

  • @shantanu556
    @shantanu5568 ай бұрын

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

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

    Жыл бұрын

    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.

  • @singhgautam18
    @singhgautam18Күн бұрын

    nice

  • @muhammadhabban9977
    @muhammadhabban99778 ай бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    8 ай бұрын

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

  • @user-sb1ex2ys1q
    @user-sb1ex2ys1q7 ай бұрын

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    7 ай бұрын

    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

    Жыл бұрын

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

  • @amhf-mernstackweb3822
    @amhf-mernstackweb3822 Жыл бұрын

    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.

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

    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.

  • @ElvaGood2
    @ElvaGood22 ай бұрын

    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.

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

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

  • @MubashirullahD
    @MubashirullahD7 ай бұрын

    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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    7 ай бұрын

    You never want to send your .env file(s) to GitHub.

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

    Жыл бұрын

    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.

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    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.

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

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

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Thank you! Cheers!

  • @user-dy6rf3zn3g
    @user-dy6rf3zn3g Жыл бұрын

    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.

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

    Жыл бұрын

    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: kzread.info/dash/bejne/l4WmxMyvnsLMg8Y.html

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

  • @Bodrie
    @Bodrie6 ай бұрын

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

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

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

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

    What theme you use??

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Github theme - link in course resources. 🚀

  • @BismaIjaz-qt6ep
    @BismaIjaz-qt6epАй бұрын

    why is it asking me for a card?

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

    Жыл бұрын

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

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

    Жыл бұрын

    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?

  • @kacperkepinski4990
    @kacperkepinski49908 ай бұрын

    cant see repository so it is usless for me

  • @user-vy2sw5zo6q
    @user-vy2sw5zo6q7 ай бұрын

    where can i find access_token_secret and refresh_token-secret tell me

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    7 ай бұрын

    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.

  • @marquessmalley1778
    @marquessmalley17789 ай бұрын

    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?

  • @markpiland5256
    @markpiland525610 ай бұрын

    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

    10 ай бұрын

    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

    10 ай бұрын

    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

    9 ай бұрын

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

  • @ashimsth5423
    @ashimsth54238 ай бұрын

    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?

  • @ElvenIvy07

    @ElvenIvy07

    2 ай бұрын

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

  • @jalendharmamidi9457
    @jalendharmamidi94579 ай бұрын

    Hi please help with the password of DanD user for my testing

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

    Wow

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

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

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

    Cannot GET / backend part no deploy

  • @DaveGrayTeachesCode

    @DaveGrayTeachesCode

    Жыл бұрын

    Are you receiving an error in the log provided by Render.com?

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

    Жыл бұрын

    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

    Жыл бұрын

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

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

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

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

    👍👍👍👍👍👍👍