React: Production Server Setup Part 2 - Live Coding with Jesse

Key Takeaways

hey everybody I'm getting a message that my my stream status is bad so let me know if you can see this uh if you can hear me not seeing anything in the live chat I know there's a delay but all right awesome now I got it it's kind of a long delay on this um all right so yeah I had some some issues like two minutes before I was going to start the stream where everything was freezing up so I shut down my um my webpack server and my gulp server that I was running and I closed some windows so hopefully hopefully everything will run all right um I have up on the screen just kind of the the same reminder that I've had for a while I'm not really going to go over it streams are going to be sporadic uh the next couple days and then next week it'll get back on schedule uh the only thing I do want to know is I'm going to be at syntax con I do have permission to do video there uh either live stream or pre-recorded video so if there's something in particular in particular that you all would like to see please let me know uh you can let me know in the live chat or in the comments or on Twitter uh however you prefer okay I was just checking yeah it looks like the stream is good I nobody's nobody's saying there's anything wrong with the stream so uh just a recap from yesterday uh where yesterday if you uh if you were watching it was um I got stuck on one step of setting up the server a really easy and early step and that's setting up an alternate user account so we don't have to use root all the time and the problem was when I went to copy and paste the SSH key I didn't get the entire key so I was trying to go quickly didn't get the very end of the key and when I pasted it in obviously it didn't work so that was the problem so it's kind of nice that it wasn't you know something more serious but that happens so I should have thought I know uh later on some people in the live stream suggested that it might be that issue and as soon as I saw the suggest I I kind of knew that that was probably it uh so that's that was the problem so now I do have a user and uh it it does work so we're going to log in today as this user I set the length for this live stream for an hour instead of a half an hour because I'd like to get through as much of the server setup as I can hopefully all of it that's a little bit ambitious uh so we'll see uh we have to install engine X and node we'll probably set up I don't know maybe we'll set up the SSL I might wait uh since the URL that we're going to use use it's just a test URL it might not be the real one so we'll see and then hopefully we can get a chance to configure uh our our server our node server using we're going to use express and see if we can actually get this this app running uh this site running on the server so I don't know if I can get it done I might go longer than an hour I have a meeting at 1 p.m. eastern time time so I can't go any longer than that and it is a meeting about this website so I've been working like crazy to try to get a lot of the changes requested at the last meeting done they were basically just minor user interface changes uh just some content changes and things so nothing big I got most of them finished uh I I do this show to kind of show you how what things are like for me so I'm not I'm not usually one to complain that much I don't like it but just to let you know how things are going and be completely honest I'm starting to get a little bit burnout because I've been working a lot of hours so um just just to give you an idea just to show you uh I'm going to throw up my my tracking of my hours I know this is probably small but you just see the colors so uh this is my my time sheet so in a normal day I'm I'm contracted to work seven hours so anything green is over s uh so you you can see the additional hours are all here so I'm I'm like at least a week of overtime now just for this month and we're only halfway through the month I don't so so this is like just a lot of work for me recently uh and the frustrating thing was you know yesterday I I put in like 11 and 1 half hours but I think at least six hours of that was spent in meetings so I don't know that's just a crazy amount of meetings for me that's above average uh but it's kind of it's it's frustrating when we got a tight deadline and that happens so it might not be like this for all front-end developers but sometimes it just happens you got to put in a lot of hours because you have a deadline and there's there's interruptions so I ended up going home and doing some work at home the tough thing was I was supposed to take my son to his karate lesson and I couldn't I had to text my wife from a meeting to tell her I wouldn't make it uh so that's that's tough I'm not going to get to see my kids for a couple days this week because I'll be at a conference so I really wanted to be able to spend more time with him uh but instead I ended up going home and and doing more work and then putting him to sleep and staying up and doing more work so now I'm now I'm tired and uh I'm running on on caffeine so with that said I'm still going to try to do my best get this done on time and be happy uh at my meeting but that's that's just how it goes it's not always like this but occasion Al you get a project with a tight deadline and and this is just how it is so sorry for the you know the the complaints the little whining session but I I just want to let you guys know how it is you know and without sugar coating it so hopefully next week we launch and things will slow down enough for me to get back to a normal schedule and also when you're working this fast you don't get the time to try out new things and learn new things which I like to do on projects hey everybody everybody's saying hi in the live stream um which I always like to try new things but when you have a tight deadline you always you just have to fall back on what you know will work and what you've done in the past so you you don't really get to to develop as much at least that's been been my experience so hopefully I get a project with a more reasonable deadline next and can try out some some new cool stuff all right so enough about that let's get to it if you want to follow along and I I'll say this right off the bat I'm going to ignore the live stream a little bit but at the end I'll try to catch up but I think the only way we're going to get through most of this is if I I don't take very many breaks to answer questions in the live stream if I do miss your question like and you you have to go and you can't stick around for the whole live stream I'll try to answer it at the end or you can put it in the comments and I'll I'll send an answer to you when I get a chance to see it later on uh so in the description I've linked to two tutorials on digital ocean the first one we did yesterday and that was how to set up uh Ubuntu on a digital ocean droplet the second one is what we're going to start with today and that's how to install engine X I just so somebody yes somebody was here yesterday and asked what was what was the issue it was it was a copy and paste error so it's kind of embarrassing uh but I was just trying to go too fast and didn't double check that I I copied everything uh that the problem was actually normally I would open my like my sshq on my machine I would open it in in atom and then I would see the whole thing it'd be easier to copy and paste but I didn't actually want my uh my key to show up on the screen so if I would have opened it in Adam and just Auto opened it it probably would have opened right on the screen that I was on since I had Adam open on that screen so instead I thought well I'll just use Nano to open it well evidently uh it's a little bit more difficult to copy and paste an Nano maybe it's just me because I don't do it a lot but that's that's why I did it so I thought I got it all uh when I was trying to to copy it from Nano but I didn't that happens I guess all right so we're on step one of that engine X tutorial I think it's the second one I Linked In the description oh no the links are broken all right let me throw you a link right now in the live chat see if this one works thanks for the heads up about the broken links I will try to fix that after this video so people watching later uh can can get the right links all right so you don't really need to follow along in on if you don't want to with the instructions but they might provide a little bit more explanation I'm going to make this a lot bigger so we can see that should be big enough let me know if it's not I can make it bigger uh first things first we're going to log in there we go see it worked yay that's what we spent so much time on I guess I mean it was at least 10 minutes right that we spent trying to figure that out and could didn't figure it out so it works now all right so step one remember we're going to use pseudo now because we want to we need to have root privileges to be able to run a lot of these commands so that's why we use pseudo in front of almost everything we use it for and then we're going to say at get update uh so this is just going to update this uh this is like the package manager for Ubuntu the app get we're going to update the package manager when you're using pseudo uh usually the first time you use it you type your password in and then if you use it very like quickly after that they don't make you type your password you won't have to type it all the time all right so we're up to date and now we're going to run pseudo appg install engine X all right and let's see it's just warning me about how much dis base I'll have left after I install this so I'm going to go yes everything we're installing today should fit on a $5 a month digital otion droplet at least it did the last time I did that which wasn't too long ago maybe a few months ago all right step two we need to adjust the firewall if you remember yesterday we had a firewall uh and we allowed uh open SSH well now we have engine X and we need to allow engine X to work with the firewall because engine X is going to to need to communicate uh with the outside world with people requesting to check out this site so let's just list and see what we have okay so all these right now are our possibility that we can open up we're going to at least right now we're going to enable HTTP since we don't have an SSL set up okay so that's our Command really simple and straight forward ufw allow and then we type the name in uh single quotes we type the name of the application we want to allow all right uh let's let's just check this let's check the status to see okay and we have it on the list as being allowed now we're going to actually start the web server is the command we're going to use this is step three on the uh documentation if you're reading it okay this this just lets us know that it's started so we can see it's active running okay it's been running for about two minutes and we're actually going to we're going to go to the page just to make sure that it's working and in the instructions it says go to the IP address but I've already pointed this subdomain to our IP address uh so if all you do if you've never appointed a subdomain before you go into wherever you have your domain hosted at whatever your registar is or if youve changed your name servers wherever those name servers are pointed to you go in there should be a place where it it shows you all the different subdomains that are associated with your domain where the MX records are that handle the ma email for that domain and you can just add another one type what the name you want for the subdomain in this case it's test and then you want to select what's called an a a record you put your IP address in that a record save it and then your subdomain will point to where you want to go when you're messing with that stuff just a word of advice take screenshots or or something to remember everything all the configuration because if you mess it up and you don't remember what it was supposed to be uh it it could it could really mess up your site people won't be able to get to your site it could possibly make it so that email doesn't work on that domain uh so you don't want that to happen especially if you're working on a big site a client site you know a site that has you maybe a lot of subdomains you know you just you want to be careful about that so make sure you you only edit what you need to edit and you you have a backup so you can restore it if you need to all right so that's working so we'll move that off and oh I just glanced yeah I did say yesterday that we would disable the root user so yeah we didn't do that did we okay for some reason I thought that that was part of those instructions that we were following along maybe it was in a different spot so I'm not going to try to find it right now in the middle of the video uh if we have time later on I'll try to do it or at at some point I'll I'll try to find it explain it but yeah I do I really do want to disable uh the root user and I did forget to do that yesterday so thanks for bringing that up I'm actually just going to type that in the search bar and leave it there so that I see it when we're done okay let me get back to my tutorial okay so we're going to skip a little bit in the tutorial since we don't really need this um let's see okay okay we can go to step four step four is just going to show us how to stop and start engine X how to restart it we're not going to go through these because we we haven't changed anything yet this just shows you the commands in case you're you're not following along uh we run pseudo uh system CTL all Al together start engine X we can do the same thing but just instead say restart engine x uh to just stop and start immediately uh when one command we can reload engine X which can be used if you change the config but you don't want to actually stop and start it and um uh mess up your connections you can just reload and then the changes will be enabled engine X will restart by default it'll start if you reboot your server you can disable this and it's the command is just enable disable engine X these are all assuming we're we're saying pseudo uh system CTL first then disable engine X and then to reenable it you um you just do enable engine X so those are all really straightforward step five if you're f in along just goes over some of the directories that are important for engine X and that's it for now for this for this part of it we are going to Let's uh do you got well let me let me ask you would you like to see how to set up an SSL because we can do that step now or we can just skip it and try to do it later I'm going to wait a second just uh for the delay to see if I get any response here I'll go ahead and bring up that tutorial just in case we do want to do that okay we've got a yes I'm going to copy and paste the link to the next tutorial in the live chat and then I will add it into the description as well after the video after the live stream ends so if you want to follow along we're using just the basic instructions on digital ocean for how to secure engine x with let's encrypt on Ubuntu and the first thing we need to do is install certbot so let's I'm just going to copy and paste this because it's a long one okay so this is going to install cbot for us all right we need to confirm by hitting enter great okay we're gonna update our package list right I'm sorry I I said the First Command would install it this is pre prerequisite command so obviously that the app get install command is what really installs it I am going really quickly you could read more about what's happening well right now it's actually installing it but you can read more about it in the uh the instructions on digital ocean that I just linked okay let's we're going to be on we're on step two now and we're going down to the web root plugin and uh so the web root plugin it if you're not following along uh I'll just summarize a little bit what it's saying it needs to check a file in a directory that's that's going to be wellknown that's going to be the name of the directory so we need to allow access to that directory so we're going to edit our engine X config to allow access uh to that directory so let's go and I'm going to show you in the instructions it says use Nano to do this but I have an easier way so let me bring this up here if you've never seen this before I know the font's really small I'm not I'm not sure how to make the font bigger on this uh right away so sorry about it being small this is filezilla It's just the client that normally you can use to uh like FTP into a server in this case I've set it up uh with with SFTP so it actually uses the same SSH key that we were using to ssh in on the terminal uh I like this better because I can open the file in my code editor which is atom on my my local machine and it's so much easier for me to edit this than if I try to edit edit it with Nano so that's where I'm going to differ a little bit from these instructions it's entirely up to you some people are really good with terminal editors especially some people are just like really really good with them and and can go really fast I am not one of those people so we're going to go to the directory that it says we need the actually let's see if this work now I remember what happened last time I did this H all right the last time I did this I I remember I think I had an issue with this because my user did not have access to these files so normally you'd have to run this in pseudos so the way around this is actually I guess it's actually good at this point that we didn't disable the root user I don't recommend doing this or leaving this uh this option open but for now this will speed things up for us I'm going to actually make the user rout and now I'm going to try to uh previous connection now I'm going to try to go in with this okay there is a way that I could have just let my user edit those files and logged in like that but I don't want to have to do that because it'll just take more time right now but that's probably the better way if if you had more time but for now we can work we do this then we'll switch it back to using my user and then at some point we can just totally disable the root user but this should speed things up for now if anybody has more experience with this and this is like really crazy let me know uh if there's some reason why I really should not do this I would like to know all right so we need to get it going to engine X here it is and sites available and default so I'm going to click View sledit and there we go so now let's open this file and add them and it's so much easier to edit like this okay so now we're going to continue on we're going to add this SSL to the server block so this is all when you see um in your engine X config when you see this hash sign that's basically like a comment tag so these are all commented out uh there's a lot of stuff that's you know just examples of what you could use so we want to add this inside our server block so this is our server block so server and then we have this open uh bracket and it closes where's it closing at all the way down here okay so we're closing all the way down here so a lot of this stuff is commented out at this point but we're going to just add this location under here it should be good right there we'll certainly find out soon if it's not but I'm pretty sure that'll work I just save that so I just hit control s or command s and we're going to hit yes and now this is saved on the server if I had left it to where the user we were uh using for for this was Jesse instead of root when I would have tried to save it it would not have let me save that because I wouldn't have had uh right access to that file okay let me know if I'm going to fast or if I'm losing any of you and I can I can always try to explain a little bit more uh or slow down a bit okay we've gotten through the first half hour and we're not we're not too bad on time we'll see if we get through it all and now let's go back to our terminal and we're going to do pseudo engine x t this is going to check if we have syntax errors in our config file and everything's okay awesome since we don't have any errors I'm going to restart engine X so I'm not going to type this all out but you can see it's system CTL restart engine X and we've obviously use P up okay so everything's restarted and they give us the the next step is a really long command where it wants to know the path for our web and the the name of our domain so what I do I'm going to copy this and then I'm going to come over to Adam I'm going to copy it in here and edit it here since it's easier to do it here than on the command line uh I can take advantage of the slight benefit of multiple cursors so we have test. catic.com it doesn't matter how many times I try to spell that word kattic is always hard to spell c a c okay I think I did it right um and I think this is the default path for engine X so I'm I'm assuming that this this will work because we didn't change our path okay so now I'm going to copy that paste it okay Enter email address okay so now this uh let's encrypt is going to ask some questions to set up the SSL so okay so that's my work email and I'm just going to agree and share your email address yeah sure they can send me stuff and you see we're getting a new certificate uhoh oh shoot I forgot to put www for [Music] my I wasn't thinking so if you want to do a subdomain and you want it to be reachable with with or without the www we actually have to make two record and I don't know why I forgot to do that because I've I've done it a lot but for some reason I forgot so actually I don't really care about that right now so what we're going to do is let's just go back here and let's take out the www since this is a test I'm not I'm not worried about it so we are going to have to go through this again it just be was it like 15 seconds last time congratulations it work see if if you I was going to go in and change that record for the sub domain I would just put www. test and then I would point the a recer to the same place we will do that when we switch it over the main domain for the site is just going to be katc.com we'll do that then but for now since it's just a test uh it's not really worth the effort all right so we have our certificate and it's it's that easy to get an SSL so there's really there's no excuse to not have an SSL it was free and it's takes five minutes oh somebody did comment if you're using IIs it is a bit different so yeah Windows is a GUI base so yeah it it is different totally different uh instructions for that and I don't work with it we have uh other people here that work with the windows servers and so I I've never had to uh I don't need to know how to do that okay let's go to next step it says we can check if the files are there I'm not going to check because I'm pretty sure the default locations always always work I'm just going to skip that for now but if you wanted to uh there's there's a command you can use to check to make sure that that uh your your your keys for your SSL are there uh we want to generate now a a strong Diffy Helman group okay so I am going to do this it does take a few minutes but it looks really cool on in your terminal when it happens so let's let's do this so this is the command that we're going to use it's super long so once again we copy and paste so this is what I say it looks kind of cool I like this I like this thing I once was doing this at home and we had uh somebody visiting and they saw my screen and like asked me if I was some sort of hacker or something because they they thought it looked really crazy which I'm not but it does look really cool okay so while we're waiting on that I'll check the a little bit in the live chat someone says they're PC user they're not familiar with the Linux bash yeah unfortunately things are going to be slightly different if you're doing this on a PC some of the commands are the same and one thing to remember too I am now logged into a Linux server so I'm no longer on my local machine so even if you're on a PC if you SSH into the Linux server you're using Linux commands so unless you're using a Windows Server these are going to be the commands you're using whether and it doesn't matter how you access that server you can access it through the browser through digital ocean admin panel you could be using I mean you could access through the browser on on Chrome OS uh you could be on Mac Windows uh or Linux but no matter what you're still executing these commands on a Linux server so even if you are on a PC it is good to know these Linux commands uh because odds are at some point you know unless you're going to be doing like strictly you know Microsoft based like net development then at some point you're probably going to do some work on a Linux server yes you see this does take this does take a while it should be done soon it's been a minute or two already uh I'll just skip ahead a little bit on the instructions on step three uh we're going to configure SSL on the web server so if you remember uh at first talking about the uh the firewall which we we'll switch later on but in the firewall we did not allow engine X to serve actps and then in the engine X config we only had things going through uh Port 80 which is the normal port for regular HTT traffic but we need to switch it up and go through allow SSL traffic to go through I think the port is 433 I think that's the default uh Port that end up using 443 sorry 443 so we will need we need to go to our configuration files again as soon as this is done I could probably log in on a separate tab if this starts taking too long and and try to get some of the other stuff done and uh Alberto in the live chat just suggested if you want to practice with a Linux server use Virtual box and install vuntu on it yeah that's uh that's good advice if you don't want to actually pay for a Linux server or you can use I mean it doesn't have to be auntu you can use a different version of Linux uh if you want you can you could probably do it in in Docker as well you could use a Docker container uh with whatever version of Linux you want I'm sure there's some other some other ways that I'm I'm forgetting if you use something like uh Cloud9 so at c9.io uh they start you off with uh it's a a cloud development environment that you can access through your browser and I it it was free I think it's still free they give you a terminal right there in your browser and you could practice those commands in there as well that's probably the most userfriendly of all the options that that I mention that I'm seeing here in the live chat uh I would try Cloud9 isn't the only uh Cloud development environment there are a few others as well so try try that out too because then you don't have to know anything about setting up your own your own server it's already set up for you and you can just practice the commands wow sorry guys this is taking longer than I remember it taking yay all right it worked okay somebody mentioned in the in the live chat Cloud9 is free but you have to add your credit card info so you know what I do remember that now when I signed up for it you didn't and then they changed it and now you do have to add a credit card so you could still use it for free and they won't charge your card but you need to have a credit card for that so yeah little bit bit of a barrier to entry there uh I'm trying to think did it get acquired or I the change came I think maybe right after C9 got bought out it it was a while ago though so I can't remember exactly what happen Okay so now let's go to step three and we need to configure engine X to use SSL uh we need to create a config engine all right so it's saying that we want to use Nano to open this and edit and create the uh the file file but like I said I don't want to use Nano so this is going to differ pseudo and instead of Nano I'm just going to say touch and then I'm going to copy some of this in so if you're not familiar with the command touch that just creates a file I'm assuming that this will work on auntu I know it works on the Mac and we need to change it to our domain okay and then now we can bring up our filezilla window and we're close we're already in the engine X directory here so now we just need to go to Snippets and here we go there's the file we just created file size zero because you don't have anything in it yet but now we can view and edit it so we're going I'm going to copy and paste copy and paste our SSL stuff we need to change example.com to our domain which is kattic I love that it autoc completed that for me I don't have to try to spell it out every time so we're going to save that and we'll hit yes okay and I don't think we'll need this file anymore so we can go ahe and close it out okay the next thing we're going to do is we're going to make another snippet and when you could do this allinone config file if you break things out into Snippets it can make your file a little bit more clean so if you've done done this before and this is not exactly how you do it uh it you don't have to do it this way and in fact I've seen different tutorials on digital ocean that do it you know I either way so I think it just depends on what what you prefer and how long your config file is going to be whether or not you want to break it out I don't know if there's another advantage to it or not you can let me know in the uh in the live chat or the comments uh if if you know okay all right about quarter after okay I could probably do this for maybe another half an hour I want to leave a little bit of time to prepare for the meeting that I have at 1 p.m. eastern time so we keep working we're going to go we're going to make another file we need to make another snippet here and I've just copied the the path and now let's check it out Let me refresh this and you can see it's appeared here let's edit okay and they give us some uh some boilerplate uh security config uh I may go in and edit this at some point so but this will work for now and um I'm not going to go through all this right now but these are just a lot of ways you can configure things and uh they do they give you a link in the in the directions where you can go to read more on you know what these things do so yeah so like I said these will probably get adjusted at some point but for now this will work so I've just save that say yes and now that'll be that'll be saved now we need to adjust our engine X config so let's go back let's see if I still have do I still have it open there we go I still have it open so are uh sites available sub name so it's asking us to make a backup of our current so that's that's probably a good idea let's make a backup so let's let's run this command I'm just going to copy this command because it's long I'll tell you what it does though this is just copying this is CP it's going to copy this file which is default and it's going to make another file exactly like it that's default. Bak that's our backup so now we can we can mess with our default without fear that we're going to break everything you know beyond repair so now we're going to open up that default which we already had open over here so see this is the default file so we don't need to open it again we never closed it and inside the server block we want to find that server listen 80 and we had this SSL config that was already here uh so we're going to modify this and we're going to allow basically we're going to shut down traffic on Port 80 like unencrypted traffic and uh make everything go through through SSL so I'm going to copy and paste some of this and then we are going to have to put in our [Music] own our own domain so anywhere we see example.com needs to change and oops remember we have haven't used that www but yeah actually we do want to redirect all the www stuff uh but we don't want let's see yeah what we don't want is www example.com redirecting to the https version of www.example.com because we don't have an SSL for that so either now or at some point later on uh we'll have to redirect www TR trffic to not use that www and that should prevent anybody from getting an error message saying you know hey there's there's no SSL this site's not secure things like that so let's change this test. catic.com [Music] oh man my Spotify just quit on me gotta hold on a second I mentioned uh in a previous video that I always play music in the background and it helps I don't get distracted by Voices uh you know in my in my building and also it helps me to to talk louder because you know everybody talks louder when they have headphones on listening to music okay all right I'm starting to slow down a little bit now I think two reasons one I don't want to mess this up and two I I am a little bit tired today so uh sorry for the slow pace for those of you who don't know anything about this it's probably better that I go slower uh if you're a little bit more knowledgeable uh you might be getting bored so I apologize okay let me um let me bring over just so you guys can see where I'm at I want to actually bring this over and this are those uh the instructions on digital ocean that I linked to earlier that way you can actually see where I'm at and follow along so we just did this step and now or on this step we're actually going to start a completely new server block here and let me duplicate this as well so that when I switch over I can copy and paste more easily uh because I'm going to need to switch back and forth so we need to go at the End of This Server block and we'll just make another one I know a lot of this is already here and we could just uncomment it but I think it'll be simpler at this point to just copy and paste what they have in the tutorial maybe maybe not let me see if it's close enough actually let's not let's do this and now we can open another block here remember we don't need that closing tag because we already had one down here uh we can uncomment this stuff so that'll open up port 443 to listen there uh and now we need to include our Snippets so remember we made those two snippet files and this is where you think these could be added in here but to make things less cluttered we just include this and we we do need to change that example now whatever we put in these Snippets is going to load as if it were right here in this document but we don't have to to have it all in there so it's it's kind of nice makes a little bit more clean and let's see all right this should work s because we are redirecting everything here anyway so all this other stuff that was uh uncommented it should be fine to keep it in This Server block instead of this one actually let's move this one down to I'm not 100% sure that this absolutely has to go here but we'll give it a shot so we've saved it we're going to upload it we're going to skip over this alternative configur fation here because we don't want to allow both sets of traffic right now now we need to adjust our firewall so I'm not going to look at the status we can we already know we've looked at it you know earlier in the Stream we know so far we've only done HTTP and instead we're going to I'm going to copy and paste these first what we're going to do is we're going to allow full so we're going to [Music] allow engine X full which would be both uh both types of traffic and then we're going to delete so this is kind of an odd way to do the command and we're not saying disallow or disable we're saying delete allow okay which is is oops and I forgot there we go forgot that uh a little single quote now we will check the status just to make sure it worked and here we go so we have engine X full all right let's check our engine X if you remember we did before uh we use this command engine x uh hyphen T and that checks for syntax errors all right everything is good so we did a good job I was a little bit worried with my editing of that file trying to do it quickly that I would mess it up but no syntax errors might be some logic errors but we we'll find out soon enough now we're going to restart it so the changes will take effect okay and here's what we're going to do we're going to do an SSL report and this will let us know so I'll do it right here we do need to change it to the domain that we're using so test. cats.com okay we'll let that go we'll come back to it in a second because it'll take a minute we want to set up Auto renew okay so this is important the the biggest at least that I know of the biggest drawback uh of using uh free SSL from let encrypt is that it it expires I think it's every three months yeah so every three months it's going to expire you have to renew it so if you don't want to have to mark your calendar and manually renew then you want to set it up uh to Auto renew so we're going to go into this this cron tab uh if you're not familiar with cron uh I I believe it's short for like chronological so they're basically things you can do at given intervals in time so to things that'll automatically happen on your server so the way to configure this it's it's a little bit weird it looks a little bit weird but it makes sense once you you know once you get used to it and see it so for this I am going to use Nano so it it actually gives you a choice to use uh Vim or actually I've never used this one uh but we're going to use Nano and it even says Nano is the easiest we're chosing two for Nano all right and this is what it looks like all this stuff up here this is you know all just kind of instructions it lets you know a little bit more about it uh but we're going to skip down here and just edit actually can we let's let's just copy so we don't mess it up we're we going to copy and paste and oops what did I just do okay that's weird okay so I'm actually going to move this so it's it's more closely aligned with the spot it's supposed to be in because this just shows you the the order I don't think this space will mess it up although we'll see when it's time to renew let me know if it messes it up I can't remember if I put the space in before or not so let me just show what it it does oh I can we can just run it straight from Straight From Here says run the following command at 315 a.m every day you can choose any time actually um so this see this is minute hour right so let's uh change this and go to I don't know four the reason being everybody that's done this tutorial and just done the default is putting this in as the time to renew so maybe it would be a little less stress on their system if uh if we renew it a different a different time I mean I'm sure they can handle it but just in case we'll go we'll set it for a different time okay and then the rest of it is I mean this renew is actually the command we want to run uh to renew the certificate quiet means it's not going to Output information and it's not going to ask questions and wait for us to input right because we're not even going to be doing this it's being done automatically so it will get no input if it asks uh this part of it is going to reload engine X if it's actually renewed we do need to reload it for the changes to take effect you probably don't have to run this every day so if we wanted to edit it you could run it you know you have 90 days so you every day is probably Overkill but it's not going to crush your system resources or anything to run it every day if you wanted to so we're just going to save and then if you're a nano you save by hitting controll X to exit that might be a little weird there's no it doesn't say save anywhere so you go to exit but it's going to ask you first do you want to save we're going to type why and then it asks us what we want to name it and we'll just go with whatever the default is okay so now we have the auto renewal setup and let's go back and check our server setup all right and we got an A okay not bad I wanted an A+ I'm not going to try to figure out why I got the uh why I got just the a right now uh normally I can get an A+ on on a Linux server so I'll have to figure that out later on but an a is still pretty good and that's it that's it for the SSL portion of it I'm going to go now to our our node setup and let me bring this over I'm going to copy and paste this in the live chat this is where we're going now and we're going to go so we've done all these things right we've set up Ubuntu we've set up our host name uh we've done we've set up engine X and we have our SSL now we need to install node okay so let's let's follow the instructions uh I don't think I need to do this because I'm already in uh the directory I need to this would just take me back to the home directory I guess we'll do it just to be sure but I mean you can see obviously I'm in I'm in the home directory see I didn't actually move anywhere so I'm just going to use use the default uh probably if I if I had more time maybe I would check to see like okay is there a newer version I usually do check and see you know is there a new newer version of this let's see when this was done this is like November 1st 2016 it's not that that long ago but maybe we might want to run a newer version of of node but this version should be fine and let's see we're going to run it I'm not going to inspect this i' I've done this before when I've I've run this I'm not going to expect inspect it right now because we're R out of time but basically this downloads the script you need to install everything as a bash script so it's like a set of instructions that it'll run automatically and now by running this I'm basically saying hey you know run all those instructions in that bash file so we can see it it's doing its thing it's getting node it's getting it at least all the all the stuff that we need the next step is actually going to you know run this install node all right it actually tells us down here that the next step is to to run this so we going to install it'll probably I'm guessing it'll ask us at some point if we want to do this because it's going to take up some space oh it didn't that's odd it usually does okay now we're going to install this build essential this necessary okay it asked me that time this is necessary for some packages to work so we don't have to install npm separately you can see here it says we've it's already come uh packaged with what we had uh run previously okay and just to make sure this works we're going to okay and I know I usually don't go straight into Nano but this is really simple so we're just going to put it in there and all this is going to do is I mean this is Javascript so this should be somewhat familiar uh if you're used to JavaScript uh we just have a variable here a variable HTTP just require HTTP okay so now we're calling this HTTP we're going to create the server right uh we're going to give it a content type and it's all it's going to say is hello world it's going to listen on 8080 that's like the default uh kind of Port that everything always is on and so that's all it's going to do so a request is going to go to engine X but it's going to get passed along to node node is actually going to process that request and then pass it back out okay well that's that's the idea let's let's see if it works have we not gotten we might not have gotten that far yet right we may have to do some configuration for um for engine expert to work like that but we can test it through the terminal as well so we're going to control X and save yep there we go so we need to make that file executable by default it is not so this is how we do that now we can run it so now the server is running right so it's running on port 8080 so it says we can we can test this we have to open up another window so let's [Music] see SSH at and what is my let me find my IP that should work there we go and oops didn't copy okay so curl if you're not familiar with curl uh this is going to grab we we give it a URL and it's going to grab the data from that URL and in this case the only thing is hello world so it does work now this is not ideal right we've oops I don't need that right now um this is not ideal right we run this manually and then it just sits here and we have to open up a whole another tab or what happens if something H you know this crashes we have to log back in our server manually we don't want that so we want it to automatically re we want to be able to start it and then keep working in the same Tab and then have it automatically restart if something were to happen and to there are different ways of doing this in this case we're just going to follow the default instructions here and we're going to use pm2 we can actually stop this if if you want to stop a process uh you hit contrl C hit contrl C and then that stops uh whatever server you're running and that's the same way like if you're running web pack pack locally or uh you're running a server with uh with gulp it's the same thing contrl C all right so we're going to install this that g flag uh means globally so when you use npm if you want to install something for Global use not just in that particular folder you put the G uh flag in the command all right and now we can start this same thing with pm2 there we go all right so we got a bunch of cool stuff here and now it says that we have we have this running it's the name is hello and you can actually do have a custom name there flags to be able to name it whatever you want and it's online tells you it even gives you some stats about it there's also a dashboard that you can work in so if you go to key metrics you can have kind of this live dashboard that runs in your browser uh so you don't even have to use the terminal to check up on the status of uh your application uh skip this if you did this all right so we want things to run when the server starts up this is how we set that and pm2 H why didn't say pseudo that's kind of weird got the pseudo there there we go okay all right so we're going to copy this and let's actually let's see if we can get the one that it put out let me check the time all right actually we're going to be I got to wrap this up so I can get ready for my meeting we're actually almost to the point where this thing is going to run um you know we just have to finish up this and a lot of this is not you can see some of it's optional uh that second step that I mentioned you have to do with engine x uh it you know this part is just allowing engine X to pass through things to the node server see and that's it uh so really the only step you'd have to do after this is just edit Ting your server Block in engine X to look on uh to pass this through to port 8080 for local host and that really is it and then at that point instead of having it you know instead of starting this hello JS file that we did we'd get rid of that hello.js file we could actually use get to pull our repo of this next uh this react uh site that we're using and we'd run in instead of we've been running next um we running the dev version of next let me show you okay yeah so we run we' been doing yarn run Dev okay but actually I'll show you in my package Json F what we want to run if you're on the server you run you could run yarn or if you don't want to install yarn on the server you could just leave it with npm which is fine too uh so you could run npm uh next build and that'll build your application and then start and when you start it now that will be running instead of the hello JS file so when someone goes to your site they'll see your your react application I'm probably going to do that uh later on today so I won't show you that uh but really that's kind of of all the steps we've just done it's not too difficult uh to do the only tricky thing is like you want to run this with pm2 so you want to make sure I have never gotten yarn to work with pm2 so I always have to use npm as the command instead so like I said you you're an npm build and an npm start start uh but other than that that's the only kind of trick that I've ever the only snag I've ever run into uh with that so this was a long video today don't have as many people sticking around as we usually do I totally understand this is kind of dry it's not nearly as fun as the purely front end stuff which we'll get back to that uh no more server videos at least not for a while so if you are sticking around still thanks I know it was long I know I I don't know if I could have stuck around for this entire video I will I'm not sure exactly when the next time I'll be streaming is I will try to stream the next couple of days when I can uh from the conference or basically from wherever I can get good enough Wi-Fi to stream otherwise I'll have to do some pre-recorded videos and then just upload them whenever I can get some a good connection uh sorry I didn't get a chance to go through all the live chat today I will save this chat and I'll look if someone had some some questions that didn't get answered please post them in the comments uh if not maybe I'll try to save this and maybe in in a later live stream answer some of these questions uh hopefully if you asked it you know you're tuning in again or can at least watch the video later on uh oh cool I'm glad we got some people some people are still here they're still watching awesome uh good I'm glad at least at least some of you got something out of this uh it's tough stuff and you just got to practice it and the thing is if you're doing front end stuff you won't really do this often enough to really you know memorize everything you're always going to have to go back to the instructions and there's always going to be some parts that you just forget uh and mess up on so that's how it happens uh but it is something that you may have to do one day so it's good to at least have seen it uh at least once all right so I only have a few minutes to get to my meeting now thank you so much for watching uh I I'll have some videos for you soon and I'll see you maybe tomorrow maybe the day after have a great day let