Deploying a React app with GitHub Actions | Amazon S3 bucket

what's going on guys github actions makes it easy to how to make workflows that include multiple tasks such as building testing and deploying applications right from the github platform in this video i'm going to show you how to set up a workflow to build test and deploy a react application to an amazon s3 bucket by using github actions don't forget to hit that like button and subscribe to the channel and let's get to it [Applause] [Music] first i'm going to create a new repository in github so i'm going to click on create repository and i'm going to name it react actions i'm going to click on create repository and now i'm going to clone this repo locally delete clone let's enter to that folder and now i'm going to create a new react project really quickly so this is npx create react app and i'm going to create that app within this directory the react application has been successfully created now let's open pictures to the code and here i'm going to create a new folder this will be dot github and within this folder i'm going to create another folder that will be workflows and i'm going to create a new yaml file where we are going to put the github actions workflow so this is workflow.yaml okay the name of this workflow will be react ci and first we're going to specify what is going to be the action that is going to trigger the execution of this workflow so here we're going to say on and here we're going to specify that will be when we push changes to the rip so this is push okay and here we need to specify what are the branches where we are going to run this workflow so when we push a change in any of these branches this workflow will be triggered and executed this is branches and we're going to add master here okay and now we need to specify the list of shops that are going to be part of this workflow so this is shops and the first shop will be building the application we can set up for example what is the operating system where this workload is going to run so we can say runs on and we can use for example ubuntu latest there's another setting that is the version for example in this case the node version where this shop is going to run so here we can specify strategy and within this strategy we can say matrix and within matrix we can specify the node versions so this node version and we can set up an array with the versions of node where this shop is going to run let's say 15x okay now let's set up what are the steps that are going to be part of this workflow so this is steps okay first we're going to check out the code from this branch so here we need to use a special action provided by github so it's uses and this is actions and this is checkout at b1 after we check out the code we need to run npm install after that we're going to build the application so see this is run and this is npm build and we can also run for example unit tests so we can say run npm test okay this is a basic workflow where we are checking out the code we are running npm installed to download all the dependencies we are building our application statically and we are running the tests so let's push this initial workflow to the repo it add everything if commit minus m initial commit and now let's push the changes hit push okay now let's go to github so here are our changes and if we go to actions as we can see here the workflow is running let's take a look at the log so the workflow is now starting and we're gonna see all the different actions so he's going to check out the code he's going to run npm install now it's going to run npm run build and now it's going to run the tests after running tests successfully the shop has been completed and we were able to successfully run our first github actions workflow okay now let's add an additional step to deploy the application that we already built into amazon s3 okay i'm going to set up a new step with a new action actually the action from this repo and here we have the details on that project how to use it some documentation and how we can add that step into our workflow so i'm going to use actually this step here i'm going to wrap that from here and now let's go back to picture studio code i'm going to paste that step here there are a couple of things here that we need to set up so here we need to add these three secrets the name of the amazon s3 bucket the access key id and the secret access key i already created a bucket in amazon named react app actions and this packet is public as you can see here all objects can be public so if we push the build holder generated when we build the react application we will be able to access the application as a static website okay and now let's go to our github repository and let's go to settings and here we go to secrets and here i'm going to add the aws s3 packet name i'm going to grab this name from here the other repository secret will be the access key id and finally i'm going to add the secret access key okay and these are the three secrets that we need to set up the s3 packet let's go back and here the source directory in our case will be built the aws region will be us east one okay now let's push this new change to the repo it add everything and give comment minus m adding deployment and now let's push the change git push okay now let's go to our project on github and let's go to github actions now we're going to see that the workflow is going to run again he's going to set up the shop and so as here now is going to build the project required to deploy the application to s3 after it builds that project is going to start checking out the code of our project then running npm install build and finally is going to deploy to s3 so if we go here this bucket will be empty now it's going to build application it's going to run the tests and now it's going to deploy the build folder to amazon s3 okay the workflow finished successfully so if you go to amazon s3 and if we refresh our bucket we're gonna see the contents of the application yes and if we go to the index file and if we click on the object url we're gonna see our application up and running so now let's make a change let's add some title here and we're gonna see how the workflow is triggered again and finally we're gonna see the change here in our website let's go back and let's make a change in our code so let's go to the app.js file and let's say here let's add an h1 let's remove this and let's add an h1 so this will be testing it have actions with react okay and now let's push this change to the repo eat up everything give commit minus m adding message and let's push the change okay let's go back to github and if we go to our github actions we're gonna see a new workload running let's take a look at the details it's going to set up the shop it's going to build the project to deploy the application now it's going to check out the code it's going to install the dependencies again now it's going to build the application it's going to run the tests and finally it's going to deploy the build folder to the s3 packet the workflow has finished successfully and now if we refresh the page we should see the message here yes as you can see here we have our new message with the change that we just pushed to a repo that is testing github actions with react that's all i have for today thank you guys for watching and i see you in the next one take care [Music] bye

Channel: Pragmatic Reviews

Views: 2,589

Keywords: react, react framework production, jamstack, json, bson, javascript, js, web, server side rendering, static websites, Node, npm, Node js, nodejs, react components, react js, reactjs, framework, react framework, typescript, github actions, github, aws s3 bucket, amazon s3 deploy, github actions deploy, react js deployment, github actions tutorial, amazon s3 tutorial, continuous integration, continuous delivery, continuous deployment, react static website

Id: HVw_NZUhDKs

Length: 10min 28sec (628 seconds)

Published: Mon Mar 29 2021