Thanks Dave... took me a week (I am a React newbie), but got it working (on Render) thanks to the quality of your demo. A few problems (not all customers stories work), but for a 2+ year old video thats pretty good.
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 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.
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.
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.
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: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
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
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.
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!
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.
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.
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:?)
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.
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.
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 😤
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: ruclips.net/video/C12eI5IEin8/видео.html
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!
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 🙏😍
Thank you for this video, Dave. HOWEVER, this is asinine. The amount of steps it takes to get this done is almost unrealistic. I know you know all the steps and you explain very well. It's just too much! Keep it going brother.
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.
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.
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.
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/
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!
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.
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.
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.
now what if your server and client are in the same repo... i still have a few bugs on my personal site but hopefully this tutorial will be helpful when i need to deploy it. even without being the same project, it should still deploy the same. just worried if my repo having both the server and client might be hard.
@@knightofcarrion7358 You should be able to set up both to auto deploy from GitHub based on the directory. Each hosting service may be different but Render and Vercel both make it easy to set up.
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
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!!!
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.
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?
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. 💯
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?
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.
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
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.
@@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.
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 ?
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.
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?
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.
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,
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 🇹🇿
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: ruclips.net/video/eQrbjvn_fSc/видео.html
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
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..
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.
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 🙏
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.
@@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? 🙏
@@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?
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..
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? 🙏
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.
@@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?
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
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??
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
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.
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.
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.
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
@@DaveGrayTeachesCode I am having a similar problem, I can only persist login on chrome desktop, but not on safari and chrome mobile. Any suggestions??
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
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 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
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.....
Thanks Dave... took me a week (I am a React newbie), but got it working (on Render) thanks to the quality of your demo. A few problems (not all customers stories work), but for a 2+ year old video thats pretty good.
Glad it helped you! Thank you for the support!
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!
Thank you for the kind words, Jerome! 💯
@@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.
+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).
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.
Thank you, Barathrum! 💯
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.
You are very welcome!
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: ruclips.net/p/PL0Zuz27SZ-6M1Uopt6_VL3gf3cpMnwavm
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
I've done exactly what you said, the problem persists Dave, please give me a hand.
Please pin this comment to the top of the comments section so people can find it easier! Thanks for the whole MERN stack tutorial.
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.
@@buraksurumcuoglu8303 I still have the same problem, how'd you fix it?
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!
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.
Great to hear!
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.
Glad I have helped you. Thank you for the kind words 🙏
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:?)
Thank you!
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.
Thank you!
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.
Thank you for the kind words! 🙏
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 😤
Thank you! 💯🚀
Every time I watch any of your tut, I learn something new. Thank you Dave, thanks a lot.
Glad to hear that!
One of the best videos, I have seen so far
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
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: ruclips.net/video/C12eI5IEin8/видео.html
@@DaveGrayTeachesCode Thanks dave
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!
Great to hear!
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 🙏😍
Thank you for the kind words, Donatus! 🙏
Thank you for this video, Dave. HOWEVER, this is asinine. The amount of steps it takes to get this done is almost unrealistic. I know you know all the steps and you explain very well. It's just too much! Keep it going brother.
😍 thank you dave for taking the time out to teach us all this
Welcome!
Thanks Dave for the whole tutorial and especially for the advice at the end 19:15
You're very welcome, Ahmad! I hope you have a great day and weekend my friend 💯🚀
Thank you, this is very informative. this is the only tutorial I found that works for me in deploying MERN App.
Glad I could help!
Thanks a lot Dave ,just completed the tutorial today and it was amazing journey so far learning from you 🙂.
You're welcome!
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.
I think you are looking for my Discord where viewers discuss, ask and answer questions: discord.gg/neKghyefqh ...I answer questions there, too.
Dave,you are awesome the way you teach any body can learn it
Thank you for the kind words, Dharmesh!
Awesome Dave.. i'm learning alot from you.. keep it UP 💪💪
Glad to hear it! 💯
You are excellent teacher!!!!
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.
Thank you for this tutorial It helped me to publish my project easily
You're welcome!
Removing the ' !origin ' from the cors options will throw an error I just wrote it back and now it works as expected, thank you
Thank you so much great work Dear Dave, pls keep it up continue
You're welcome, Rammehar! 🙏💯
I love you!may you love long and teach us much more❤
Thanks Dave You are my inspiration
Glad I can help!
Hey Dave! Love your content. Could you do a tutorial on testing using JS for beginners please?
Great suggestion!
Excellent bro!! I changed from zeet to render.
Nice work!
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.
Thanks a ton Dave!!
Hopefully you will make this series into one long video
Indeed! 💯
Thank you for this video!
There is one part that wasn't explained (maybe it was earlier in the series). How did it know which MongoDB to use?
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?
We are using MongoDB Cloud Atlas. You are already accessing MongoDB in the cloud here.
the best lesson thx Dave
You're welcome!
Many thanks Dave for the advanced MERN stack tutorial. Will it be possible to have a MERN stack tutorial using microservice architecture?
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/
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!
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.
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.
You can create a .env file on the server if your host doesn't provide a UI for you to enter the values.
Excellent series Dave! Shall we expect something similar with TypeScript?
Thank you, and yes, eventually! 💯
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.
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! 💯🚀
I was stressed for my free apps seeing heroku going all paid thank Dav for the alt.
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.
Hi dave thank you so much for your help
You are very welcome!
Thanks dave, for doing this series, they help a LOT..
My pleasure!
Thanks a lot Dav
Thank YOU,like always Best of the BEST!!!💪👍
You're welcome! 💯
Awesome tutorial thank you
You're welcome! 💯
Thanks Dave sir ❤️❤️
You're welcome, Adarsh!
Astounding content and a brilliant teaching style. Thanks for your time and effort, Dave.
{2023-02-24}, {2023-03-21}, {2023-03-29}
You're welcome!
now what if your server and client are in the same repo... i still have a few bugs on my personal site but hopefully this tutorial will be helpful when i need to deploy it. even without being the same project, it should still deploy the same. just worried if my repo having both the server and client might be hard.
@@knightofcarrion7358 You should be able to set up both to auto deploy from GitHub based on the directory. Each hosting service may be different but Render and Vercel both make it easy to set up.
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
You never want to send your .env file(s) to GitHub.
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!!!
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.
@@DaveGrayTeachesCode Much appreciated. Worked like a charm!
Thanks a lot!!
Awesome job! Screw paid Heroku, this is free and much easier.
hi sir can i ask what is publish directory? im getting an error saying ` Publish directory src does not exist! `
Very good. Thanks.
Welcome!
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?
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. 💯
@@DaveGrayTeachesCode I completely understand. I will keep an eye out should anything change. I am looking forward to future videoa and material.
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?
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.
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
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.
@@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.
Amazing!!
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 ?
Sounds like two separate backends. Node.js and then another with Flask in a Python environment. They can all communicate as separate entities.
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?
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.
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?
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.
Amazing 😍😍
how did you diaplay the phone, look sso cool and realistic, i want that too
thank you, kind sir!
You're welcome!
Thank you!
You're welcome!
Thanks Dave
Welcome!
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.
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,
Even Render now asks for credit card details for Static Sites and Web Services. What would you recommend for MERN deployment now?
That is too bad, but if they still don't charge you for small projects, it is a good service.
Thanks a lot......
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 🇹🇿
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: ruclips.net/video/eQrbjvn_fSc/видео.html
please i need help,mine isn't logging in
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
thankiu alot my love
how about integrating swagger?
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.
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..
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.
The web service is just refusing to run w/o error, im using mySQL, tried everything possible on the internet...
is it compulsory to disable react devtools or without it it'll work fine?
It will work either way. I'd say it is a good idea for an app like this.
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 🙏
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.
@@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? 🙏
@@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?
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..
I'm currently facing the same issue, have you found a solution on this brother?
Can you try to make skin disease classification using CNN project .
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? 🙏
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.
@@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?
@@DaveGrayTeachesCode Dear Dave, it seems Safari is blocking cross-site cookies by default... Do you have a workaround for that by chance?
@@sebastiengautier3782 sounds like a CORS configuration issue. Check your CORS set up on the backend.
@@DaveGrayTeachesCode dear Dave, I have the same CORS config as you. Should I not use refresh tokens rotation to bypass safari privacy tech ?
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
I think you can because Render does support PostgreSQL: render.com/docs/databases
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??
did you find a solution?
Whitelist the ip addresses of your api in the mongo settings. Render will give you a list of ips it uses for your apps.
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
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.
where can i find access_token_secret and refresh_token-secret tell me
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.
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.
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
I don’t know how I missed it, but for anyone else having the same issue - turn on “Allow Cross-Website Tracking” for Chrome.
@@DaveGrayTeachesCode I am having a similar problem, I can only persist login on chrome desktop, but not on safari and chrome mobile. Any suggestions??
why is it asking me for a card?
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
Note the rewrite/redirect noted in the Render.com deployment. Look in the description if you have missed that setting.
@@DaveGrayTeachesCode Thanks it got solved
@@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?
@@buraksurumcuoglu8303 search about redirects/rewrites in render and copy that to your render
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
Did you see the note in the description about setting the Render.com redirects/rewrites? I'm guessing that is the issue.
@@shakirfarhan yes, do not send a .env file to Github. Instead, enter the environment variables in your host like Render.com
@@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
@@DaveGrayTeachesCode And the backend is connected with mongoDb.
@@shakirfarhan check your .env values. If they are not being inserted, try to find out why not.
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.....
Look at the Render.com section again and the note in the description about rewrite/redirect settings
Sir make document tracking system web based in MERN stack with source code
What theme you use??
Github theme - link in course resources. 🚀
what is next ? waiting ..........................