Deploying a react application to Amazon s3 and github actions
Tags: aws, react, githubactions, s3
Published: 2022-07-20 00:10:11

Github actions were introduced by GitHub in mid-december 2020, which is a platform to automate developer workflows. Some of these workflows are CI/CD  which involves continuous integration, continuous delivery, and continuous deployment.CI/CD pipeline enables developers to ship software efficiently  & easily and less risky.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b8t7i4f4946ycxzbla6f.png)
**The process of GitHub actions is sub-divided into several components which are**

1.**Event**
We can define event as any specific activity that happens to repository to trigger a workflow .Literally it can a pull request  ,push  ,contribution or even a issue
2.**Job**
This are steps in a workflow that run once a event has been triggered
3.**Action**
Actions are individual tasks that you can combine to create jobs and customize your Workflow
4.**Runners**
A runner is a server that runs your workflows when they're triggered.Each runner   can run a single job at a time
5.**Workflow**
A workflow is an automated procedure that can be configured to execute one or more operations. Workflows are defined by a _YAML_ file that is checked into your repository and run when prompted by an event there, manually, or according to a set schedule.

**To get started ,We will do a demo using a react app .**
_Follow this steps to create a basic react app_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei5p0t8mq4c1j1l8oggv.png)
Then proceed to your github account and create a repository  from github as shown below.Fill the fields as required

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmd79mmdrrptal9qvwke.png)
To set up a github actions you can create directly from the action tab on github as shown below or in the root of your project  create a folder called **.github** , inside it create another folder called **workflows** and in this folder **create a yml file**
Once your done creating your repository ,select action tab
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9beroce7evy0bf4mzqsx.png)
Pick a template you would like to use ,Since we are working on a react application, we are choosing the **node js** as shown below

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drzjrz3esy9emu48jv20.png)
Once you selected ,Click configure to setup and the click to **Start commit** in the far top right corner.By the end of this you would have set up your github action as required.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0o2g7jj85ecr0ag9tkeq.png)

Lets discuss the content of  this **YML file created **
It has the following parts as shown in the figure below
**Name:**
This defines the name of your workflow that is displayed on the github action field.You can call your workflow the name of your choice .
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9hw7ra7lkdbozpxp4hcx.png)
**On:**
It defines the events that trigger the workflow.It can be a single event or a array of events.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hwz614vpl3tykphdz0h.png)
**Jobs**
Jobs define the functionality that will run the workflow
**Note**
By default , jobs run in parallel

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uscx3x9qmh3v2tvq0c3v.png)
**Runs-on:**
Its a keyword that defines the **OS **your workflow should run on.
Examples of runs-on you can define here are **ubuntu-latest ,self-hosted etc**
**Build matrix**
Allows you to test across across multiple platforms and languages
**<u>Example of a sample  yml file</u>**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/goyc9mbc0zw87io4z1b7.png)
Now you have successfully configured your yml  file.

Lets connect with **aws** for deployment

**Prerequisites for AWS s3 **
Amazon Web Service Account
You can create one at AWS  if you haven’t and follow the **steps
Step one . Creating a s3 bucket**

Login to your **aws** account and from the services select **s3**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33jnynlte64jajzizm01.png)
Click on the create bucket account  and fill the details as shown here
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/snvo614mgo8eto5h0ihw.png)
Your bucket will be available here 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fi7k6anxhnaj7xji42kh.png)


**Click** you bucket (mine is called **foodiesbucket-react**)  , select the permissions tab
And make your object public

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyrryvi82bll6bfcv3xw.png)
make sure you edit the object ownership to appear as shown here to  avoid getting the  error **AccessControlListNotSupported:**
Having setup your bucket successfully  , its time to update our **yml file** by adding some **env variables** to connect our bucket with github repository.
Back to your github repository , click on settings the select secrets,in the dropdown select **actions**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqjj5gom4ox92qrca3gr.png)

Click on new repository secrets and we are going to add three secrets ie **AWS_ACCESS_KEY_ID **,**AWS_S3_BUCKET,AWS_SECRET_ACCESS_KEY.**
These keys will be generated directly from your** aws account** by heading to the top right corner of your account then selecting security credentials 
Copy the secrets and add them as shown on the above


We are going to use **jakejarvis/s3-sync-action** which is a simple action to sync a directory (either from your repository or generated during your workflow) with a remote S3 bucket.
**Update your yml file as shown here**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ea6y4rlwbmo0o0m2w3n.png)

After updating the **yml**   re-run your workflow .This syncs your github repository with aws s3 bucket and it updates the changes on your dashboard.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bvkn7nfyvsf95ft97b6.png)
You have successfully deployed your app.
Click on the index.html to visit and click the object link which is the url of your deployed app

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rsv0xyqnqx3lfcs0hvlj.png)


Congrats!!!Lets keep building!.