React S3 Action deploy

[ChristopherNavo]

Documentation:

Closes #8
Closes #52

Completes PR #34 from Sprint 1 before Friday 2/4/2022
This PR may include Sprint 2

• UPDATE: This PR now includes a github/workflows folder system with a working .yml file that when pushed to development will run a build of the React App in a S3 bucket and run the App via AWS' static Website hosting.

• This PR updated the documentation based on research and testing on how to deploy React to an S3 bucket utilizing GitHub Actions

• This includes a frontend documentation folder to store these instructions as well as future issues on the frontend side that require a document/reference.

• The .md file instructions include:

  • Creating an S3 Bucket (while not directly part of this issue, were included)
  • Setting up the S3 Bucket for Web Hosting (again not directly part of this issue, but included)
  • Configuring GitHub Actions workflow to deploy changes automatically. (these have also been included below since this is the subject of this PR)

(User Story, Total time to complete the Sprint, and Acceptance Criteria can be found on the connected Issue)

File Locations

The S3-deploy.yml file can be found in the .github/workfolder folder for reference
The reactS3Action.md file can be found in the frontend/documentation folder for reference.

Time Spent on Issue #8:

Task Breakdown Description	Approx. Time
Troubleshooting the .yml file to run successfully	4 hrs
Researching Deployment Resources	2 hrs
Setting up React Environment	1 hr
Compile the References to one easy to follow instruction	0.5 hr
Testing Part 1: Create a test Repo, and React App	1 hr
Testing Part 2: Create a test S3 Bucket	0.5 hr
Testing Part 3: Setup the Github Secrets and Workflow	2 hrs
Create the .md file and documentation folder in the frontend folder	2 hrs
Create the PR with additional information and follow-along screenshots	1 hr
Frontend Team Meets (as of 1/24/2022)	3 hrs (total of all meetings)

Time Spent on Issue #52 :

Task Breakdown Description	Approx. Time
Format the existing .yml file to run successfully	6 hrs
Testing: Create a test S3 Bucket	0.5 hr
Collaborate with DevOps Team	1 hr

Gallery & GitHub Action specific Instruction:

On the GitHub Repo:

1. Click on the Settings Tab.
2. Select Secret on the left side menu
3. Click on New Secret to add a secret providing Name and Value:

---

Create key/value pairs for the following sensitive information:

Name:	Value:
AWS_ACCESS_KEY_ID	your-aws-acess-key-id
AWS_SECRET_ACCESS_KEY	your-aws-secret-access-key
AWS_REGION	us-west-2 or other region
AWS_PRODUCTION_BUCKET_NAME	your-aws-bucket

---

Be sure to note the names of the keys:

---

How the secrets will show once submitted:

---

Setup GitHub Actions

1. While In the Github repo, click on the Actions tab.
2. On the Actions page, click on the "Set up this workflow" or Set up a workflow yourself button. This takes you to a new page with a web editor with some container code which can be copied and deleted
3. Copy the container code it generates for the next step.
   

---

Return to your working Branch

1. Create a .github folder
2. In the .github folder create another folder named workflows
3. while in the workflows create a .yml file with a name that describes the action (example S3-deploy.yml)
   

---

4. Paste the filler .yml provided by GitHub
5. Make the following adjustments to the .yml file:
   

---

What this file obtains:

The file is made of 3 different parts to help with the understanding:

• name: The name of the Workflow
• on: what triggers the Workflow, in this case the workflow will run anytime you push code to the required development branch. (It will trigger again when pushed to master but no code will be directly pushed to master in this specific project)
• jobs: Workflow run making up one or more jobs and they run parallel by default:
  • steps: A job contains a sequence of tasks.. Steps run commands nad actions in your repo.
  • actions/checkout@v2: Checks out the repo so workflow can access it.
  • aws-actions/configure-aws-credentials@v1: This configures AWS credentials & region environment for use in other GitHub Actions
  • Build React App: Installs node packages and runs the build in the package.json file, and creates a build folder in the root directory.
  • Deploy app build to S3 bucket: This deploys the newly created build to S3 bucket bucket-name (replace with the name of the created S3 bucket)

To save, click on the Start Commit then Commit New File.
Doing so will:

• Save the Action creating a .github directory with a workflows directory in it.
• It will contained the file s3-deploy (or whatever name assigned to it)
• Trigger the actions assigned.

---

This should successfully complete the setup.

Running the Build

• Once you push the working branch you should run a successful build
  

---

Test the AWS Website

1. Go to the bucket where the app was deployed and make your the files contained in the build folder carried over.
   

---

2. While on the bucket, click on the Properties tab scroll to the bottom to Static Website Hosting to find the bucket website endpoint.
   

---

3. Click the link and it should display the working website! Congrats!!
   

---

Troubleshooting:

• Certain IAM permissions may be needed on the creation of the S3 bucket, utilizing the correct S3 bucket creation format
• As mentioned in the documentation, setting up the .yaml build file may require some additional steps in the jobs portion than what was added to the instruction such as branch names for pushing to and PR requests.
  (See documentation file for more details)

[dansjack]

Well done! I appreciate the thorough documentation.

The action worked as expected and I checked that the site was available at the bucket url.

[dansjack]

This is exactly what I had to install when I mentioned I was having trouble building the app last night!

[peterTorres7]

Nicely done! Very easy to follow instructions.