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

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

Thank you for the kind words, Jerome! 💯

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

+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]

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]

Thank you, Barathrum! 💯

[@Sadgesaltine]

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!

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

Thank you for the kind words! 🙏

[@fahmihussein17]

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]

Thank you!

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

Thank you for the kind words, Donatus! 🙏

[@mrbilchalan]

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

[@DaveGrayTeachesCode]

Glad to hear that!

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

Thank you! 💯🚀

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

Great to hear!

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

Great to hear!

[@DecodingOpenSource]

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

[@DaveGrayTeachesCode]

You're welcome!

[@igwenonso4084]

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

[@DaveGrayTeachesCode]

Welcome!

[@stephenafari8821]

One of the best videos, I have seen so far

[@bilalahmedkhan5876]

Thank you for this video!

[@sibusisokumalo7718]

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]

You are very welcome!

[@vinayryuzakikale7247]

Thanks a ton Dave!!

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

Thank you!

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

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: kzbin.info/www/bejne/eWKVlnxrfqqcpJo

[@stephenasiedu76]

@@DaveGrayTeachesCode Thanks dave

[@dolinio100]

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

[@DaveGrayTeachesCode]

Glad to hear it! 💯

[@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: kzbin.info/aero/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm

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

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

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

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]

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

[@techexplorerdarwin]

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

[@DaveGrayTeachesCode]

Glad I could help!

[@ahmad-murery]

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

[@DaveGrayTeachesCode]

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

[@rammehar5531]

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

[@DaveGrayTeachesCode]

You're welcome, Rammehar! 🙏💯

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

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

[@poorvankshah2848]

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

[@DaveGrayTeachesCode]

You're welcome!

[@dharmeshgohil9375]

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

[@DaveGrayTeachesCode]

Thank you for the kind words, Dharmesh!

[@o.h.n.o.]

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

[@DaveGrayTeachesCode]

Great suggestion!

[@girmasebsibe605]

Thanks Dave You are my inspiration

[@DaveGrayTeachesCode]

Glad I can help!

[@Sylar7773]

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

[@DaveGrayTeachesCode]

You're welcome! 💯

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

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]

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]

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

[@sadafhossain521]

Thanks a lot!!

[@vladimirjovanovic3540]

You are excellent teacher!!!!

[@jellyfish1772]

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

[@React_master]

the best lesson thx Dave

[@DaveGrayTeachesCode]

You're welcome!

[@dimitrioschatziioannou8831]

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

[@DaveGrayTeachesCode]

Thank you, and yes, eventually! 💯

[@omarakki705]

Hi dave thank you so much for your help

[@DaveGrayTeachesCode]

You are very welcome!

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

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

[@badrbeh5706]

Thanks a lot Dav

[@user-ce4og2hs5k]

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

[@tester424]

Excellent bro!! I changed from zeet to render.

[@DaveGrayTeachesCode]

Nice work!

[@sonamohialdin3376]

Awesome tutorial thank you

[@DaveGrayTeachesCode]

You're welcome! 💯

[@holenz5935]

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

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

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

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]

@@DaveGrayTeachesCode Much appreciated. Worked like a charm!

[@adarshalone7579]

Thanks Dave sir ❤️❤️

[@DaveGrayTeachesCode]

You're welcome, Adarsh!

[@adeni4359]

Hopefully you will make this series into one long video

[@DaveGrayTeachesCode]

Indeed! 💯

[@shantanu556]

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

[@exkoi]

thank you, kind sir!

[@DaveGrayTeachesCode]

You're welcome!

[@MOJICA7257]

Amazing!!

[@alielb2130]

Thanks Dave

[@DaveGrayTeachesCode]

Welcome!

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

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.

[@muhammadhabban9977]

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

[@DaveGrayTeachesCode]

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

[@VishalSharma-fj7fd]

Amazing 😍😍

[@draicor]

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

[@DaveGrayTeachesCode]

My pleasure!

[@eleah2665]

Very good. Thanks.

[@DaveGrayTeachesCode]

Welcome!

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

[@jewelayuk]

Thank you!

[@DaveGrayTeachesCode]

You're welcome!

[@vominhtrioffical7157]

thankiu alot my love

[@21almog]

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]

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

[@sagargupta5135]

Thanks a lot......

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

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

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: kzbin.info/www/bejne/m4LVk52so8SZicU

[@dragonore2009]

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

[@germaneswalter8560]

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

[@ecedlnsskn]

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]

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

[@marquessmalley1778]

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]

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

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

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]

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]

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]

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

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

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

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

[@ElvaGood2]

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.

[@blessingz]

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

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

[@muhammadubaid6576]

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

[@user-sb1ex2ys1q]

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

[@DaveGrayTeachesCode]

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

[@vojtechruzicka5670]

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

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

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

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]

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

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]

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.

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

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.

[@amhf-mernstackweb3822]

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

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

[@MubashirullahD]

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]

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

[@Bodrie]

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

[@jalendharmamidi9457]

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

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

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]

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

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

[@AuxiliaryOfficial]

how about integrating swagger?

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

[@kacperkepinski4990]

cant see repository so it is usless for me

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

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]

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

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

[@DaveGrayTeachesCode]

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

[@sebastiengautier3782]

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

[@BismaIjaz-qt6ep]

why is it asking me for a card?

[@markpiland5256]

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]

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]

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]

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

[@mohamedyoussef8835]

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

[@DaveGrayTeachesCode]

Thank you! Cheers!

[@thanathatjivapaiboonsak2180]

What theme you use??

[@DaveGrayTeachesCode]

Github theme - link in course resources. 🚀

[@ashimsth5423]

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]

did you find a solution?

[@ElvenIvy07]

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

[@user-vy2sw5zo6q]

where can i find access_token_secret and refresh_token-secret tell me

[@DaveGrayTeachesCode]

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.

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

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

[@dharmeshgohil9375]

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

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

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

[@DaveGrayTeachesCode]

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

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

@@DaveGrayTeachesCode And the backend is connected with mongoDb.

[@DaveGrayTeachesCode]

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

[@danaharliansyah384]

Wow

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

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

[@shakirfarhan]

@@DaveGrayTeachesCode Thanks it got solved

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

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

[@tommasorzt6558]

Cannot GET / backend part no deploy

[@DaveGrayTeachesCode]

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

[@ambiguity1768]

Is anyone experiencing issues with refresh tokens post-deployment? Locally, everything is working without any problems.

[@DaveGrayTeachesCode]

Have you checked for CORS errors? That is something you can experience after deployment that you will not in a local environment.

[@ambiguity1768]

@@DaveGrayTeachesCode I'm getting ApiError: The user is not authorized! at ApiError.UnauthorizedError (/var/task/server/exceptions/api-error.js:12:12) at UserService.refresh (/var/task/server/service/user-service.js:88:22) at refresh (/var/task/server/controllers/user-controller.js:80:42) To me, it seems like I cannot retrieve the refresh token from cookies. I have tested the same request using Postman, and everything is okay. I am able to retrieve and save the refresh token, but it does not work in the same way when in the browser. Maybe I do not understand something. 🤔

[@arunkumar-tn5gu]

If(process.env.NODE_ENV) the process is not defined why help me

[@DaveGrayTeachesCode]

You have to define that environment variable with the others in your Render.com settings if you want to use it. Otherwise, remove it from your code. I recommend removing it because you are clearly in production mode when you deploy.

[@arunkumar-tn5gu]

Ok. thanks for your reply ...best teacher 😍