Research: Deploy React to S3 GitHub Action Instruction

[ChristopherNavo]

Documentation:

Closes #8

• This PR adds 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 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 Location

The reactS3Action.md file can be found in the frontend/documentation folder for reference.

Time Spent on Issue:

Task Breakdown Description	Approx. Time
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)

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 deleted

---

3. Change "blank.yml" to an appropriate name (like s3-deploy).
4. Copy and Paste the code snippet into the editor: NOTE: This is a general format and modifications based on the Repo and Bucket setup may slightly change in deployment settings

---

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 dist 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.

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.
  (See documentation file for more details)

[zaks2318]

looks good and very detail, if can add some Known troubleshooting steps to the documentation will better!

[peterTorres7]

The documentation is easy to follow and nicely detailed. I think you just need an initial estimate to complete task. Good job!

[ChristopherNavo]

Thank you guys!

• @zaks2318 I added some troubleshooting tips at the end of the PR
• @peterTorres7 I added estimated time on the connected Issue.

[CourtneyHoppus]

This PR pushes more than the document that was created to fulfill the connected issue.
I believe it was based off a branch that has not been merged yet, and contains those files as well.
Their is also a .vscode file being pushed, I believe those are your personal editor settings, so they should not be included.

[ChristopherNavo]

Deleted the requested .vscode settings.json file that should not be part of the push. Requested change complete. Will merge this branch to once the frontend PR #16 is merged to development first.