Build a CI/CD Pipeline for a React App | AWS CodePipeline Full Tutorial | Code With Me!

hey guys this is Lucas from better coding Academy and in this video I'm going to show you how to create a full CI CD pipeline using AWS code pipeline so I've just got a basic react app over here and I'm just going to run this one real quick so just yarn watch like that and I'm going to show you what it looks like right now so right now if we go to localhost one-two-three-four you'll see that it's just a counter it says count zero and then we can go minus one and then we can go plus one and we'll go either way so that's essentially the whole purpose of this thing here is this just a really simple counter but I'm going to show you how to deploy this using AWS code pipeline to an s3 bucket so now let's have a look at that we've got code over here specifically we have tests for each of our components so the root component is just for rendering properly and then the counter component is just so that we can check that the actual counting works properly so we can just control see this here and if we do yarn tests you will notice that it runs gest and then it shows that both pass but then if I go here and like do something stupid like change minus one to be minus 109 for some reason and then we run yarn tests again you'll notice that we get an error for this test because the value is incorrect so anyways now let's make sure that this is running just fine and it is working properly now that we've done that what we're going to do is first and foremost we need to make sure that this code appears on github so I have a github repository over here specifically this one's currently empty just park your lucas AWS code pipeline demo so i'm going to just quickly commit this up onto the repository so i'm going to go here and to set up a repository real quick and I already have a kitten or file to get rid of this stuff up here but I'm just gonna do this bit real quick so add it all in and just commit this and I'm just going to call it from video and then save this real quick close that and then just do a quick get push git remote add origin my bad get at github comm : parker lucas /aw s code pipeline demo dot yes so now we can do git push origin master and now that that is done we can go over to github and you'll notice that we have our first commit here that says from video so now that we have this commit here what we're going to do is we are going to add in the necessary code and configuration to get this working inside of us so first and foremost we're going to go to code pipeline now if yours doesn't say code pipeline over here you can just search for it and find it here essentially this is Amazon solution for continuous delivery also known as CD so inside of code pipeline here we are going to click create pipeline and then this will take us to this page here and we are going to call it AWS code pipeline demo you can call whatever you want but I'm going to stick with this name here and now I'm going to click Next and then for the source provider I'm going to choose github and I'm going to connect to github so this will basically connect to my code which is here I already have logged in and basically authenticated to allow it to do that for the repository just choose the one that you're working on I'm gonna use Parker Lucas AWS code pipeline demo so I'm going to select that one right here and then for the branch you just choose master the reason it is master is because that is the master branch we're using here so now that we've done that we can click Next and for the build provider we are going to choose AWS code build because that's what I chose to use for this video so now that we've done that we can click create project here and we are going to create our code build project so here I'm just gonna call this one AWS code pipeline demo as well you can call it whatever you want and for the environment section here I'm going to configure this specifically for the needs of my project I use managed image over here I use a bun too and then I use run time standard and image AWS code build standard 1.0 this works because code builder only supports in terms of nodejs versions 8 and 10 however my react app works on version 12 so I'm going to use version 12 and in order to use version 12 you have to use AWS code build standard 1.00 actually technically speaking otherwise you have to choose and install runtime it gets quite complicated you can go figure it out in the super complicated Docs but as for now we're going to stick with this but just note that these settings are specifically for react and specifically for nodejs I guess so if yours are slightly different um then you might need to do things differently here so now that we have this we are going to go all the way down here and click continue to code pipeline now that'll take a little while to load but you saw that it actually closed itself and now that we've done that we've got a double u.s. code pipeline demo here now that we've done this we can click Next and for the deploy provider we are going to be deploying to s now the reason we're going to deploy to s3 is because I have a react app so I'm going to just directly build it using code build and then the final disk to files there which contain the bundle jeaious and all of that kind of stuff we're going to put directly into s3 so we're going to create a bucket here and I'm going to call mine code pipeline counter demo or something like that you can call it whatever you want but this is what I'm going to call mine so now that I have this we've got code pipeline counter demo here and I'm just going to save this for now I'm not going to add public access settings or anything like that I'm going to do that in a later part of the video so let's go back here and you might be able to see it straightaway so we just had to choose a different region and then click back and then we've got that one right there and for the s3 object key this one basically means that once you deploy by default code build will produce a zip file and this zip file will be sent to Amazon s3 however in my case I actually don't want a zip file I want you to be extracted at the root so we don't need to specify a deployment path because we're going to extract it at the root of the next three buckets so that way we can see it directly now that we have this we can click Next and go down to the bottom and click create pipeline so now we have our pipeline created and by default it will try to deploy however this won't actually work because our code build has not been set up or correctly speaking we have not set up a configuration file to get this working so what we're going to do is we're going to go back into visual studio code over here and I'm going to create a new file at the root and I'm going to call this one build spec why am L so this is a Yamal file and specifically we are going to be using this to work with AWS so what you need to write here and you can find most of this stuff in the documentation is firstly in version zero point two and then faces and the first phase we're going to work with is called the install phase so specifically for the install phase we're going to be doing a couple things the first thing we're going to do is install a node 12 the second thing is going to be installed on the third thing is going to be in the second section here so install commands and then pre build commands we're going to install dependencies and then for build commands we're going to be doing tests and then build and then once this is done this is alcohol process every single time we run code through the continuous delivery pipeline we first go in store no.12 and then install yarn install dependencies and we do the test and then we do the build so firstly let's have a look at installing node 12 remember how we've selected a bun 2 for this so the way that we install it has to be specifically for a bun 2 so in order to install node 12 let's go back here and go to node J s and on the web site here we can click on other downloads over here let's have a look at installing it by a package manager so specifically this one this section here we've got a Debian and Ubuntu based Linux distributions and we just need to click on this which is provided by node source so now inside of this file key you'll notice that we have support specifically for version 12 for a bun too so we're going to grab these two lines here which we're going to run so we're going to go here and write two lines so first line is going to be that second line is going to be bits now we just need to change this a little bit so get this over there we can close anyways we need to get rid of sudo because it doesn't basically everything here runs as an administrator so you don't need to specify that and you also don't need to specify this here so now we can keep these two commands and actually you don't need to write apt-get in the latest version of ubuntu at is already the same as apt-get and I have to update all other kind of stuff so we can just write apps here like that now for installing yarn we're going to go into yarn pkg comm which is the yarn website got a click on install yarn and we're going to choose Ubuntu so for the Ubuntu version here we first need to do this here to configure the repository so grab these two lines and put them right here so that's the line on top and this line here get rid of sudo there and get rid of sudo here as well and now we have the two things for yarn and then apps install no install recommends yarn so that we don't install nodejs again so now that we have these two we're going to go here and for install dependencies it's really simple all we have to do is type yarn and this will install all the dependencies for us now what we can actually do is I'm along the way here we can actually write echo statements here so we can write like installing yarn dot and then we can write this one like installing no.12 dot dot and then we can do here this one can be installing dependencies lots of thought so we have like these kinds of messages that tell us how we're going and then for this part here we can do echo testing and then echo building so then for the testing all we have to do this run yarn test and yawn test here matches our test script here and then for yarn build which is going to be our build command we just do that and that will delete the disparate Ori and rebuild it using parcel so now that we've done that what we're going to do is write a different section here so go back to the very very left hand side write artifacts and then we're going to do files and then just do this section here like that and this will get all the files and then discard path is going to be note and then base directory is going to be disk so the disk here basically means that this will be the base directory of our final build so that is what we're going to use we're not going to bundle all of this stuff only the disk so now that we have this file what we're going to do is open this thing up again go get status and let's just commit this file so I'm going to commit this and I'll call it add in build spec yeah more specifically for code pipeline so now that we've done that we can save this close that and then do git push let's do step upstream origin/master so that way we don't need to write this every single time now that we do that I'm going to quickly go to Co pipeline and you'll notice that it actually started to compile straightaway so that is because of github web hooks it figures out that when there is a commit to the master branch it automatically starts to compile so in your code you can imagine that you might be working on different branches and for example you might have the master branch you might have a whole bunch of development branches so then when commits are made to development branches nothing really happens but when commits are made to the master branch then all of a sudden code pipeline can be triggered and we can run the tests on code build so then in that case you might only restrict our pushes to the master branch to be only by a certain few users or only with certain permissions or certain tests being passed locally so all this kind of stuff is just an extra line of defense to prevent this whole code pipeline from running amok but this is something really cool and on I really love using code pipeline simply because of how automated it is so you see now the build is currently we can have a look at it ourselves by clicking on details and we can have a look here you'll notice that it says installing no twelve it's installing there and it's installing all of this and then now we are currently still installing nodejs so we can wait on that it's doing that thing there now it's installing Yan Yan is installing it now it's installing the dependencies it's doing the fetch for that and the resolving so this is pretty typical yarn stuff so now that we've done that you'll see that it's is now in the testing phase so it's currently running just is going through both tests and both tests have passed successfully which is really cool now it's building its in the final stage it is building it and then after the build finishes this stage should be complete so you see that we have built and then post build is finished and we have completed the build process you'll notice that the build has succeeded and the deploy now has just also succeeded so if I go over here into s3 and I click on this what would have been empty s3 bucket now you see we have index.html we have the Jas file and we have the map for the Jas file as well so now that we have these now let's make this s3 bucket public so what we need to do for that is firstly go over here into properties go to static website hosting and click use this bucket to host a website and all we have to do is just specify index dot HTML for the index document here click Save and then go to permissions and we are going to uncheck this so that we have public access and just type in confirm here click confirm over there we are going to go to bucket policy and for the bucket policy you're going to write in this section here now I'm not going to lie I found this section online and it worked well for me so I'm just using the same one here so for the name here we are going to call this one code pipeline counter demo so now that we have that this is for getting all the object and essentially it allows us to get all of the objects inside of this bucket so now that we've done this and we click Save you'll notice that we get a little warning here which says that this has public access so now that we've done this we can go back into overview and we can click on index.html and it will give us an object URL now this is a public URL and if you click on this you'll notice that it shows our counter to count 0 minus 1 and then plus 1 so this is super duper cool and that was the whole eight u.s. code pipeline demo but I just want to show you one more time how cool this is so inside of here instead of just writing counter and the number here 4 minus 1 and plus 1 let's add in two more buttons so let's do 1 4 minus 2 and let's do 1 4 plus 2 so now we have four buttons here let's just make sure that this works just fine so I'm going to run parcel real quick and go to here refresh and we have minus 2 and we have plus 2 and now let's add in the tests for this as well decrement button let's rename this one to minus one button minus one button eeo and this one can be plus one button al and then let's add in another button so plus two button here here this is plus two and this one is minus 2 so minus 2 button al and we have our four buttons we have minus one button or minus - button here so after this we expect the value to be minus three plus one button here we expect the value to be minus 2 and then plus two button here we expect the number to be two and then we can just do a random plus one again at the bottom and that should be three so now let's save this and ctrl C that and let's do a quickie on test and our test has an error did I mess up here well we've got a text content of 0 minus 1 minus 3 minus 2 oh my bad so this one here is meant to be 0 and this one here is meant to be 1 totally mistaken there and I'm going to do this one more time and you see that both the test has passed properly so that was totally my bad I failed year 1 mathematics so anyways what we're going to do now is we are going to get status again give ad dot git status just to check that we have all the file stage and then I am going to do updated counter component to include minus 2 and plus 2 buttons so now we save this close that and then we do a git push and now we can watch the magic go on over here you see when I was a kid I actually really enjoyed watching washing machines and I think part of the process was seeing the start to the finish how the clothes went in and how they spun and spun and spun and how it did its own thing and humans didn't have to control the whole process which is why I think I'm also very fascinated by this now you see that it's coming through once again we just went through that now we're doing the build process I love watching this whole thing happen so I'm going to leave it here and we are going to see the whole process finish okay so now we're on to the deploy stage and we're nearly done you can feel the excitement it is awesome it is great to see the code deploying itself making me redundant one day at a time but now we're going on to the deploy stage and the deploy stage just finished so now I can go straight back here refresh and now you see it says count zero but with the minus two and a plus two button on the page it is absolutely beautiful and I love how easy it is to set up a double u.s. code pipeline I hope you guys have enjoyed this video and I look into what I do for CI NCD this has been Lucas with better coding Academy and see you guys later

Channel: Better Coding Academy

Views: 73,987

Keywords: aws, amazon web services, react, continuous deployment, continuous integration, devops, testing, javascript, web development, coding, programming, node.js

Id: zkNdHv1iMgY

Length: 16min 32sec (992 seconds)

Published: Sat Nov 23 2019