ReactJS Automatic Deployments w/ Github Actions

hey what's gonna guys it's Anson so I'm gonna show you guys how to set up get up actions with a react application for your virtual private server so right now I have this sub router over here for my domain name and you can see I have a sample react app now let's say if I wanted to make a change so this is the production application right now and let's say if I'm working on my app and I say hey look I want to make a quick change let's say I don't like this hello world but what I'm going to do is I'm going to just get rid of this P tag and I put a save and I'm ready to deploy everything so I'm gonna go ahead and just simply do a git add git commits employee then get push so we're gonna push all of our changes to github and we should get an action that gets triggered so we're going to have AQ job right now so just give it it roughly takes about couple of seconds I think each job took about an average of 50 seconds so it really just depends so right now this job is in progress it's going to run through a series of steps you can see that it's going to install all the dependencies then it's going to run NPM test build and then this is a custom script that I wrote that just changes directory and I'll explain a little bit why I did that so yeah our build just succeeded so now if i refresh this page you can see that on the production server all of our changes have been taken into account and we don't have to manually transfer all of our files from our local machine to our production server we can like get up actions to take care of that for us okay so the first thing that we're going to do is I'm going to just simply generate an application with create react app okay so while this is generating I'm gonna go ahead and just be a new repository I'm assuming that most of you guys already have a project set up already so you obviously can skip this part for the repository can be either public or private this really matter so we're just going to create this repository way to just copy the URL okay sorry react application is done I'm gonna sit into it and iterate initialize the repository would get already so we can just simply add git remote origin so I'm just gonna add my git repository so now we just open this up introduce you a code now you could just directly create the workflow on get up calm so you can just click on actions you can scroll down and you can click on where is its nodejs right over here so you want to separate workflow for new cheese and you can name this whatever you once couldn't egos react so you could just set everything up over here and then have it commit to your master branch and then you can just push everything get up but I'm just going to go ahead and create this on my local machine so I'm gonna create a new folder called github so I'm creating a subdirectory called workflows inside the dot github folder I'm gonna create a new file called react why no I'm just pasting all this that was coming from over here so let's just go through this really quickly so basically this is the name of our workflow so you can name it whatever you want in the act CI CD on this property over here these are all the events that you want the workflow to trigger for so let's say for example you can see that we have a push event so whenever you make a push to your repository on this specific branch on the master branch then this whole workflow is going to get triggered so you can type in whatever branch you want so master deploy production we're going to use a deploy branch so I'm gonna have to create a separate branch later and it also works for pull requests to and after on we're going to go over to jobs and this is basically the job that you want to execute you can execute as many jobs you want but let's go inside build and runs on so you can actually use get up actions that is hosted on the github servers itself you don't have to use your own virtual private server let's say if you don't have a VPS that has a lot of RAM to spare you might want to run the get up action runner on the get up servers and then have get up actions SH into your server and then pull the latest files into your server but we're going to change this to self hosted because we're hosting this on our own server and down here we have a strategy matrix so you can actually run this whole job on different versions of node so you can see that it's running on version 10 12 and 14 I'm only going to do it for version 14 for now and then down here steps so these are all of the steps that you want the bill to go through so you can see that MP mci clean install I'm just going to change through NPM install and I'm going to change the order so I'm gonna have test go first and then build after and we do have these scripts so it's not going to fail so if you're missing any of these scripts then this whole build will fail and if one thing fails then the entire build is going to feel ok so what we're gonna do is we're going to go ahead and create a new branch locally and then we're going to push everything to github ploy ok so we're pushing everything to our deploy branch because you don't want to deploy directly on master so you can see that we have deploy right here if we click on actions you're gonna see that it's going to give us a build failure right we have this whole new tab over here you can see deploy and it says no Runner matching the specified labels was found ok so this next part we actually need to go into our virtual private server and we need to actually set up the github actions runner they're gonna go over to settings and you're going to click on actions and then you're gonna click on add Runner and it's going to give you a bunch of different instructions well right now I'm on my server I'm just gonna create a directory called hello react I'm gonna see the Intuit and we're just going to copy this command download the latest render package and you can see that you can select whichever operating system you want in the architecture so we're just going to copy this so this is going to download the Targa GZ file and we're just going to copy this command which is going to extract the installer you should get a bunch of files so the next thing that we want to do is copy this command under configure so it's gonna ask you enter name of the runner so I'm just gonna name this pillow react and then we're going to skip this part for labels and then enter the name of the work folder I'm just going to name this he'll overreact so we're good to go and now to run everything we can just use this dot run SH file we can just execute this but of course this is going to block everything so if you ctrl C out of its gonna stop everything so you can actually use the dot SPC SH command so we have to use sudo to run it so if I do sudo dot slash SVC that sh you can see it shows you the usage so there's a bunch of commands so we first need to install so there we go we've installed it and then we need to start the service oh whoops start okay there we go so you can see that it says running and we can use the status command you can see that it says active running okay good so if you don't do this part then your job is never going to execute it's just going to stay on queue forever so now instead of recommit Andry pushing everything I can actually just go over here to the fill build and I can just rerun the job okay so now it's going to say be running jobs and you can see on github the job is starting and see right over here it says running job okay so it's setting up the job it's gonna take a little bit so just give it a couple seconds so it goes to all these steps using new cheese fort version 14 it runs NPM install NPM test from Build ok so everything was completed now if I go back to the server and if I LS you can see that we have this hello react Hitler so that was the name of folder and in the hello react folder sir you're gonna see the into hello react hey this is the name of your repository and you're gonna see the again and then now you can see that we have all of our files and we have this build folder the next step that we need to do to actually get our application live is we need to set up nginx to point to this build folder ok now there's actually a bunch of different things that you could do you could try to move this folder into the VAR /ww folder on your server there's a whole bunch of things you can do I suggest you guys to try things out yourselves but just for simplicity what we're gonna do is we're gonna actually have to add another step and this is something that I wanted to do because basically with nginx the way I configure everything is we're gonna change this folder to the actual production folder so it really depends on how you have everything set up so since I am running everything on a sub route as you can see right over here what I'm going to do is I'm going to write another command that's going to change the name of this build folder so MV say I get the current working directory so I'm going to change that to the subdirectory the sub route that I want to visit for my domain so you can see right if you does test react app so I'm gonna change this to hello yeah you can obviously I don't have this route with nginx configured right now so we're gonna have to configure it later I'm going to go ahead and just push everything again so now you should see once everything is done the build folder should no longer be billed it should be hello react so in goats actions we can click on the ploy and if i type LS you can see that all of our files are gone so basically replaces the files every single time and it's going to run the build see how this last script is just going to change the directory the build directory - hello react shouldn't take too long ok cool alright so another tip LS you're gonna see that the name of the directory is hello react of a CD into it we have all of our files the build files ok cool so I'm gonna go ahead and just copy this whole directory I'm gonna show you how I am going to configure my server okay cuz like I said it's gonna be different for everyone if I go over to hello react right now you're gonna see that it's a 4/4 not found so we're going to go into sudo vim TC engine exercise available so I'm going to configure my server block right now and let me just go down to 160 line 160 ok so I'm going to set the location as hello react and since the sub route is hello react as you can see right over here so this is why I needed to change the bill fooler - hello react because that is going to be the same name as the subdirectory and you want to delete the part with the subdirectory so it's basically going to point to a previous directory that holds the subject unlike this okay now if I save this and if I restart and remember like I said your engine ik configuration might be completed from their mind now if i refresh you're gonna see that I actually get an error they actually had this before you're gonna see that it says fill to load resources and the reason why this is happening is because right now if we actually go to network tab you're gonna see that's not found there are a couple ways that you can fix this again it's different for everyone because it depends on your configuration but I'm gonna show you how I'm gonna fix it so what I'm gonna do is I'm gonna go into my package JSON file and I'm gonna go and in your line and for the home page I'm going to set it to hello yeah now I'm going to build everything again so now it's going to build it with a new home page okay so now you can see we get a 404 not found which is the reason why it's because of the build folder so just change this to react there we go okay so this was a little bit tricky so basically what I did was I just changed the home page that he'll react and it seemed to work apparently that fixed it though actually had a different issue where my CSS files were actually being mapped to a different location like I had this issue where all my CSS files were going to the subdirectory slash subdirectory I'm not sure why exactly that was happening apparently that seems to have fixed it but if you have any issues let me know and not some of us to find a solution for you but let's go ahead and do one last thing so on my local machine I need to set the home page and let's go ahead and make a change so let's just do P tag a little world be all good to go we have our work flow set up correctly okay good so we're gonna go ahead just again and yeah this is my nginx config right now you can see I have a bunch of other locations for my config and this this right over here test react app this is what I had to do previously I had to rewrite the URL because you can see it right over here that I had a bunch of different Jas and CSS files that were being directed to slash test react app slash test react app and I wasn't entirely sure why that was the case it was very tricky because I had the same exact folder structure but I'll have to look into it later though you can see that right now our application is currently down we have a 404 once this is done refresh and you can see we have our hello world changes right over here and everything seems to be good so yeah like I said before your nginx configuration is going to be different everyone's nginx configuration is gonna be different it just really depends on how your server is set up though I'm not sure if you'll have any issues with react routing but if you do any issues please let me know in the comments down below I'll be happy to try to find a solution for you so anyways hopefully this video I hope you guys out and like I said please let me know in the comments if this works out for you if it doesn't and yeah see you guys in my next video peace

Channel: Anson the Developer

Views: 6,651

Keywords: discordjs, discordjs v12, discordjs version 12, discordjs tutorial, discordjs v12 tutorial, discord bot, how to make a discord bot, how to build a discord bot, how to code, discordjs tutorial series, javascript tutorial, how to code in javascript, async, await, full stack development, web dev, html, css, javascript, js, deno, typescript, react, ci, cd, gh actions, github, github actions, github action react, nginx, angular, vue, automatic deployment, deploy, website, deploy react

Id: encpjND99xU

Length: 12min 21sec (741 seconds)

Published: Tue Jun 16 2020