Deploying MERN Stack App to Render - MERN Stack Chat App with Socket.IO #17 ( UPDATED )

so this is just a quick video for my morning stack playlist series to demonstrate how you can deploy them by using render because in those playlists I have deployed those apps using Heroku and Heroku no longer provides the free service to deploy these apps also if you're new to these month stack playlists I would highly recommend it before following this playlist please make sure that you are using all of the same versions of the dependency that I'm using over here in my package.json file for backend as well as for front end as well so first thing that I'm going to do is I'm going to go to backend and server.js and over here right below our routes I'm gonna import a variable called dur name and since their name is already registered if I'm not wrong in the node so I'm gonna name it their name one so what is this variable so this variable signifies the current working directory so I'm just gonna first do this deployment so that I can keep the deployment code separate from the rest of the code all right so this will take path Dot resolve and this path module comes from node.js path just like that now since we are preparing our app for the production we're gonna use a DOT EnV variable called node EnV and we're going to set it to the production mode so let me first Define that variable so I'm gonna name it node e and V and I'm gonna name it production so if we want to keep it in the development mode we can name it development but I'm gonna name it production for now since I'm preparing it for the production so I'm gonna check if process dot EnV dot node EnV is equals to production then we're gonna write our production code inside of it else let's just do this app dot get slash API running successfully all right now inside of it I'm gonna say app dot use Express dot static don't worry I'm gonna tell you everything let me write it out real quick and then I'm gonna tell you what's going on over here past or join and I'm going to take their name and I'm gonna join it with the build folder of our project so front end slash build so what I'm doing over here is I'm establishing the path from the current working directory to the build folder of our front end so if you don't know what build folder is so if you go to inside our front end if you want to build our react project we can go to the terminal and switch to front end and say npm run build this will start a production grade build of our app now meanwhile it's building what I'm going to do over here is I'm going to write a API call so app Dot get and I'm gonna get the content inside of the index.html of our front-end build folder so let me just write it out real quick so I'm gonna say strix for everything request comma response and inside of it I'm going to say response dot send file so I want to send this file to our front and when our app is successfully running what we want to do is we want to run that index.html file which will be inside of our build folder so let's wait for this build command to get completed then I'll show you what we're gonna do you can see that it has started creating an optimized production build 2 000 years later okay so finally our build has completed now if you go inside of the build folder you're gonna see there's a file called index.html which contains the minified code for our app so what we're going to do over here is path dot resolve from the current directory their name one two we're gonna go inside the front end and insert the build folder and then we will have the index dot HTML file so yeah that's all that we needed to do and now our app is ready to be hosted but let's before that let me show you how this app is gonna work so if I go on and inside of our package.json I have this script for starting our server so if I type npm start now you're going to notice oops not in the front end I mean let's go to the back end and now let's start it now since our app is in the production mode instead of showing us API is running it should show us the index.js file it should serve as the index.js file so let's wait for it to start all right let's go to the browser and run localhost 5000 okay it still shows API is running successfully let me see what went wrong instead of running with a node one I'll just try to run with just node so backend slash server Js okay let's see all right awesome in the localhost 5000r app is running successfully let me try to log in great our app has logged in successfully as well all right so now let's go on and deploy our app to render so first of all I'm gonna go to package.json and I'm gonna add a build script over here so don't worry I'm gonna explain you what's going on inside of it so this build script what it does is basically installs all of our dependency first of all we're doing npm installed in our route so it installs all of the dependency of our backend and then we're gonna go and install npm install in our front-end folder right so it's gonna go on and install all the dependency in our front-end folder and after that you can see over here it's doing npm run build as I just showed you a few minutes ago that we need to build the front end right so this is gonna do that for us automatically so it's gonna go inside of the front-end folder and do npm run build awesome and that is all we need to do but there's one thing that I want to tell you if you are using an old project just like what I am over here this project is almost two years old right so while deploying this project stuff to make sure all the dependencies that have became Legacy over here and you know are no longer supported with the current node version I have to add a tag over here most of you don't need to add this because it's gonna work with the latest projects but for the older project for what you need to do is after this npm install you have to add Dash Dash Legacy peer dependencies or I think it's depths Legacy peer depths and you have to add the same thing for front-end as well right over here cool so that's done now we're gonna go inside our front-end folder as well and over here to make sure all of these front-end dependencies who have gotten out of date or old we're gonna add a tag over here as well which is going to be dash dash open SSL Legacy cell Dash Legacy Dash provider same thing you have to do for this build command as well so that all of these react scripts are supported with the older version of these dependencies like react Lottie and all of the other like chakra UI as well so after doing all of this you can quickly go on and push your app to a GitHub repository for me this is my GitHub repository that I've post all of my code into fine so now what I'm gonna do I'm gonna go to render.com and this is the place where we will be hosting our app so let's quickly go on and sign in I'm gonna sign in with GitHub there you go we are logged in successfully and as you can see we I have deployed a couple of projects before here as well so now we have to click this new button and click on web service now this is what you have to do for mind stack apps now over here you can quickly select your repository so I'm going to select my mind chat app repository so connect now you can give a unique name to this I'm gonna give it to region you don't have to change anything there Branch Let It Be root directory we don't have to change runtime obviously our runtime is not since we are using JavaScript build command our build command was npm run build if you remember correctly so I'm gonna say npm run build we just added a build command there right now start command should be uh so we have added a start command in our app so if you see a start command is node backend slash server.js so I'm gonna quickly say npm start or you could have just added this line as well over here cool so yep we are supposed to use the free plan for this one let's go into Advance okay here we're supposed to add our environment variables so I'm gonna quickly go to our DOT EnV file and I'm gonna add all of these variables over here first of all the port which is 5000 then our URI let me just add this real quick and I'll be back and that's it I've added all of our variables over here now there's one more important thing that is left to do as I mentioned if you are using your old project to deploy it over here so you're supposed to do these add these tags over here right but if you're not adding these tags that completely fine this next step is not for you but if you are adding these tags over here then what you have to do you have to check your current node version so node Dash V so it's 18.16.1 for me and I have to copy this and then I'm going to go over here and add a new value over here with node underscore version this will make sure that this project is compatible with your current node version and again I'm mentioning this most of the times you won't need to do this for the newer projects you won't need to add these Legacy peer depths tag over here and over here in the front end as well so yeah I think most of the work is done and we don't need to do anything over here Auto deploy yes we want it to deploy every time we make changes to our GitHub repository and now we can just quickly go here and click create web service and it's going to start the deployment for our app and yep you see it's cloning our GitHub repository over here okay fine it has run this build command as well over here let's see what happens and here you see it has started creating an optimized production build all right and this might take a little time to you know deploy so let's wait three days later and there we go it shows that build is successful but still it's showing deploying okay let's wait for a little bit let's just try to click on this link and see if our website is live or not okay it's loading okay yeah now it will do that npm start command to start our server by using node backend slash server.js all right and yep your service is live amazing let's go oh that's great our website looks beautiful let's click on get user credentials and login and we are in amazing so this is how you go on and deploy a merge stack app by using render now if you're coming from my older videos that is mind stack videos I have created a complete interview preparation series on my channel so you can click these cards on the screen to follow it and don't forget to subscribe to channel for more such awesome videos

Channel: RoadsideCoder

Views: 18,759

Keywords: mern chat app, chat app react, mern heroku, Deploy mern app to render, deploy react node app to render, render app deployment, procfile heroku, Heroku app deployment, MERN Stack app deployment, Hosting mern stack app on render, mern stack project, Hosting react js app, render full stack apps, notes taking app project, deployment heroku, render deployment using github, render deployment react app, heroku tutorial

Id: aQ_2DMXSNwY

Length: 11min 49sec (709 seconds)

Published: Sun Aug 06 2023