Part 2 - S3 Static Hosting

Now that the API Gateway is up and running, let’s strangle out the UI. For this task you will be using an S3 bucket for static content hosting.

Click to learn more about the benefits of strangling out UI (Optional reading)

S3 Bucket Setup

  1. In the AWS Management Console, navigate to the S3.

    AWS Console navigate S3

    You will find a bucket with prefix “unishopui-” in its name.

    AWS S3 bucket

  2. Click on the bucket name to view its contents. You will find that the bucket is currently empty. Please note down this bucket name in your cheat sheet (You should paste it under “Unishop UI S3 Bucket name."). You will need it in the following steps.

    AWS view bucket

Strangling out the UI

Modify API config

Before uploading the static files to S3, let’s integrate them with the API Gateway that you created in the previous module!

  1. Open the folder “SampleApp” on the desktop. Then open a solution file named “UnicornWorkshop.sln” in it.

    project sln

  2. In the solution explorer, open the “config.json” file.

    sln explorer

  3. The value of “host” in this file specifies the host endpoint for the back-end API. To integrate the frontend with API Gateway, please replace the value of “host” with the value of “API Gateway Invoke URL” in your cheat sheet. (If you forget to copy this value to your cheat sheet, please refer to step 10 of this section.)

    Config.json host

    You can now proceed to upload our files to the S3 bucket.

Upload static files

Now start up a new PowerShell terminal. The PowerShell terminal can be found on the taskbar or opened through the search menu.

PowerShell terminal

The PowerShell terminal is pre-configured with the AWS Tools for PowerShell and a default profile has been created with your AWS account credentials. This means you can jump right in and use the AWS S3 PowerShell commands to upload our static resources to the S3 bucket.

Let’s start by navigating into the directory with the static UI files.

cd C:\Users\Administrator\AWS-workshop-assets\net-modernization\FrontEnd\src

Now you can run the S3 cmdlet Write-S3Object command to write the files to the S3 bucket. In the command, replace YOUR_BUCKET_NAME with the value of “Unishop UI S3 Bucket name” in your cheat sheet. (If you forget to copy this value to your cheat sheet, please refer to this section.)

Write-S3Object -BucketName YOUR_BUCKET_NAME -Folder . -KeyPrefix \ -Recurse -PublicReadOnly

The above command uploads all the contents in the src directory to the remote S3 bucket location. The “-PublicReadOnly” flag makes all the files publicly readable. This is essential to allow the contents of the file to be viewed via static web hosting. You can learn more about the S3 cmdlets here.

Verify Upload

Navigate to S3 in the AWS Management Console and click on the bucket once again. Now you will find that the bucket is populated with the static files for the UI.

AWS view contents

Activate Static Web Hosting

In the S3 Console, click on the S3 bucket. Click on the “Properties” tab and then click the “Static website hosting” card. You will be provided with options to enable website hosting.

S3 properties window

Now select “Use this bucket to host a website” and enter index.html in the Index document input box. Note down the “Endpoint” url in your cheat sheet (You should paste it under “Unishop Frontend URL in S3”). Then hit “Save.”

Enable static hosting

Now you are all set! In your browser, enter the value of “Unishop Frontend URL in S3” from your cheat sheet. Then wil will see the S3 hosted application UI. (If you forget to copy this value, please refer to this section.)

S3 hosted content

The unicorns popup and you have successfuly strangled out the UI from the Legacy Application. Now let’s set up Cognito!

Once you load the website you will get a notification “Cognito : Both UserPoolId and ClientId are required.”, this indicates that Cognito is not configured and you will not be able to Login/Signup.