Deploy and Host a Fullstack MERN Application Tutorial In Heroku and Netlify

hey guys how's it going i'm back here with another video and today i'm going to be teaching you guys finally how to deploy and host a full stack application uh which is built upon with mirn which is like a stack that involves react for the front end and node.js for the backend and also mongodb for the database so i'm going to basically be teaching you guys how to deploy everything for free so that anyone who wants to can access this project and you can see this is the project i'm going to be deploying it's a project that i built on on a series that i just finished and yeah i'm gonna be teaching you guys that so basically we're gonna be deploying our front end on netlify which is a really good service it's free again and our backend on heroku and our database will be fully hosted on mongodb atlas which is a really good service as well for hosting our database so you can see right here we have this application it is working i'm currently running the server on our local computer and the like client on our local computer as well but we're going to start working first with deploying to heroku which is extremely easy i have i have a video on this but i'm going to basically be going over everything you need to do so the first thing that you need to do is i'm going to close everything related to my client i'm just going to come here to my server folder and i'm going to install in my server side so basically as you can see i have two folders one for server and one for client i'm going to close my server from running over here you can see i'm inside of my server i'm going to install uh dot env which is a lot the library that we can use to basically create environment variables so i wrote yarnad.nmv but you can use npm if you're using as well so the next thing we need to do is we need to require a dot env and say dot config this will basically allow us to have all the functionalities that dot env allow us to have and it is really great because as you can see why do we need that basically if you come here to the bottom in our on our express server we are listening over here to a port 3001 but obviously if we're running on a real server this isn't where we're going to be listening to obviously there might be other like we don't know which part it's going to be so what we do is heroku automatically when you create a server an application there it creates a env variable which is called port and we can use that to basically call it over here so now that we installed the env package we can just say process dot env dot port and currently this is nothing because we haven't connected to heroku but when we connect heroku will automatically set a variable called parts equal to the port of our application and also if we want to run in our like local machine we can also put uh or 3001 meaning that it can run on both ways and that's great right so now that we have everything installed we can start working with heroku so i'm going to come here and i'm going to open heroku.com and you need to create an app an account and whatever you're going to see all this like this this won't appear to you these are all the projects that i previously had with heroku but basically when you create your account it's free you can come here and click on new create new app and you can put a name for the app so basically i'm going to call mine mern beginners i don't know if that's available i don't think so yeah it is actually so my this will be part of your url so basically not your like frontend url your api url so it's going to be something like learnbeginners.heroku app.com like i would recommend putting something related to your website so mine i just called it this but it doesn't really matter then you can choose the region i'm choosing us because i'm on the west side of the world but if you're in the east side probably choose europe whatever is closer to you it's where your server is going to be hosted then you can click on create app and it's going to prompt a bunch of stuff but initially the only thing that are important are this over here it's the basically the installation guide for heroku now let's come here to our application and make sure you are inside of the server folder because the only thing we want to deploy to heroku is our server folder so you can see i'm inside of it i'm going to come here and i'm going to say heroku login and this is great because it's going to allow us to log into heroku then it's going to appear press any key to open up in the browser you can press whatever i'm going to press f and over here it's going to open a link and we can just click on login that's perfect you can see that now we have logged into heroku in our application you can see my email over here meaning that it was successful then we're going to follow this instructions right here ignore this first one just just write git init so let me write here git init then copy this right here heroku git remote uh basically it's setting a remote to to the their repository so you're sending a repository to the one that heroku created then we're gonna follow up with the basic like classic git add git commit and get push however it's a bit different for heroku so let's say git add dots meaning we're adding everything then instead of being git commit negative m it's going to be negative am and you can put the message here i'm going to say first commit something like that whatever it's going to make the commit then finally we have to say git push heroku master this is the message like this is the command you gotta put git push heroku master i'm gonna press enter and it's gonna start deploying to heroku uh obviously there might be some errors i don't even know if mine is going to be fully like functional i always have errors when i try to deploy to rocco for the first time but i quickly fix it they have a great interface for like reading the logs understanding if any errors occur and it's really great so when it's finished building um let's see it's probably finishing right now when finished building you can click on open app and it will open to your application currently there shouldn't be anything because we're still deploying actually we already finished deploying so it should our api should appear over here and it doesn't it says application error so this is great because this is what usually happens so we get we can check to see why it's giving us errors so i'm going to open up here actually i won't open yeah that's okay i'm going to open up your new terminal to my right and i'm going to write heroku logs to hyphens and tail this will basically log everything related to the error and we can clearly see what happens so let me take a look it started and then it crashed but why did it crash well let me see its process um let me see okay it crashed code h10 it's usually the one which always crashes um robots.txt i don't know what that means okay i'm gonna basically just check this and i'll come back when i fix the error okay guys i'm back and quickly i found what was my error and i love that that this happened because i know a lot of you guys will get an error when you try to deploy for the first time so it's great that you're not seeing me just getting everything right at first because they'll be able to follow along with me and understand what mistakes we make so basically one common mistake for when this happens is that you didn't put the process to en v.port but we did so right next what i checked was my package.json and that was the mistake we didn't have a script tag so basically what you need to do is you need to write here uh go to your package.json and write scripts and instead of it as an object which has a start and right here you put node and the name of your main file so my main file where we have like the express server where we say app.listen is index.js so i can just say node index.js and now it is perfectly running as you can see right here it is running because it doesn't decide it doesn't say application error and it says the like the basic uh how can i say the basic message when you have an api that is working however obviously we need to work with a mongodb right we have a mongodb database but as you can see right here it is running locally so how do we actually make it run um in a way so that it is not local so it is hosted on the cloud and we can access it whenever we want because as you can see if we try to reach the slash read route it should return us all the data from our database it should return this right here but if we try right now i guess it will basically just break our system let me say slash read um it's gonna keep like trying and trying if we go to network let me try to see what appears it's gonna try to make a request right um our console log yeah basically it's going to break our system so because we don't have we're trying to read from a local database as you can see right here it's not working so how do we actually fix this how are we going to deploy our mongodb database well we're going to be using atlas so i'm going to come here and say atlas it is a mongodb atlas right here it is a great system i have i'm going to put the link in the description it is hosted by mongodb and i already made a video explaining this but i'm going to explain it again for those who didn't see that so basically we're going to create an instance of our database in the cloud basically what we need to do is we got to come here to this is not what you're going to be seeing initially i'm going to try to go to where initially we arrived so it's basically this and you can click on new project and put a name of a project i'm going to call this mirn beginner and you click on next then it basically asks a bunch of stuff you don't need to care about this just press create project it's going to create a project for you and basically this is where we're going to add all the functionalities and aspects and we're going to be able to create our cluster so to build a cluster you can click on this and i would recommend choosing the free version because this is a free tutorial and over here you can choose your cloud provider obviously i recommend aws google cloud is also a really really good option i like aws and you can choose uh like where you want to host i am more i'm closer to uh north region virginia where in the us but basically you can choose where whichever uh cloud like whichever one is closer to you then basically all of them are free i think but just choose the one you your that is recommended right so then you can come here you can also change the name of your cluster you can call this mirn and you can click on create cluster and you can see our cluster is being created which is awesome but before like while it's being created it can take up to one to three minutes as you can see but we're gonna be working with a little bit more stuff for example you can come here to database access and you need to add a new database user so basically what this is is you're going to be able to add a password and it's a way to like add a password and authenticate that password you know and also add a name of a user which is like both of this information you really need because you're this is how you're going to recognize if you're like correctly connecting to your database so the user i'm going to use is something like pedro tech and the password i don't care if you guys see this because it doesn't really doesn't matter you need to be authenticated with your ip address to access this and also this database doesn't matter so i'm just gonna put a random password like password one two three this is my password and now i can click on add user and password is too weak okay so we can't use a weak password um did it actually create my user let me see i don't know if it actually created i'm gonna try to add another one so i'm gonna try again pedro tech and add a better password so password hashtag one wait i'm gonna show you guys so show password one two three pedro this is my password so password one two three one two three pedro okay what happened so it's not it's not allowing me but i'll come back when i figure it out okay guys i just added my user uh for some reason i was clicking on the outside that was the reason why it was kind of closing but just just write your password my one is pedro it's password one two three and pedro and my username is pedro tech then you got to go to network access and you need to add your ip address so what does this mean is basically it's going to white list your ip address to basically be so that you're able to access and make changes to this cluster so that's great because that's why you don't like you can't um you can't it doesn't matter if you know that my password and as you can see i clicked on add my current ip address and it's going to automatically add the one that you currently have it's starting to like include that so it's great so we can come here to clusters and it's still being created so i'll basically come back when it finishes creating because we basically can't do anything while it's creating okay guys as you can see my cluster was finished like it finished creating which is great because now we can connect it to our mongodb compass so yeah if i open up your mongodb compass which i showed you guys how to like you can download it's basically a way to see your database and i used it in my tutorial series building this project but basically uh this is if we want to we need to connect it here to create our how do i say this our collections right because we want to access those collections so how do i do that well we can come here to our cluster and click on connect then it's going to appear a bunch of methods you click on connect using mongodb compass because they already know that this is like a way that like this is a common way to connecting then you click on copy and you can come here and on your new connection part you can just paste the link that it copied and then you can basically change some stuff including the password here which is actually the only thing we need to change because the other stuff already like is already changed right so instead of password here i'm going to write my password which is password password one two three and basically you can see that now our information here is all correct it is currently working and we're going to copy this string because it is it is something that we need to keep track of because we're going to be using that as well when we basically use that in our application so i'm going to copy this and i'm going to click on connect you can see it opened up and connected and you can see that our like our collections appear here this is a new connection you can create databases as you want and this is the one this is the database hosted in the cloud which we're going to be using so let's create a database and the database is going to be i want to use the same name as i used in my application but if you previously had an application an application where you had a local database you grab the name that you used so i used the name tutorial merge i'm going to use the same name to create a new database and also you need to put a collection because we're creating a collection let me remember which was my collection i'm going to come here the collection i created was called friends if you're finding this weird is because this is all like related to another series i had but basically the collection name is friends the database name is tutorial merc you can click on create database and you can see the collection appeared and that's great there's obviously no data here if you want to use the data that you previously had in your application you can migrate the data to this database you can just download a json object and pass it here but i'm not going to do that i'm going to just treat this as a new application with a new database so you can see now we have our like our connection everything is working we can like work with this application but how do we actually connect to the new database well we can come here to our index.js and this was the link i previously had to connect to my local database so i'm just going to delete this and so basically we don't want to put that link we kind of come here to our cluster right click on connect and we're gonna click on connect application i forgot to do this but basically we can choose whichever driver we want we're using node.js so we can leave it that way so we can click on copy can come here and again we're gonna just replace this it's just a larger version of what we wrote but basically it is more like suitable so we can write here my password which is password one two three pedro and over here is the name of the database as i mentioned before which is tutorial mir and this we can leave it as it is and that's fine so let's deploy it again to your git commit negative am whatever i'm going to put a message git commit and then git push heroku master then we're going to start deploying it to heroku and again and now it should be working because basically we made the correct connection to our application so i'm going to come back when it finishes deploying and yeah actually guys i thought that basically just to test to see if everything is working i'm going to import the data that i had previously in the other database and show you guys how to do that so basically i'm going to come here i'm going to disconnect from the current connection that i have and by the way i can favorite this so basically i can just come here and say add to favorites and now i can access this whenever i want so i'm going to access my local application my local database and you can see i have the old database that i had here tutorial merge you can click on this and i can click on my old like collection and i can export this to basically grab this data and migrate it to another place you know so basically it's um i'm going to to migrate it to my to the other database so how do we actually do this well we can say export uh wait export uh collection and export full collection then we can get everything here and we can just say select output it's gonna be a json we can like choose where wherever we wanna save it i'm gonna save it on my desktop and say like db migration and now everything that we have here should be exported so you can see it exported three things and you can see like show file you can see that this is the show file this is the file containing everything related to oh no it opened my xcode wait i'm going to quit this but basically this is the file that we want right so now we can come here and go back to our other database so this is basically how you migrate from a database to another you can come here we're going to go to the to the cloud database click on connect we loaded everything we go to tutorial marine again to friends and now inside of here we can just grab this file and put it inside of here actually you can't drag and drop but we can import data which is a json and just select the file that we want so um which one do here it be migration and now we can just say import and you can see that the data from that database is now on this one which is great it is the same users that we had as you can see right here and what does that mean well it means that now our database should be working for example in this route here uh app.get slash read it should if we try to access this it should render the whole database everything inside of it so let's check to see if it is actually working so let's come here and try to reach the slash read and it should load or it should break let's see what happens okay guys so i'm back again and i fix everything and i i'm gonna show you guys what was the problem basically uh when we went to network access i told you guys to just white list your your your ip but that was actually wrong information you need to white list everything so you can click there's going to be an app an option which is going to say white list everywhere and you can just click on that or just put this right here which means that anyone will be able to like any ip will be able to access this cluster obviously it is not insecure uh it is advisable though that when you host your application not in heroku on like a like for example an aws server or like you know where your your host in your application you have your own server then you do it that way however there's a bunch of security play in place to not allow other people to access this so just put 0 0 0 0 and that should work and when you deploy your application like we finished deploying everything it is you can see right here um our server as you can see our database over here includes this three properties and as you remember we have a route which says it's a read which means we can just uh basically go to slash read and it should display the data from the database so as you can see yes we have a public api which is displaying data from a public database a database that is hosted in the cloud which means that it is working everything is working which is perfect because this is exactly what we needed so now that we have this done our api is working what do we need to do well we need to host our stuff on netlify so how do we actually do that well we need to come to github so i'm going to write here github.com and we need to deploy our front end right we need to deploy our front end to our application we need to deploy we need to create a repository for our front end so i'm going to click here on new repository i'm going to say mern beginner client something like this whatever you want to write and i'm going to make it public so i'm going to click create repository and it's going to create the repository for me now i can come here to my application i can close this can come here to my client and we're going to have basically our our client it is what we actually want to deploy right so i'm going to for now close my server stuff because our api is working on heroku this is the only terminal i want to have which is the front-end terminal i'm going to stop the server from running and you can see i'm inside of the client folder i'm just going to write git init then get actually i'll just copy this i'm going to click on i'm going to copy everything here and i'm going to paste it over here so you guys can see that it's gonna start pushing way what happened um i failed to push some refs did i forget to add stuff let me let me try this again so i'm gonna copy this i'm gonna paste it over here so now actually i had to put a git push this command over here and it's starting to push everything if we refresh here our repository you can see that everything related to our front end is over here which means it is working and our front end has been deployed which is great because this is exactly what we want so we now need to go to netlify so netlify it is a really good platform you can sign up if you don't have an account it is free i'm just going to log in with my like normal account and we can create a new website directly from here so what i like to do is i just say new site from git and i'm choose the basically the the option for continuous deployment which is basically we're going to connect to our github account a github repository and whenever we make any changes to that repository it's going to automatically create a new build version of our netlify website and it's going to restart and apply all the changes which is great but before we actually do that we're going to make sure that we're actually connecting to the correct api in our front-end so i'm going to open up here you can see we have our client remember that in this project we make several api requests but we were previously making those requests to the localhost 2001 but now we have a deployable like we have a we deployed our application to uh basically um as you can see right here server and we can just copy this url and replace the local host for this so i'm going to replace this over here and i can replace this over here as well if you don't want your api to be visible the link you can create env variables which is environment variables so let me just replace everything here and this as well so these are the only ones we need and yeah that's perfect so now we can just deploy this again so i'm going to come here and say git add dot get commit negative m added api link then git push and it's going to push everything so now that everything is pushed we actually need to create a build version of our application so if you've never deployed anything before and you look like tutorials you probably saw that there you run something like yarn run build which basically is a command that will create a build version of your application which is actually where like what netlify will look for in your application you can see it's a folder called build and if you're using npm you can just write npm run build and it's creating an optimized production build this is the actual version of our project that we're going to be seeing now that everything is done we can actually i forgot i i'll just deploy again to my to my github repository so edited build version you could have done both of them and just pushed everything together um what did i say your branch is up to date apparently it's up to date okay that's fine then so now that we have this done we can come here to our netlify we can start continually deploying with connecting with our github account so if you click on here on github it was auto authorized if you haven't worked with an lfi in your github account before it would appear so that you can log in with your github account we can click on all of our different like we can choose the repository that we want to use mine is mern beginner client so let's find mern beginner client is this one right here i can click on this it's going to ask which branch we want to deploy we're going to choose the main one and it's asking for basic build commands so here is actually something really important that we have to work on because this is where a lot of people get some errors regarding the build command because it it is something that i don't i don't understand why nullify does this but basically we need to put something over here to fix it so what do we actually put here well we can come here we need to put c i then an equal sign and then we have to put the correct command build so basically we wrote yarn build we wrote to yarn run build i'm going to say yarn run build here and replace because this is actually the correct command and we can't forget to put this over here ci equal if you're using npm obviously this won't be yarn it will be npm but it is the same idea so now that we did this we can click on deploy site and it starts it's going to start deploying our website um you can see the progress over here it's saying site deploy but you can already have an idea of the link uh currently if you click on this it's going to open up but obviously it's going to say page not found because you haven't like it haven't deployed yet but you can check out the deployment progress it's building the application and when you finish this building if there's any errors which i don't know if i hope it happens but if it happens i want to show you guys how to fix some errors so maybe it will happen or not but basically if it doesn't have any errors i'll just show you guys uh the results and everything working okay guys so i'm back and you can see it said published which means it's great and no errors occurred which actually is good because we did everything correctly so now this is the link i already have it open here you can click on this link and it will bring you up to a final version of your application and you can see it's already working because it is correctly connected it displayed the correct information from the database meaning that everything is working perfectly if i want to add someone in my application for example you can see that our database just has this three objects right here this is our remote database in the cloud i could just say something like john cena and the age of the person is 28 and i'm going to click add friend you can see it added over here but most importantly let's check if it added at the compass and yes it added to the remote database meaning that it's fully working any one of you guys can access this website literally that's the idea of deploying it to nullify you can see it's https which is literally perfect if you're trying to deploy a secure application obviously the url isn't perfect you have to access this url over here i wouldn't recommend accessing the the api url because this is only for making api requests but basically uh you can change this if you buy a different domain uh if you if you want to but i i usually just use it like this because it doesn't really matter and yeah that's the idea you can see our database is working per our our project is working perfect we deployed everything our front end our client to nullify we deployed our back into heroku and the connection is perfect so yeah i hope you guys enjoyed this video this video actually took a long time to to do because deployment process is something that irritates a lot like it's it's really boring in my opinion and i always make a lot of mistakes so i definitely cut this video like so many times because i made some errors and yeah i just wanted to cut everything not only for me so that when i deploy again i watch this video and just know exactly the the steps i need to take but also for you guys since i really want to help you guys if you want to deploy your applications this is how you do it if you're using mongodb react and node.js for your backend so yeah i hope you guys enjoyed this video if you enjoyed it please leave a like and comment down below what you want to see next subscribe because i'm posting every single day also i have a patreon if you're interested in helping me and supporting the channel i would really appreciate it but yeah i hope you guys enjoyed this video and i see you guys next time

Channel: PedroTech

Views: 61,286

Keywords: crud, databases, learn reactjs, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, react js, node js, pedrotech, traversymedia, clever programmer, tech with tim, freecodecamp, deploying a fullstack, heroku, netlify, deploy mongodb on heroku, mongodb deployment, how to host a fullstack application, how to deploy to heroku, how to deploy a mern app to heroku, how to deploy a mern app, how to deploy a mern stack app to heroku, heroku deployment, mern heroku, mern deploy

Id: Z_D4w6HmT8k

Length: 30min 20sec (1820 seconds)

Published: Thu Nov 19 2020