How To Deploy A React App - Using NGINX & Linux

[Music] in this video i'll be showing you how to deploy a react application to a remote linux server on the linux server we're going to use a piece of software called nginx this is going to act as our web server then from our local computer we're going to create the react application and i'm going to show you how we write a very simple deployment script that will automatically push all of this code to the remote server and that way we don't have to do any manual changes on there we can simply work on the project from our local computer run one script and then that will automatically be updated and our application will be deployed now this application will be viewable from anywhere we're going to use the ip address of the machine to view it however if you want to add a domain to this you can do that you just have to tweak a few things after going through this tutorial so with that said let's go ahead and get started so the first thing we need to deploy react application is somewhere to deploy too so we need a linux server for this video i'm going to get one from lenode now lenode is the sponsor of this video and that is why if you click the link in the description or go to lenode.com tech with tim you can get a hundred dollars in free credit for 60 days when you sign up for a new account now that's going to allow you to get a free server here for this tutorial so you can use lenod if you'd like to again you can go to the link in the description get a hundred dollars in free credit or use any linux server that you have access to now i do want to mention here that i'm going to be working with lenod for another series very shortly and in that series we're going to work on a much more advanced portfolio website that's going to act as a really good resume project now i'm going to show you how we build out the website how we deploy the website connect it to a domain and then how we use something called git lab to actually do automatic deployment of code now this is going to look really great on a resume because it shows you know how to build a website you know how to deploy it and you know all of the things about hosting and being kind of a system admin and all of those types of skills so anyway stay tuned for that if you guys are excited and make sure to check out the lenod youtube channel that has a bunch of projects similar to that i'll leave that in the description for now though i'm going to sign into my lenode account because i already have one once i'm there i'm going to walk you through setting up our lenode and then we will actually ssh into it and start doing all of the setup for our react application deployment all right so i'm on the leno dashboard here i've just signed into my test account where i don't actually host any of my real projects but i do want to mention that i've been using lenod for well over two years now i have a few websites hosted with them some databases a kubernetes cluster and they've been nothing but great great service great uptime and it's actually quite nice whenever i've had a problem i've just picked up the phone and called them and i've actually had a human respond to me which is uh quite nice in 2022 considering it's actually quite a challenge to get to a real human on a lot of support lines so if you guys are considering a place to host your website or project i would definitely recommend lenode and well that is why i've been working with them for so long on this channel and why they are sponsoring this video anyways we're going to click on create lenode here you can also do that from the top click create lenode and i will mention that they do have some one-click installs here from the marketplace so we don't have to run through all of these setup steps but i just want to do it from scratch in case any of you guys aren't using lenode so they have like django flask git lab me and mongodb etc so you can probably find one in here for your project that you're hosting but i'm going to do it from scratch again because i'm not sure if you guys are going to be using lenode or not so i'm going to choose my distribution as debian 11. debian 10 would work as well i'm going to go region for now i'm going to go toronto and then we have to choose our lenode plan now the cheapest plan they have is the nanoed one gigabyte which is just a shared cpu it's five bucks a month however for a react application it's probably best to go with something a little bit stronger so i'm going to go with the dedicated server here with eight gigabytes of ram you could probably do four as well again this is just for testing so it doesn't really matter too much for now though uh for the node label i'll just call this my react app and then i need to put in my root password make sure you do not forget this password alright so now we can just go down here and click on create lenode this is going to take a few minutes to be created and once that is done i will be right back all right so my node is now running and what i want to look for is the ip address now i can find that by looking for the ip address right here the ipv4 or just copying this ssh access which is what i'm going to do so i'm going to copy this right here and this is what we're going to use to well access the note so open up a command prompt or some type of terminal depending on the operating system that you're on and then simply paste in that command looks like i didn't actually copy it though so let's hit that button one more time so paste that in ssh and then root at whatever the ip address of your server is and hit enter you're gonna have to type in yes here and then enter the password so let me enter that right now you won't see anything when you're when you're entering the password keep that in mind you still just need to type it in correctly okay so let's clear the screen now we are signed in to our server and we can start setting this up so the first thing that we actually want to do here is just configure a few things to have some better security on our server since this is going to be on the internet it's going to be hosting a website we want to disable the root access so that no one can sign in as the root user and do anything malicious with our server so the first thing that i'm going to do is just type apt update like this just to update all the software on our server we're then going to upgrade we're going to configure the time zone which is usually just a best practice and then we're going to disable the root access so i'm going to type apt upgrade here after i have updated i'm going to hit y there run through all of this and as i said the next thing that we want to do now is configure the time zone now depending on the distribution you're on this command may vary but i believe we can simply use dpkg hyphen and then re and configure if we could spell configure correctly like that then we're going to type t z data like that standing for time zone data hyphen set and then time zone like that okay now when we enter that we should get some type of graphical user interface pop up where we can select our current time zone so i'm going to go to where i am which is not africa america and i'm going to look for toronto which is the closest city to me now of course look for whatever city is closest to you for the time zone here in this case i'm going to go toronto okay enter and now i believe i have configured the time zone we can see that right here so local time is 1802 so 502 which is correct and if we want to check that we can just type in date and sorry not 502 602 is the the correct time okay so let's clear the time zone has now been set now that we've done that we want to create a new user that we're going to be able to sign in as and then disable the root user so i'm going to type add user like that and then i'm going to put my name as tim when i do that it should ask me for a password for this user so i'm going to enter the password now let's enter it correctly a second time okay and you can enter this data if you want but i'm just going to put the full name and then go from there okay so i've now created a new user that i can use to sign into this server this is the one we want to use from now on because we don't want to be using the root user we want to disable that one however we need to first add this user to the sudo group that way we have access to administer privileges right so for now i'm going to type add user tim and then sudo and this will add tim to the sudo group perfect and now that we've done that we just want to test and make sure we can sign in as tim and then we can disable the password for the root user so that you can't sign in as it so let's clear let's type log out okay and now i'm going to ssh and i'm going to ssh as my new user which is tim when i do this now let's type in the password okay and there we go we've signed in as tim at localhost everything is work so now that we're signed in as tim what i can do is disable the root user password so i'm going to type sudo and then pass wd like that hyphen d and then root and this is going to remove the password from the root user now i need to type in my password to be able to do this and there we go that's all good now we also can lock the password we can do one or the other or we can do both which is what i'm going to do right here so sudo pass wd hyphen l root this simply locks it so we've now deleted it and then locked the password and now you cannot sign in as root and if we want to test that we can try so let's try to sign in as root let's type in the password we had before and we should see this no longer works and there we go access denied right so let's get out of that and ssh now as tim and then configure or continue with the rest of our setup all right so now that we've done that we're going to start working with nginx so we need to install that so we're going to type sudo apt install and then nginx like that we're going to hit y for yes and install that now that we have installed that though what we need to do is make a folder where our source code is going to live so let me clear that we're going to type sudo mkdir this is going to be in var www slash and then here the name of the directory is going to be the public ip address of our server or the domain that you're using when you're hosting this website so it's going to be one or the other in my case i don't have a domain so i'm just going to use the public ip address which is right here so let me copy that and paste that in okay so let's hit enter here we've now created that folder now that we've done that we just need to run two commands here that are going to change the permissions and ownership of this directory i'm not going to explain exactly what these are going to do but just follow along i'm going to type sudo chmod 755 hyphen r and then we need the path to the directory we just created so let's put that in what this allows us to do is essentially have everyone be able to access the contents of this directory that's about as far as i'll explain that and then next we're going to have a pseudo ch own hyphen r and it's important here that you put the user that you created so in my case i created the tim user i'm signed in as tim if you made joe whatever you're going to you know place that here whatever user you're currently signed in as then i'm going to do www hyphen data and then slash var slash www slash and then the name of our directory and hit enter now this is going to change the ownership so that the current user is the owner of this directory and the reason we need to do this is so that when we actually run our deployment script which we're going to do at the end of the video it allows us to update the contents of the directory it's doing a little bit more than that but that's kind of the best way that i can explain that without making this overly complicated anyways you don't have to understand how these work but that is what we're doing for now okay now that we've done that we need to make a configuration file here for nginx to kind of link the directory that we just created so the way we're going to do this is sudo nano and then we're going to type slash etc this is going to be nginx slash and then sites available and then we're going to make the name of this configuration file the same name as the directory that we just created so it's going to be 192.53.122.115. again if you're using a domain then you would put the domain here okay so let's hit enter and now we're going to type in our configuration file so this is going to be server there's going to be two curly parentheses like this or curly brackets whatever you call them we're going to say listen and then this is going to be on port 80 if we type listen correctly we're then going to type listen again we're going to type colon colon inside of a set of square brackets and then colon 80 like that and then a semicolon then we're going to type root and for root we're going to put the path to the directory where our code's going to live which is var slash www and then it's going to be the public i p address again if you had a domain you'd put that there and then lastly we're going to say that our index is equal to index.html okay so that's all we need for our configuration file i've just saved that with control s really the only thing you should need to change here is this so that it's equal to whatever the name of your directory is don't worry too much again about exactly how this works and what it's doing it's just required for nginx and you do not need to understand it to be able to host the website but i will mention that index.html it's important that where your react app is kind of being injected into is called this and if you created your react app with create react app from npm or npx or whatever the command is then this will already be set up for you but just make sure your base html page is index.html okay so let's exit out of that now that we've created the configuration file uh what we need to do here is just test nginx and see if it's still working so we're going to type sudo nginx hyphen t standing for test and when i do that it says the configuration file is okay configuration file test is successful okay however what i do actually need to do here is i need to unlink the default configuration file and link the new configuration file that i just created i forgot i need to do that first before i run this test so i'm going to type the following sudo unlink like that and then this is going to be slash etc engine x slash and this is sites enabled and then this is going to be slash default now this is going to unlink the default configuration file and we're going to kind of replace that link with the configuration file that we just created so now we need to make a new link again don't worry too much about exactly what this is doing but i'm going to type sudo ln hyphen s this is going to create a symbolic link i'm going to type slash etc and jinx uh or nginx slash sites and then this is going to be available make sure you do available not enabled here and then slash and then the name of our directory which is right here and we're going to link this with slash etc slash nginx slash and then this is going to be sites enabled like that okay and hit enter all right so now we have removed the default link and we have made a link to our configuration file and now we're going to type sudo nginx hyphen t and make sure that this is all working and it looks like it is okay now that we've done that we are going to restart nginx so we're going to type sudo system ctl and then this is going to be restart njinx or nginx like that we can rerun the test if we want and everything is all good okay so now that we have done that we are pretty much finished everything that we need to do on the remote linux server we now need to simply deploy our code to the directory that we created because again that's where our code is going to live and we're going to do that from our local machine so let me get out of here go to my local machine let's create a react application and then deploy that all right so i've gone back to my local machine here and i'm just going to ask if you haven't already just download git and also make sure you install git bash if you are on windows now if you're on linux or mac you don't necessarily need to do this but on windows it's going to be easier for us to use git bash to do the rest of the tutorial so just install that and once it's installed you should just be able to type git bash like this and open that up if you're on mac or linux then you can just use your default terminal because the commands we need are already installed on mac and linux i'll leave this link in the description by the way it's just git hyphen scm.com downloads you also can just google get bash or git download and then of course go to go to this page okay now that we've done that i've just opened up a project here in visual studio code just because i'm going to create my react app in here and just edit actually one or two files so i'm going to create a react application i assume most of you already have one but i'm going to type mpx and then it's going to be create react app and let's just call this demo for now that's going to take a second and of course to be able to run this command you need node.js but i assume if you're watching how to deploy react app you have node.js installed and while you have a react app that you'd like to deploy alright so the react app is finally finished being created and let's just open this up quickly in here now one thing i want to note is that for what i'm about to do next you need to make sure you have this build command because what we're going to do is build the react application and we're then going to transfer this build to the server and the server will then kind of display that build right or we'll be able to access the contents of the build so just if you don't have this build command then this isn't going to work so make sure you have some type of build command called build built into your script here for your react app anyways inside of this application i'm going to make a new file here and i'm going to call this deploy.sh alright so this is going to be a shell script that we're going to run and inside of here i'm going to write a very basic script so i'm going to type echo and then this is going to say switching to branch master and the command that we want to run here is going to be git checkout master just to make sure we build from the master branch so i'm going to type git checkout master essentially we're going to run this script every time we want to push the most recent code to uh what do you call it to our server so you can modify this how you see fit but there's only a few commands in here anyways so okay okay so switching to master branch git checkout master echo is just like the print command right we're gonna type echo and we're gonna type building app and then dot dot dot and then i'm gonna type npm run build again you need node.js installed here on your local machine then i'm going to type echo and deploying files to server dot dot and then here this is the command that we really want to pay attention to we're going to use a tool called scp which allows us to perform file transfer we're going to type build slash and then we're going to put in asterisks here and actually we're going to do sorry scp hyphen r and then build slash asterix which stands for all of the files inside of the build directory as well as any of the directories in there and actually this is a lowercase r for recursive mode okay and then where do we want to put this we want to put this uh to tim at and then the ip address of our server which do i still have it on the clipboard i do okay and then this is going to be colon slash var slash www slash and then again the ipaddress of our server and slash so let me break this down a bit we're saying scp which is kind of the file transfer command hyphen r standing for recursive mode we're doing build slash and then in asterix the build folder will be created inside of our react application when we run the npm run build command then we're saying where do we want to put this well we want to put this onto this remote server so we're saying tim which is our user at and then this is going to be the ip address of the server story and then where on the server do we want it to go we want it on slash var slash www slash the name of the directory that we created which tim is the owner of and has access to okay now that we have done that we can echo done exclamation point and that's all we need for this sh file okay so now that we've created the deploy.sh we just need to change the permissions so it's executable we then can run it and everything will be good and we can actually view our application live so now let's open up git bash now if you are on mac or linux you don't have to open git bash you can just go to any terminal and i'm just going to cd into the directory where my react app is which is on my desktop so i'm going to type cd desktop i have this test react app folder and then i have the demo folder and in here you see i have all of my stuff and i'm going to run the following command which is going to be chmod and then this is going to be u plus x and then deploy dot sh notice deploy.sh is inside of the current directory where i am i'm going to hit enter that will change the permissions for this file now i don't actually know if this does anything on windows but on mac and linux you will need that to make this an executable file and now that we have that we're going to type dot slash and then deploy dot sh and this should actually just run the deploy script for us so let's hit enter okay so it's going to start running this switching to branch master rdl master building app okay so it's building it here using that npm build command then we should see an echo for deploying it then we can go look on the server see if it's deployed and visit the public ip address of our server and we should see the react app okay it says deploying files to server i spelt server wrong of course i need to type in my password to sign in here so i'm going to type this in hit enter okay all my files get sent over there and then we have done nice now if we go here i can ssh into my server i just need to resign in because i signed out so let's go here okay let's cd into slash var slash www slash and then this and then ls and notice all of the files here for my website are here and i have my index.html nice so now that those are all there all i need to do is go to my browser and just type in the public ip address so let's paste oops that's not what i wanted i guess i can just grab it from here so let's copy that and let's paste it and hit enter and notice i get my react application there we go now if i want to actually modify this application all i have to do now is let's i guess keep that open we can close this for now though i can go to say my src and my app.js and let's change the p tag here to say tim is great exclamation point i'm going to save that go back to git bash or again just any terminal if you're on mac or linux re-run that command we'll have to type in our password again once the build is done and then you'll see it will be updated on our server so now whenever you make a change you just run the deploy script right it will deploy of course you can change it if you want to and you will be good to go alright so let's type in the password okay hit enter all right let's go here and let's give it a refresh and notice that now i get tim is great there you go we have just deployed a react app location now it is a little bit more advanced than this when you're dealing with a back end and a database and domains and all that type of stuff but if you're just trying to host some type of hobby project here then this definitely will have got you up and running or at least gave you kind of a good starting point here on how to host a react app so with that said i am gonna end the video here there is nothing more for me to show you there is a guide that has a lot of these commands in the description in case you're getting a bit lost you want to reference it and read more about what i was doing with that said though if you guys enjoyed make sure to leave a like subscribe to the channel another massive thanks to lenode for sponsoring this video and i hope to see you in another youtube [Music] video you

Channel: Tech With Tim

Views: 54,456

Keywords: tech with tim, how to deploy a react app using NGINX and linux, how to deploy a react application, what is a react app, what is NGINX, how to use NGINX, linode, what is linode, how to use linode, server creation, securing a server, how to secure a server, how to configure NGINX, NGINX configuration tutorial, programming expert, how to code with react, how to program with react, how to code a react app, how to program a react app, linux server, engine x, what is engine x

Id: KFwFDZpEzXY

Length: 23min 8sec (1388 seconds)

Published: Sat Apr 02 2022