How to deploy MERN applications 🚨 (Heroku and Atlas)

what is up everyone and welcome back to another video in today's video we are going to be deploying a moonstack application to production so we are going to make it live on the internet so the services we are going to be using is for our front end and our backend deployment for the node application and the react application we are going to be using heroku it's a really nice platform and it has all of supports all of these languages okay and for our database we are going to be using mongodb atlas to deploy whatever we have in our database okay so this is the actual deployed application up here you can see it's https moon page nation heroku app and we are able to paginate between pages fetch things from the database it says loading and if you are interested in building this application we have here from scratch i have a video on that and i'll link that in the description so if you're not going to follow that you can go to this github link i will link this down in the description as well and then you can just clone it and start from there that is what we are going to be doing today so without further ado let's jump right into it okay so first things first let's get the application from github onto our computer so i just navigated in my terminal to my desktop and i'm gonna go to github now and here i'm in the repository link i'll set this link in the description as well and here we go to code we choose https and we just copy that link we go to our terminal here and you are going to need git installed i'm guessing you already have git installed so you're going to say git clone and then paste in that link and then enter and this will create on our desktop over here we can see that application so that is done so let's cd into that moon and then pagination and then open it in visual studio code with code dot or whatever text editor you are using so here we have our application so first things we're going to need to do is actually get the data which is in the utils folder over here we have the post json data which is like 500 posts we need to get this data onto our mongodb atlas cloud cluster so let's actually go and create that cluster now so now that we have the project on our computer let's navigate to our browser and let's go to mongodb atlas so you're going to need to create an account and then once you've created an account we can say new project i'm going to call this project moan pagination next and then just create project i don't have to fill in these things now i'll do it in just a second and here we have our project so we are able to build a cluster we're going to use the free tier on this side and here we just choose our cloud provider i always go with aws i don't really use these and then i'm going to choose ireland because that's nearest to me um just choose whatever which one has a star recommended regions and then yeah then you'll be fine from there we're going to give the cluster a name of moon pagination and then build or create cluster so this is going to take up to one one to three minutes so while this is happening we can go down here to database access and network access so first database access here we want to add a new database user so it's here where you create whoever has access to this cluster so we can just add lloyd123 and then you can either auto-generate a secure password and it gives you like this type of um generated password or you can just type in your own why did that happen or you can just type in your own i'm just going to make my password the same why does that keep on happening i'm just going to make my password the same as my username i wouldn't recommend doing this but for the demo purposes of this i'm just going to do that so and then we say add user and we can see here this user has read and write to the database access and it google actually warns you that that's not a really good password so don't use that password for production this is just i don't want to set up too hard things now okay and then we want to go to network access here under the ip address we want to add an ip address and once again you'll most probably add your actual server you're hosting your node application on um ipad is here but i'm just gonna allow from anywhere and then confirm okay so now we can go back to the cluster and we can wait for this to finish so once this is finished we will continue okay so this took about let's say two minutes to complete and the next thing we need to do now is connect to this database so here we click on the connect tab and then we go to connect our application you can choose your programming language i'm guessing you're using node and we you want to set this version to 3.6 or later then we copy the string so you can see in the string it is a connection string to our database and here we have to add the password we created so i hope you remember that password anyway so let's copy this now and then go back to visual studio code and in here we want to [Music] once again create our config.env because inside of our server.js we can see it's looking for this config dot env so let's quickly do that in the root directory we're just going to say config.env and here we have to add a few things because we downloaded this from github and it did not push the config.env of the previous project so we have to add it manually here so first things let's add our port and set our port equal to port 5000 let's add our mongodb underscore uri equal to whatever we just copied from mongodb and let's change the password part here to whatever our password is like this and then the next thing we're going to need here is um the node underscore environment so our nerd underscore environment at first let's just set it at development like this and save and let's go back here so let's actually quickly first install everything so in visual studio i'm using the integrated term terminal here i'm just going to run in the root directory npm install we only have to quickly do the install for the the root directory we don't have to cd into the client and run npm installed there and the reason for this is because we're going to need to use this import script over here to quickly import our data and this import script needs access to connect db and connectdb in exchange needs access to mongoose so yeah anyway just run the npm install and here we're going to need to do the following in our package start in our script if we go to our script folder under utils import data we can see we have the following script we need to run we need to run this folder and then with the flag of import so it's going to use our cloud cloud mongodb database due to the fact that under the uri we have this cloud one over here so let's quickly test that out and we're going to say node and then we're going to navigate into the utils folder and choose the import data.js file which is this one right over here and then space and then dash dash import like this so let's test it out hopefully nothing goes wrong let's run it should say connected to database awesome the connection was successful and then hopefully it says data imported awesome data successfully imported okay and the emojis just make it so much better okay so if we go back to our mongodb atlas cluster and we click on collections we should see our data now that i think about it i actually forgot to add the database name so we can quickly do that here if you remember to do the database name good for you um one step ahead of me still working please wait oh okay here it is so here i can see i did not add the database name so it just added db name from the connection string in our config.env i never added the database name over here so what i'm going to do so i'm going to remove that and say moon dash page nation and save this close up the config folder then i'm just going to delete this i have to copy this name and then paste it in here and drop this database and then i'm just going to re-import it quickly so you actually get two tries now i'm just gonna up arrow key and run this script again okay great that's good let's see let's see it should work it worked the first time okay great it worked okay so let's go back here and refresh now we should have a database name moon pagination and all 500 posts over here we can see the total amount of documents is 500. okay great stuff so our date our data is imported and our database is set up on the cloud so now we have to go to heroku so once again on this platform you're going to have to sign up and create an account as well and then you're going to have to install the heroku cli so i'm just going to google this heroku cli and you can click on the first one or you can actually if you have gripper the gripper extension you'll see it up here i'll just click on the first link and this will take us to this page so how can we download the heroku cli so here is the steps i'll link this in the description as well if you're on mac you can and you have homebrew installed you can just use the script here if you're on windows just choose your operating system type and then just download it from here and for ubuntu and then it has a few things here i'm sure you guys can figure this out this is really um just install and going through the the wizard once that is complete and you have set up your heroku account which also is fairly easy we can now go back to our application over here and we're going to need to run the following command first off we're going to say heroku and login and this is going to ask us to press any button and you're only able to use heroku if you actually install the heroku cli so here i'm just going to press enter or space and this should open a browser that asks me to log in as i'm already logged in it's just going to say you are already logged in and then you can close this i'm going to go back to my application and it says here logging in done and i'm logged in into the account i used for my heroku so that's great the next thing we need to do is really easy we're just going to say heroku create and then we can specify an application name or we can just press enter and it will create a random name for but the thing about this name is it should be something that hasn't that does not exist yet so i'm just going to press enter and it's going to generate a heroku application with this weird weird name over here so it auto-generated the name so if i were to click on this link now control click and open this is going to take me to my heroku application and if i go back to my heroku account and refresh over here we should see a new we should see this application being listed down there okay so here we can see that application is on heroku at the moment so the next thing we need to do here is add our config file so heroku is going to need access to these properties over here but we are not going to push our dot config dot in our config.env file because this is only mainly used in development so what we are going to need to do now is go to heroku and then click on the application you just created and then go to settings and then under settings we can see config variables so that's exactly what we have in that file so here we just reveal our config variables and here we can enter the key and the value same as here which is the key and the value so let's start with the port we can say port and set port to 5000 and add we can now copy uri and paste the uri in here as well as the string you can copy the string make sure you copy everything correctly and then we can paste that in here add and create our node environment and paste that in here and now it's important here our node environment is development because we are in development here but we want to set our node environment on our server to production so here we're going to say production just like that and add so now heroku has created basically a config file for our application on heroku on the server so once that is done we can just go back to overview and we can check a few things here so once we create ran that heroku create command heroku created a remote repository for us so if we type in in our terminal git remote we can see the following two things the origin is from where we actually downloaded or cloned this repository and heroku over here is um referring to the repository we created when we ran heroku create okay so the next thing we need to do is actually prepare our application for deployment so let's do that next now so we're going to have to do a thing a few things in our react i'm going to show you a few things in the react side and a few things in the node side so let's do that next so in order for me to show you exactly what needs to happen i actually changed my mind so i'm going to actually cd into the client folder and here i am going to run npm install just so that i can show you exactly everything that's happening and why we are doing the certain things okay so once that is done i think this is going to take a little while so let's go into our server.js here i'm going to add something critical okay we're going to have to check what node environment we are currently in if we are in development we want something to happen on the node server if we are on production we want to serve our react build folder through our node.js server so i hope that makes sense but i'll show you exactly what i mean by that now so i'm going to keep this to development for now and inside of my server okay so this is done now and inside of my server i'm going to do the following if check i'm going to say if my process dot env dot node underscore environment is equal to production just like this if that is the case i want to run a app.use piece of middleware and this piece of middleware is going to do the following thing we are going to say here express dot static so we want to give our server access to our react application so we're going to say express.static and here we're going to need the path module from node so right at the top here i'm going to const path equals require the path module i'm just going to close this down and here i want to say path dot join so i want to serve a static file or folder from the path i'm going to specify here so i'm going to say underscore underscore do name and then comma and then here i'm going to say the client so we want to go into the client folder because that is where our react application lies so we're going to say slash client and then slash build so you might ask me now what is this build i'm talking about here well if i scroll this up here and go into my client folder and the node.js of the package.json folder here we can see under scripts there is a build script so i'm quickly going to run this script and show you what it does so i'm going to say npm run build so this will just give us a production compressed version minified version of our react application that is easy to deploy so in this build folder it just created up here we're going to have a few things so the build is complete great stuff so in here we can see we have a static folder that has all of our css minified css and all of our js script and everything in here and then we have our index.html which is just this unreadable minified version of our application so we want to serve this build folder so that is why we going to app.use express static which just means we give our express application access to this path so we want to serve the underscore underscore name then go to client and then the build folder so this is a piece of metal where we want to run the next piece of metal where we want to let happen is the app.get so whenever we reach a get route on our application we want to do the following so we have our normal request and response and we now want to res dot send file so we want to send inside of this build folder the main intro to our application is this index.html so we want to send whenever we hit a get route on our server so this means any any route we want to serve that index.html so once again path dot join and here we want to do the following underscore underscore dirt name we want to get the client folder and then we want to get the bold folder and then inside of the bold folder we want the index.html file so with this we can this is going to serve our react app to our server and in the else part we can just add app.get and then the slash we don't even need to do this actually but i'm just going to do that to show you the difference so here are the requests and response and then res dot send api running and save this so this is the important part here we have to do this in order for our heroku server to serve our react app so if we save this now and actually open up two terminals the first terminal on here i'm going to cd into client just like keeping client on this side and here i'm going to go back to the server and i'm going to run both of these things so let's quickly test that out and then i'm going to show you i'm just going to remove this bold let's just keep the build there for now and here in this folder i'm going to say npm start which is going to use the script in here mdm start and it's going to serve nodemon okay let's run that see if it works server is running on port 5000 and connect it to our mongodb atlas cluster and in here i just want to say npm start and run it from here and now we should see something very interesting so this is where i'm going to show you the two different things if i actually go and open a new tab here this is our react app being served so you can see this react icon shows here it's red and if i click on this this page is using development build of react so this is just serving from the non minified build folder so i want to go here to local host 5000 and run and we can see here api is running so this is this part that we created here so once i go into my config folder and change this to production we can see something else happening now so i'm going to stop my react folder over here i'm going to close it up here so if i refresh it's just going to keep on loading because there's nothing there and this is still running so now i'm going to change this to production and save this i'm going to restart my server and now we're going to see something interesting when i go to localhost 5000. so here i'm on localhost 5000 and i'm going to refresh and ta-da i see my react application so now it is actually serving the production build of our react app so if i view here and i click on this we can see this page is using the production build of react so i really hope you understand what i did here so now basically all we have to do is set up a few scripts so when we deploy to heroku it will do all of these things of creating a build folder and then serving that bold folder from here so let's do that next so now that we have set up our application so that it works um perfectly fine let's do the last part of create or serving this to heroku okay so first things first that i want to do here is just close this up i'm going to go into the client and i'm going to remove this bold folder because we're going to create a script that will do that for us so inside of our root directory we need to add a very important file for heroku this file will tell heroku what to do so first thing we're going to say this file is just called proc file just like this and you can see a little heroku icon showing it doesn't have any extension just like that and in here all we're going to say is web and then colon and this tells heroku we're using a web server and you can read on the documentation there are different things you can prefix here and then we want to tell heroku what to run so we're going to say node server.js because this is where our server starts running and service our react app and all those nice things so we want to add our basically our start script and we can save this and close this up and the next thing we need to do is actually i'm just going to close this here oh i want to close i'm going to remove that one and let's go to our just root directory here and inside of our package.json i'm going to have to add a script so this script i'm going to add here is called heroku post build so it's it's important that you name it this because heroku looks for this and it would run a few things for you and what do we want it to run well we want it to go into the client and then call this script to build the application and then the rest of our application should work so let's quickly do that here we say npm underscore config underscore production and we're going to set this to false and the reason we set this to false is because if this is not set to false and it's set to true then we can't run any scripts while this is already in production so we first set it to false and then later it would be set to true so the next part of the script we have to add is the following we want to say npm install and then dash dash prefix that with the client so we can say client folder so we want to prefix the client folder because now we want our server to first go and install all the node modules and everything because in our git ignore we don't push the node modules to the server and the next script we want to run is npm run build and also prefix this with the client folder and if we save this now this should do the trick i believe this is everything so the last thing we need to do is go into our root directory here and say git add so we want to add all of this to our repository because our repository is also connected to heroku now and then we want to commit everything so we can say gitkumet m and then final deployment prep or some cool message i'm not really creative with these messages and then commit all of this and the last thing we need to do if we type in git remote i think i showed you this we have a heroku remote repository so all we need to do now is say git push heroku and then master whatever your branch name is you want to push so we want to push the master branch and let's see if this all works so [Music] doing this type of things it is possible to run into errors but we'll solve that as we go so now it's going to push our entire application to heroku and it's going to build and install all of the node dependencies and then it's going to run this um config script we run here so it's going to install our react application it's going to run the build script and then we should be able to see it on heroku so once this is done this is going to take a little while but once this is done i'll get back to you okay so here we can see it logged bold succeeded and now it's just compressing and it should be done any second now we can see that the entire project is 64 megabytes in size and verifying deployment is done awesome so this is great so let's close up this react app and we can actually try and refresh this application now i'm going to show you if you don't have this open i'm going to close all of this up and then in here when you navigate to your heroku dashboard and go into that specific application and then say open app um and here we have an error so let's quickly check this out what does it console that log resource not found okay so let's figure this out quickly okay so here it says that we are getting a 404 error so that means that the react app is not um being recognized and it's not serving correctly so let's go back to our application here and i checked everything here is correct and then i realized inside of my package.json this script i forgot to place double um i think it's called ampersand double ampersand here for and so it was only installing and then never creating the build folder and i think that is the reason so just add this here and save let's have we have to go through that entire process again of git add and then adding it git commit with a message and saying um fixing deployment bug and then committing that and here we're going to say get push heroku master so this is the thing about doing these little devops type of work is you run into these bugs but you just have to keep on trying to debug them and i think i'm gonna leave these errors in the video so that you can just see these kind of things happen and let's actually hope this solves our problem so once this build and deploy is complete i will be back to you again okay so let's cross our fingers and hope this works i'm gonna go and refresh this page and it's working yes it's working okay great stuff i'm so excited right now and yeah so we actually left the deployed application on serving only four things here so you can go and fix that or we can actually fix this together now that we know exactly what went wrong let's just check our console that there's no errors no errors this is great okay so let's quickly fix that um inside of our controllers post controllers let's just change this to 20 and save this and once again we're gonna have to go through that entire process git add git commit dash m and then fixing return results and then get push heroku master and then we're gonna do that entire process again and then i'll be back to you once this is done okay so here you can see everything looks fine no errors build succeeded yep so we are basically done um i really just hope you understood what i what i tried to explain during this video i know i made a few errors here and there but that is the process of deploying it's not always perfect and we just have to redo and try and redo and try the whole time so let's refresh this it should only return 20 on a page and it should give us 25 pages booyah okay so now we have our application live on the internet and everything seems to be working perfectly fine so if you enjoyed this video please smash the like button don't forget to like and subscribe leave a comment down below if you are interested in seeing these type of devops things i do apologize for the mistakes if you got a little bit irritated about it but this is what happens and i like leaving it in the video just being transparent um in everything that happens and if you want to see different uh hosting providers like leno digitalocean or all those type of things i would love to make videos on that for you guys but um smash that like button if you like this video and then i'll see you guys in the next one cheers

Channel: The Full Stack Junkie

Views: 12,802

Keywords: devops, mern stack deployment, reactjs deployment, nodejs deployment, mern production, nodejs and heroku, mern stack and heroku, mern project tutorial, deploying mern stack to heroku, indepth deployment to herkou mern stack

Id: 2AIL1c-cJM0

Length: 32min 32sec (1952 seconds)

Published: Sat Jan 30 2021

Reddit Comments

[u/jayabq]

Used this video today to help me with my first deployment. Helped me understand a few key concepts. Thanks!