Build and Deploy a MERN Stack Application | Complete MERN Stack Tutorial

hey everyone welcome back and in this video i'm super excited to continue our first tutorial on monstart deployment and monster creation video in which i'll be continuing and building on top of this video and actually seeing how we can deploy our stack on digitalocean and a managed database now this video is for people who want to go one step ahead and not just build projects but also deploy them on live urls we will also see how we can set up a custom domain behind nginx and have an https certificate and https lock green lock available there as well so i'm excited to start this video and hopefully you are too let's go if you're new here make sure you leave a like subscribe to the channel and hit the bell icon this is free of cost and helps the channel grow so in this video we'll be using digitalocean as our cloud provider why there is no specific reason i could have used aws but i do feel like aws is a little bit more complicated for new developers who are starting off with cloud for the first time so digitalocean is easy to get your toes you know dipped into the water of clouds and stuff and then move to aws if you are doing any serious stuff i have a link in description which is a 25 referral link so you get 25 when you sign up using that link for free so that can act as something which where you can experiment just experiment right so check out that link you'll get 25 you can use that pretty much everything we cover in this video can take you a long way in that so i already do have a digitalocean account you might want to create one using the link in the description but once you create you're going to be presented with a page like this now in order to deploy our application first you can see that we have a server folder right here with us this means we need to spin up a node.js server and for that we need a computer which is running 24 7 365 and can respond to people's requests right so the very first thing just like you create a server on your local but you can just move away or you know shut down your laptop we create a server on the cloud but this server does not shut down right these are servers running in server forms and data centers across the world and they can pretty much serve your website even when you're sleeping right so i'm gonna go ahead and go to create and create a droplet right here which is going to act as a computer right and you can start with regular intel ssd five dollars per month that's fine you can choose a premium processor as well if you want but this is like the cheapest one which which you can get for now just pick up any city if you don't have any preference the servers i have seen what i have seen in my personal opinion in us have a slightly better internet speed i don't know like i haven't really done a lot of benchmarking but definitely faster than bangalore so if you choose a new york or san francisco you get faster connections there on that server so right here i'm gonna go ahead and let's say uh not select any one of them that's fine you can create a password for now for the sake of simplicity maybe we can get into ssh key generation and all the practices which you should follow in terms of hardening your server sometime later but this video is about setting up the code on a production server right so i'm just going to keep my password a b c at the rate one two three four five so i have created a password which you can which i have just written right here and i'll obviously destroy this instance before this video goes live but just for the sake of simplicity there we go youtube video would be the title and you can just give it some tags my instance that doesn't really matter but there you go and create a droplet so what this droplet is gonna do is it's gonna create this youtube video five dollar per month one virtual cpu one gigabyte 25 gb droplet and it gives you this ipv4 address right if you copy this address and go right here in your terminal what you're going to see is that you can ssh into this droplet and how do you ssh into this directly is you say root at the rate you paste this ip address and if you want a little bit more information you can pass a verbosity flag otherwise this is also fine you can just do an ssh root at the rate the ip address and it refuses because it's not completely booted so give it a few seconds to boot completely and once this is done once the computer the operating system everything is up you can ssh it directly it will just ask you for a confirmation that do you trust the fingerprint of this again something we'll discuss maybe sometime later because this is a slice more on the advanced side of things but you should ideally just you know pass in yes here and it says that it has permissions denied let's try it one more time because it said permission denied when it should have asked for the key for the password and there we go so the password right here is this for now ideally you should be using an ssh key but yeah i don't remember if i have the correct ssh keys for digitalocean setup on my system but anyway right now you see that i am inside this root at the red youtube video instance which is actually this computer right here running on this board right now by default if you open up this instance this droplet and go to the network section networking section in digitalocean you have no firewall applied by default what does that mean this means that all the incoming traffic and all the outgoing traffic is allowed on this droplet right which is a good setting for beginners but not so good if you are doing anything advanced so we will take a look at how you can set up the firewall later but for now the first thing we need to do is set up our project itself right so the first thing i'm going to do is i'm going to do some basic installation i'm going to go ahead and clone this repository first of all i'm going to do a git clone of this repository which is the full mount stack video and right here right away you can see that we have the client server just like we have inside our vs code right but it doesn't really matter in terms of vs code but you see this the server right here does not even have node.js installed so far so what we need to do first of all is app get update and app get install install npm i mean there are a couple of ways you can install node i have remembered one way which is kind of hacky but it works so you install npm from apt-get which installs an older version then with npm you install n which is the node version manager and with n you upgrade to the latest node right it works there might be cleaner ways to do that but that's something at least i can do without actually googling or looking up on internet on how to do that all right so once this is installed what you will be able to see is that you have npm installed but a really oh okay so they have updated it earlier it used to be version 3 or something but it's still older so what you need to do next is to npm install global n which is the node version manager right here and then you just say n latest as far as i remember oops and latest there you go so just gonna install node 16 which is the latest node for now once you do that you can just respawn a shell or just exit an ssh again basically one on the same thing but what this would do is just set up the environment correctly reboot the environment variables and stuff so now when you do node v and npmv you're gonna see that you are on latest versions but what you're gonna see for this project at least we used yarn and not npm so we're gonna have to install yarn and i'm gonna do npm install globally yarn and we want the first version of yarn because yarn 2 is a bit of a problem because it does not follow the same module system and and the way modules work but anyway once you do that you can see we are inside the client folder i can just do yarn or yarn install pretty much everything would work and the second thing we need to do is have to go into the server folder now the way this would work ideally is the way this would work is we would not have two folders but rather just the server folder being served which serves this yarn folder to us right which serves this front-end folder to us if we take a look inside our application right now what you're gonna see is we don't serve anything at all when we hit the you know the route the get route so what we have to do here instead is we need to add a condition something like app.getstar and right here we need to just send the index.html from build folder right this is something which we need to do right now so once we do that you're going to see that right here we have the node modules installed the next thing i'm going to do is i'm just going to say inside the package.json we have a inside of the client we have a command called build yak scripts build which creates a build version of the project so when you run react this yarn build command it creates an optimized production build which is minified javascript which is just static build and static stuff and just puts it into a build folder ideally all of these steps would go into a continuous integration pipeline like github actions but we'll start slowly we'll start it on the server side and then eventually shift it to a ci cd complete pipeline where you don't have to worry about anything at all right so let it build meanwhile what we need to do is we also need to configure the server repository server responsive tree is pretty much simple because we just need this part of the thing and the second thing which we need is just a way to start and restart the server using pm2 all right so right now inside the build folder you can see we have all we need in terms of serving a static location of the you know the website so for now what i'm going to do is i'm going to move this build folder into the server folder and call it as static right that's it now let's go into the server folder which we have and do a yarn install again because this is something which all the modules which the server side would need and it's relatively fast because there's not a lot of server needs okay the next thing is we need an editor which is always handy nano is installed by default but yeah you could install any other editor as well if you want but this editor would allow us to do searching and replacing so the first thing we need to do is let's put this on port 80 we can shift it to port 443 again slowly and steadily step by step but the first thing we are trying to do is just get the things up and running so this is one thing the second thing we need to do is also serve the statics like i said so one way to serve that would be using the middleware by passing it through express all right in order to do that we'll just say add.use express.static and the directory we have is statics i hope and that's it once we have that we can pretty much just see or we have static here not static so let's just quickly rename that by telling it static and there we go in terms of setup this is more or less all we need to execute the programming language so now if i just do a node index.js all we will get is a mongodb error which is like like we expect right and the good thing about node is that you would not expect this to fail if this was before node 14 or 15 i think but from node 16 onwards the promises actually crash the node process which is a good thing right because this means we cannot start our application if the database is down or you know if some promise is failing good thing so the next thing is we need to install mongodb so for mongodb we have two options the first option is i can go ahead and do install this on the main server itself which is fine which would work but a better option is if you have the ability to use the user managed database then mostly always go for that if money is not a constraint so you can go to this databases section on digitalocean and you will see that digitalocean actually provides you a managed version of mongodb 4.4 which is awesome because it costs you a bit more you would see that it's 15 a month for 1gb ram 1vp virtual cpu and 15 gigabytes of hard disk whereas a simple raw compute instance is five dollars a month for the same specs but the fact is that this is managed that means this cluster or this instance would be managed by digital ocean you don't have to worry about this the data loss or you know this going down or the disk just pulling up completely and then crashing and even backups in some cases i don't know if digitalocean provides that out of the box but managed services are mostly easy for everyone basically because you just offload a part of responsibility of managing the infrastructure to somebody else to a cloud right so in this case i'm going to choose the san francisco vpc why couple of reasons the first one is obviously this will be closer because this is the same instance and the second one that this actually can lie in the same vpc right we have a youtube video in sf03 region that means you can communicate the mongodb instance over a private ip which is of course faster because you don't have to route your traffic over to internet so we can say this is like youtube test db something like this and project should be my own there we go just create a database clusters you can just keep a minimal database as well it's fine and all this will do is just give you a string of url where you can connect your database to so you can see it's setting up your database meanwhile it's doing that we can do a little bit of other stuff which we need to do which the first thing which comes to mind is actually setting up a pm2 instance now what a pm2 is pm2 is a process manager for node which basically just keeps your node.js server up and running if you are using it in a server full environment like this so what what it just needs to do is you just need to install pm2 globally and then you just need to say pm to start whatever the name of your thing is right just like we do with nodemon pm2start does the same thing but it starts it in a production way which means that it will monitor your process for crashes and freezing and if you want to restart it or reload it gracefully you can do that with pm2 so all of that good stuff is available and you also have you know nice analytics because that's that's the bare minimum things these tools give you yep let's wait for this database to provision meanwhile what we can also do is while we are at it we can install nginx in the server why because that will be needed when we convert our website to https right so ideally we never really want our application to listen the code of the application to listen on any port which is less than thousand because all of those ports are reserved right that means you need a pseudo permission to open a network connection on those ports so what you ideally want is a reverse proxy like nginx sitting in front of your all the connections and then it means proxying all of that stuff to your node.js application why that is helpful that is helpful because nginx can manage a few things much more efficiently than node for example static file serving is one tls termination is another and a bunch of rate limiting for example that is much faster pretty much anything you can do in nginx would be faster than node because that's written in c plus so all you need to do is say app install and probably looks like my s key is broken on mac but if you do app install nginx that is all it's going to take to install and setup and run nginx on and run as well i mean i'm pretty sure it also runs it but we can just verify it once by bringing localhost 80 and you can see that we do get the engine x response and by the way instead of doing this the geek way with gold you could have also visited this website which we have right the ip address directly so you can just say copy and paste it right here and you would see nginx page being up and ready here now the next thing we need to do is obviously go into edc engine x and modify the configuration a little and as far as i can remember this is somewhere in sites available and if you go to default all you have to do is add a location block right here right so instead of root and stuff and are doing all the stuff you can just comment this out and you have to say for all the locations all you want to do is proxy pass on localhost 1337. again not the best and the solid configuration which you would want but this will work and once you do that all you need to do is just say sudo service restart x sudo service nginx restart it has been some time i use some server full environment i'm usually using serverless but anyway once you do that what you will see now is that nginx this page would stop loading right it says 502 bad gateway and the reason for that is nothing is really listening on port number 1337 but we know that our application would be once we you know just make it proper and right here meanwhile we were doing this our database is ready so let's just make those couple of changes and see how that looks like so let's get started let's add a trusted resource for youtube video and because we are in a vpc so that will work just fine we have the username we have the password we have the hostname and so on so let's show the password let's make these changes right away so i'm going to go into the server folder nano the index.js file let's comment this out and let's say mongoose.connect db we have the username the date password with the host name and the database is admin right and you can just add a new protocol which is the plus srv thing so mongodb plus srv that's fine once you do that save this and also yup we also need to remove the port number from 80 to 1337 because that's where we are redirecting our traffic for nginx the moment we do that and hit node index.js it should hopefully work and i did some problem here in terms of writing this this should be actually separated by a column and this is gq and then this should be an add the rate the port number should appear somewhere here but we can skip that because it's 27017 which is the default port number all right looks like we are up and ready and after refreshing the page you can see we get nothing because we don't have anything configured on the home page route but you can see the obvious problem here now because we are serving this bundle from the server this route right here is handled by by the node.js process right and it cannot find it inside static folder so nothing really happens so one more thing which we need to do in the server file itself is do this part which we actually wrote a pseudo code for so we can go to the end of file and we can right here just say app.get on every single route which is not matched above just go ahead and as far as i can remember we just have a request response press dot send file path dot join dir name and we have the build index not build actually static index.html right and i do believe that we might have to import the path package i'm not sure if we have already have that doesn't look like so we can just say require path just like this some many changes but hopefully that will be enough so let's do it one more time and refresh the page and let's see if that works that definitely works because now what's happening is that on every single route we are technically just redirecting it to react app and this react app right here hits this area where it tries to test that using the browser router so we have defined it for login we have defined it for registration and we have defined it for dashboard so let's go to register right here and open our debugger and right here let's try out with a new maven name and pass email as mayholaatheraytest.com paste this register and right here you can see the second obvious problem we have localhost 1337 which is hard coded which is probably our fault inside the front end so let me just fix that up really quick and resume the video again okay after making this change on the back end by removing the localhost 1337 hardcoded route if we just build it and try it again what we will see is when i hit on register we get a 200 okay response from the server that also means our mongodb connection is working absolutely fine and all i have to do now is just log in with the same credentials and i should be able to go to my dashboard and say whatever i want right and update this code this is happening over the intranet on mongodb as well all right so the next step now is to configure pm2 to start this right instead of just running it via node so all you have to do for that is go to the folder write vm2 start index.js and that's it pm2 will now take care of this node.js process not going down or if it's going down just restarting it and anytime you want to take a look at what's running what's not running you can see the m2 is running right now it's not using a lot of cpu and if you go ahead and refresh your application it is just going to work pretty much the way it was working locally as well i'm going to cover one final part before we close this video that is how to set up a custom domain and an https certificate because i believe a lot of people still struggle with that so what i'm going to do is i have this domain called webex.sh and it's running on cloudflare but pretty much all you have to do is figure out what your registrar is for the domain and go to the dns section of that registrar it could be godaddy it could be unlimited websites out there you have to arrive at this panel which allows you to add a record somewhere in your domain and all you have to do in order to map a domain to an ip address and click on this add a record make sure this is an a record because an a record tells the dns where the domain should resolve to and in our case this is this ip address right here i'm going to hit and add the rate for root for you it might be just www or anything but at the rate is fine just put the ip address nothing else you can just remove the proxy if you want it's fine if you just keep it on as well but the moment you do that now this domain right here will start pointing to this ip address so if i visit webex dot sh you can see that it still loads that application if i go to register for example or dashboard as a matter of fact you will see that it just resolves to the correct ip address and again you would need to log in first so i had an account mayhola guess and if i hit login let's see we have logged in successfully and right here you can see whatever i want this the code which has saved so the final nail in the coffin is to actually install let's encrypt third bot in order to provide an https certificate and for that you can just pretty much follow this digitalocean guide slash commands you don't necessarily have to read all of this but all you have to do is install something known as swordbot now the third bot is a package which will help you not only just generate these https certificates but also renew them over time so this also needs to do we need to do a small engine exchange as well which we will take a look at but let's go ahead and first of all install the third board properly you can see once that is installed swordbot is installed we need to modify the nginx site available which we just did let's just go into nginx etc engine x again and take a look at this sites available folder and inside default we have to change the server name the block which we had for server name i guess yeah so we had this underscore right here you have to replace it with webex dot sh because third bot needs to know which domain it is creating a certificate for right and once you do that that's pretty much it because third box just needs to read it you you may reload nginx but to be honest it's not really required but yeah you can do that that's fine there we go and then finally all you have to do we know that we don't use the ufw firewall on on digitalocean so we can skip this all you have to do is copy this much part paste it and then write the name of your domain in this case it's webex dot sh you can put email id if you want mayhola there it goes calm for me not that it matters you can just agree that's fine it's fine you can see now it performs some challenges and verifications it's going to give you a dns challenge to prove whether you own the domain or not you can just select number two as redirected to all and that's it you have occupied the required certificates and i forgot to mention you don't really need a dns challenge because it's just doing a verification on your path on you know on placing some files on your domain and then trying to hit them to see if they're present you need dns challenge if you want a wildcard subdomain https certificate but once you do that once you complete this all you have to do is nothing basically that's it that's all that needs to be done and if you refresh this you're gonna see that you automatically get redirected to the https version now so this is how you have deployed a complete application on digitalocean with a managed database and a droplet compute without actually just killing yourself or spending hours and days on that now there is one component which is still left here which is the continuous integration and continuous deployment using github actions which would ease our life so much that all the further updates in this full stack deployment folder are just a git commit away right that's that's all you need to do but that is going to be part three of this which would be most likely the final part of the series but i hope you are enjoying this hope we would cover some more important practices in the next video taking a look at how you can set up a ci cd how that will help you speed up your workflow how you can add some tests as well even if you want and how you can gracefully reload the application once the deployment happens so that is all for this video hopefully you were able to follow along and complete this full deployment in the next one we will be focusing more on ci cd that is setting up a continuous integration and deployment pipeline with github actions which is going to simplify a lot of the problems in terms of updating the code and refreshing reloading the service under the hood as the updates happen but that's all for this one if you liked it make sure you leave a like subscribe to the channel and thank you so much for watching i'm gonna see you in the next video really soon if you're still watching this video make sure you comment down in the comment section i watched this video till the end also if you're not part of code dam's discord community you're missing out a lot on events which we organize on a weekly basis to code you already know the drill make sure you like the video subscribe to the channel if you haven't already and thank you so much for watching

Channel: Mehul - Codedamn

Views: 45,961

Keywords: web development, codedamn, mehul mohan, full stack development, full stack web development, Login Authenticator with MERN Stack, Build a MERN Stack Application, Full MERN Stack Tutorial, mern, mern stack, react, express, node.js, mongodb, mern tutorial, react full stack, full stack, mern stack tutorial, react tutorial, mongodb tutorial, Learn the MERN Stack, Full Tutorial, MERN Stack Course, Build and Deploy a MERN Stack Application, Complete MERN Stack Tutorial

Id: 2kvA6Ba3fWo

Length: 28min 26sec (1706 seconds)

Published: Fri Oct 08 2021