Deploy React Web App to Vultr

what's up guys in this video I'm going to show you how to host a real react application on bolter now for this we're going to actually need a react application that we want to put into production and host so for this I'm going to be using the menu unki application and I actually just upgraded this so if you're following along and things look different that's because I just did a bunch of work on this and updated it so if you follow along with the video series and have your own copy Biggs might be slightly different you should be able to follow on just the same but if you want yours to look exactly like mine I recommend coming in cloning the repos so I'm just going to start straight from here and just start cloning them over so I'm going to start from scratch show you guys how you can do it so I'm going to get cloned the client and I'll call it client I'm going to CD in the client and I'm just gonna type yarn so it installs and then I'm going to go to be back-end as well and clone that to get cloned and I'll just call it server and seeding the server and yarn alright so one of these dependencies finish installing and once they're installing what we're going to do just actually get things set up so the first thing we're going to be doing is actually combining kind of a client in the server into one usually what I do is I'd start the client server over here and then I would go over here and I would start the server over here like for example I'd be like NPM start and this would start out the server on both coasts 30 30 and then run NPM start over here and then this would start up the server on low close 3000 and I have your react app running here and your server running here and the two would communicate over HTTP and talk out way well--we're I actually do is we're going to have the feather server here post the client eerie act act because we can do you're not aware I could just go into package of JSON there is a build that we can do and we run NPM built this will actually generate static files that we can give to feathers but before we do that we're going to have to go into our source modules and then our index and we just need a change because we're no longer going to be whoops we're no longer going to be using localhost so you want to change all your basically anyplace you have localhost you want to change it to just an empty string and then like for example service users we're actually going to make a post request like slash users and it's the reason you could do that is because it's going to be on the same server so we're fine just leaving this empty so the other source modules you can then just set that empty it out looks good so NPM run build that guy is good to go when we run the NPM run build what it's going to do is it's going to spit out a folder called build and it's just going to have all the HTML and JavaScript needed for our website and then when that's finished we're going to do is we're going to come back over to our server here and you see this public folder right here we're just going to kill that and we're going to replace it with what build oops we're going to place it with the build that happens and if you notice we just open-source IGS you can see what's happening is we're serving all the static files from that public folder when we go to the root index so let's see if it's finished it is so I'm going to just go up a folder go into om I did it oh look at that I accidentally copied the file and to client so I get cloned into client that's and cause a problem for this but those silly to do so I'm just going to copy the build folder and go make it public so now I have this now if I do NPM start and I do not start the client this is only starting the server I can then come to localhost 3030 and we should to your application running and should work as usual we can click on it you can do all the stuff you thought you would but there's a small problem with it right now I just like so if I click on for example to sign a page it works right but if I like refresh we get a 404 page not found and the reason for this is I go to source app just what I was just showing you this app got use is only works on the home route so what we need to do is we need to copy it and paste it right above middleware and do a star so now any route that is not the index route and is not any of these routes so it's not authentication it's not any of the services there's going to be caught by our react application and that's what we want so for example sign up sign up does not the root index it is not service so it should be caught by our application and we should sir we should handle a reactor outer on one thing with this is will no longer get four or four messages like for example if I was put in a rapid or during this reactor outer handles that now not other server so adding that and adding a star here handles that so now if I just restart this and we come back over here and I click on that I don't notice how the react app location is rendered cool so now I working all nicely and looks good so what I'm going to do is all we need to do now is put this on a server so I'm going to actually get stash that I should have I wanted to go into a different branch before I actually maybe I can so I just want to switch branches so masters kind of been my development branch and then create a new branch forget and I'm going to call it production and then get status cool that make a commit I'm just going to say ready for production so it's now all good to go so now we're we can start doing stuff with vulture so the first thing we're going to do is actually not create an instance but set up an SSH key so if you create a vulture account and then just go into their panel back here instead of instances you can click on SSH key so I'm going to add an SSH key and we're just going to follow their tutorial on how to generate one I'm going to show you how to do it with Mac but if you have a Windows you can follow the Windows one so I'm just going to run this command and we can make it more secure why not so we run that I'm going to keep the default I'm going to go ahead and overwrite I'm going to leave it empty empty passphrase and it created my key and now we can cat that and I'm going to do PD copy if you if you don't if you don't want PD copy we can do is you can just cat and copy the output and then you go back here and you paste in what the output of that key was and you can give it to name I'm just going to call it my my temp SSH key and we're going to add it okay cool so we created our SSH key this allows us to SSH into our instance later so now we're going to go ahead and create an instance so I'm going to plus sign to deploy any one I'm located in your Dallas so I'm going to click this Dallas one but you want to click the location it's basically nearest to you or where you think your users are going to be and then you can click your server type I'm going to be using Ubuntu I'm going to be using the newest one but you can click a different one if you like but the installs going to be slightly different the process is the same though it would be like different commands if you like a different operating system better and then you can click on the server size you want I'm just going to use the cheapest one that's available for this example and then additional features you can add these all go ahead and enable IP version 6 we don't have any startup scripts that we want and I'm going to click this H key I created and the server name I'm just going to call it menu monkey so we can deploy that and that will mount install and create our server now what this is actually like a virtual machine and it's an actual computer running on their server that we're basically that we're using ok so we just let this thing finish installing and when it is we're going to click on this and we can already just copy this this is our IP address for our server and it's getting it what we're going to go to so for example here we would go to localhost to test our application we're actually going to be going to this URL to test our application and to SSH n we're going to SSH and then we type root for the user and we can paste in what oops what's the IP addresses here and then also when this is done installing if you click on this it'll show you the user and password that sets up for the initial one so I'm just going to refresh and see if it's finished ok its resizing so it's almost done ok cool let's look at this so right here that was IP address it'll give you all your staff that you have your OS and then here's your username and password for the user and if I click on that I can show you my password I'm not going to and then also there's this button called view console here I'm going to be doing every think through SSH but if you didn't want to ask this h you can actually just click on you console and you could go do it that way and they'll basically give you a console they can do everything and then we can just try SSH in and seeing if it's ready and cool it it so once we have this h we are in here and you should see a prompt like this now I'm going to just split screen because we're basically just going to go through and run a bunch of installation things so okay so now here we're just going to follow along with this digitalocean tutorial on how to install in nginx on a bun too and it's actually very easy we're already up to date all we're going to do is we're going to install it and we'll hit yes and then after that we're actually just good to go we don't have to worry about any of the firewall stuff they have some more information on how it works and how you can configure it if you'd like to read this I'll put all the documents I'm going to use for this in the description below but just running that we can now go to that IP address that we're given by voltar if we just go to that in our URL we should see an engine X welcome screen because we just installed it if you got that you're good to go to the next step so next thing to do is we're going to be using MongoDB at least that's what our application uses so we're going to need to install it so run that to install and then when that's done running we'll have installed and we actually don't even need to check anything that the next thing is installing node because our application will be using node and then this is how you install on bun to we're just going to copy this one actually no we're not we're going to copy this one because we want version 7 of node and then we're going to install a node get after that's finished I don't think we need this build essentials but we might and we can install nodejs now and then when that's done we'll actually have node on our computer and also MPM so we're going to run node and with the - V flag make sure you get seven and the next thing we can do is we can set up our application our NPM application and actually before we go through setting up this I want to just clone our application so we ever back-end here and I made that production I made that production branch and I want to push that to get hub so I can then get push origin production so I can then clone it for my computer okay so that's pushing up and now on my back to the vulture server we have I can clone the code that I want so I'm just going to get cloned this this will be the server and I can see D into server so now I can do get check out branch and the branch we want to check out is production so now we have all that code that we have that we wanted before and what I can do is I can do NPM start oops increase we have an old an errand let's see what that's about so you'll notice this might happen to you and you get some errors if you want to just put them to a log you can like this NPM start to caret sign log and I'll print everything to log and you can do them log you can see up that's right so I forgot to run npm install on that to install the dependencies so when that's done we will stir up the server and when we start up the server what's going to happen is it's going to be on will be able to go here on 3030 and use application just fine but what we want to do is we want to be able to go to here without the port number and that's why we're using engine X which then will allow us to do exactly with this either the reverse proxy server and then we'll set to whatever what we want and it'll do its thing so now I can do NPM start while I'm inside the server and now if I go to not localhost but if I go to here my IP and do 30 30 it should render the application now I should be able to if we can open up console and we can see if we're getting errors I should be able to sign up create a new user here log in and should be able to add a recipe so first oops first recipe and we can add one click get the timo from our desktop I 1 I 2 stuff and we can submit and cool we see a recipe and we're good so applications we're working good we notice it was like I was saying it's just on 30 30 so we want to change that and that's why we're going to spell and follow this for in turn X and that's why we actually setup engine X so we can control seeing cancel out of starting up or server and what we're going to do is we're going to go to this directory I prefer using them instead of Nano so open up this file using nano if you prefer I'm going to use them and then like it says I'm going to look for the location called or sorry the place in the file named location so if you're in them you can do a slash and then location and then it'll take you to the places location and then I'm going to remove all the stuff and location I'm going to paste and this now the only thing we want to change is instead of a DAT we want 30 30 because that's what our websites running on and we can cancel out of that and save it and now we're good to go we can run this through though engine X to make sure we did it correctly the dash t flag and then here's the last thing we're going to do just restart nginx with a new configuration so now that we did that we can do NPM start and now just what happens if I don't start the server of course when I come here I'm going to get site not reached but now that I do NPM start and I come here we should be seeing our application and we do and everything works as we it would expect it to so that's awesome and now your this is a really look really good way to set up your application but there's one extra thing I was I recommend doing you don't have to do this if you go onto but what happens if right now we're just starting the server of NPM start what happens if the server reboots or something happens and no crashes you want it to automatically restart and that is what they talked about earlier in this article with the digitalocean does so they're going to use something called p.m. - that's I recommend as well it's very good so I'm just going to ctrl C and we're going to go through installing and setting this guy up so it's going to handle starting node when we for example reboot the machine if something happens to it or if something crashes it'll handle that for you so you do p.m. p.m. to start instead of for example note so what happens when if you guys didn't know when I run NPM start here what's happening as it goes into package.json and it runs this start command which is just node source so instead of doing node source we're going to do NP to start so MP to start and then source and what it will do it goes ahead in the background and it's actually running on application so notice how I have full control here I do stuff but in the background this server is still running I can go to it and I can use the application still that's that's exactly what we want and the next thing I'm going to do is actually set up so we can start on reboot so before you actually do this p.m. to start up what you're going to want to do to p.m. to save so it knows which process to restart and you do a p.m. to startup you can do system B if you're on the bun to which I am but PM 2's will detect it you just do startup it'll detect what you're on so you notice how it detected system B so now you're good if you wanted to what you can do is you could come on over back here to vulture my q2 servers and I could actually just restart this thing so I'm just going to exit out of here and I'm going to hard restart the server and if we come back over here and refresh this page when it's done restarting it should be back up and started as we expected so and that's that's it for setting this up we now have a application running live this is a live thing that people can come to the only other thing that I would recommend doing is setting up a custom domain name here and then maybe doing HGPS that way it's secure so this thing restarted and we can SSH back in cool and now if I do p.m. to list see how it says there's a something running here I come over here and i refresh you notice it's still running all our data is still there so that's exactly what we want to happen so now if something happens to your server or something you're still ok you're up and running as long as the server restarts so that is it for this video you have any more questions or comments please leave some below if you have any if you're wondering how to do anything else with full I'd be happy to help so thank you guys for watching and I'll see you guys the next video

Channel: Ben Awad

Views: 5,545

Keywords: react, feathersjs, javascript, reactjs, feathers, redux, fullstack, backend, api, frontend

Id: ooQ7bfaB4VE

Length: 22min 18sec (1338 seconds)

Published: Tue May 09 2017