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.
S3 Bucket Setup
-
In the AWS Management Console, navigate to the S3.
You will find a bucket with prefix “unishopui-” in its name.
-
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.
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!
-
Open the folder “SampleApp” on the desktop. Then open a solution file named “UnicornWorkshop.sln” in it.
-
In the solution explorer, open the “config.json” file.
-
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.)
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.
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.
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.
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.”
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.)
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.