Clouds and cages.
Tags: aws, html, cloud
Published: 2020-11-03 14:28:04

After 5+ years of being a backend DB2/Mainframe support engineer, I wanted to gain a deeper understanding, of front-end web development and AWS. After completing my AWS (Developer & Architect) Associate level certifications, I felt confident in trying out some practical stuff. 
I came across a LinkedIn post saying something about a #CloudResumeChallenge by Forrest Brazeal and decided to give a try.  https://cloudresumechallenge.dev/instructions/
The headline of this article is not an analogy for Cloud and Legacy systems, both are elegant, both will last.
It rather signifies the combination of JavaScript and API calls.
So here is the site I created:

www.komlalebu.com

It is basically my uninspiring resume hosted in S3. But what is inspiring is that visitors can leave a like (or dislike) at the bottom of the page. The feedback data is the stored in a DynamoDB table, with the wizardry of API Gateway & Lambda.
There is a visitor couter on the left which is a CountAPI JS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hmpnu71t6b8typ69vcxx.JPG)
The (Visitor number + Feedback) is stored in ID field, field 2 is timestamp. However nothing is stored without an onclick API call. 
The architecture diagram of the project is shown below, with the users accessing the site from  R53 from a AWS hosted domain. Yes the AWS account belongs to me. Sometimes the AWS monthly forecasted cost freaks me out, however it is usually inaccurate.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zfhf99kaky9ap34jus9i.png)

The plan was to setup up the S3 static website in Cloudfront distribution, with SSL certificate obtained from ACM, and putting the Cloudfront domain as an Alias for my hosted domain : www.komlalebu.com.
However this did not work work for me as I was getting 403 error(possibly something to do with bucket policy)
Cloudfront domain: https://d1cs****jgtcb8.cloudfront.net.
But I managed to assign the S3 static website URL to a CNAME for my sub-domain: blog.komlalebu.com
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m84no97brmuxlyxkhtwa.JPG)
Here is a look:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dpb1pzrh1jnckxmy7d39.JPG)
The name of my bucket is blog.komlalebu.com, where index.html, error.html, style.css and the website image files are stored.
These may be redundant information for the pros but this is my blog.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/735gfbimgha0irz6b794.JPG)
Coming to the API Gateway & Lambda integration, whenever a visitor decides to like/dislike the website, an API call is made to the Lambda function using JS.
The API  gateway does a POST on Lambda, where a Python script is used with Boto3 functionality to save the call (JSON string) in DynamoDB, and provide appropriate feedback to the webpage.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1updux9051h4jwn7xhys.JPG)
The API calls to Lambda function has been tested in Postman.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e8p0zz58ajrc6vd10w6f.JPG)
This project has been an eyeopener for me in understanding the power of the cloud. However I still haven't completed the challenge due to insufficient knowledge of SAM. 
I developed the frontend with help of HTML, JS tutorials. Styling maybe off on the buttons and UI as I don't have much CSS knowlege yet, but I did use custom API for icons and texts.
If you have read this far, all I can say don't let the cages keep you from the cloud. Take care.
https://github.com/jicoing/git-komlalebu


#Update - 11-27-2020
#5. HTTPS -Completed!😃
I have finally managed to make the website secure.
URL: https://www.komlalebu.com
First:
I had to setup a certificate from ACM - with domain name www.komlalebu.com
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/upagpv3ir8l1y7oj5nnb.JPG)
Second:
I had to setup the cloudfront distribution with requested custom SSL certificate, and also configure the alternate domain name
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vvnd1oigzae3n0puhknb.JPG)
Third:
I had to setup Route53 with a record with name www.komlalebu.com and the Alias value pointing to the cloudfront distribution.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/muemn5ycukiboetf9hgf.JPG)

#Update - 11-28-2020
Improved the UI.
Used css elements on the buttons.
Updated icon and title.

#Update - 11-29-2020
Apart from storing the feedback data in DynamoDB, the character animations now change based on the feedback of the visitors.
The animations are made in MS Paint and iOS Shortcuts.

#Update - 11-30-2020
The website is now responsive and compatible for mobiles devices. Should have started from them, but its all good.

#Update - 12-01-2020
The UI looks cleaner now. I had to learn HTML and JavaScript extensively to make the top animations. Preloading the images into the browser cache, so that they transform smoothly on button click. 

#Update - 12-08-2020
Added QR support.

#Update - 12-13-2020
Added UI accordian.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ptyo9igwfchbmdwjimj6.gif)

#Update - 12-16-2020
#15. CI/CD (Front end) -Completed!😃
I have managed to integrate GitHub Actions to push code changes in frontend files to AWS S3 using workflows. The IAM role should have privileges to access S3.
Reference: https://github.com/jakejarvis/s3-sync-action

My cloned repository from Github to local.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rr8u4j4o7rz87hynt7i9.PNG)

CMD git commands to push commited files to master respository.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/j67t0x5sjvzdpbsdfdaf.PNG)

Github actions workflows syncing with S3 once files are pushed.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lquvfy9qj8b9v3jw5ld4.PNG)

Updated S3 bucket automatically on git push from my system.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixh2gxg4azopgf11g1qg.PNG) 

My Frontend repository: https://github.com/jicoing/git-komlalebu

#Update - 12-24-2020
#8. Database -Completed!😃
The page onload will make API calls to the lambda function that will push the visitor count data to the backend DynamoDB table.
The visitor count is fetched using CountAPI JS.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6m6jgcpxqjjnhsduojlo.PNG)

The lambda function will return the below response once the backend table is loaded.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/torfl7x3g0rv66ajv672.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wbhbpmu4lvn6pot15ycm.PNG)

#Update - 12-25-2020

Added dynamic events/day/night indicators.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kpor3kl3tjhqnezo3zdi.PNG)

#Update - 12-30-2020
12. Infrastructure as Code -Completed!😃

[Read more](https://dev.to/jicoing/12-infrastructure-as-code-1df4)

#Update - 1-05-2021
12. Added a background image made in `MS Paint`.

#Update - 1-07-2021
13. Setup CI/CD backend with Github action deploying SAM.

#Update - 1-11-2021
14. Setup a visitor stats HTML table, combining stats for visitor counter, likes, dislikes. 
* likes - I had to setup a separate API and Lambda function that runs a table scan on the backend table `komlalebuTable` that fetches the records based on DynamoDB `FilterExpressions`. On clicking `like` the user stores data in dynamodb table with the string `YES` appended to the visit count.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c4kpacvdjp83icuylzc3.PNG)

There is a separate lambda funtion that scans the table with the primary key `id` containing the string `yes` and gives back the result count. This function is called by a separate API everytime the page gets loaded.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t6736b134ge4irdsnhmt.PNG)


* Dislikes - I had to setup a separate API and Lambda function that runs a table scan on the backend table `komlalebuTable` that fetches the records based on DynamoDB `FilterExpressions`. On clicking `dislike` the user stores data in dynamodb table with the string `NO` appended to the visit count.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sdmqfflxwsv0yax9dld9.PNG)

There is a separate lambda funtion that scans the table with the primary key `id` containing the string `NO` and gives back the result count. This function is called by a separate API everytime the page gets loaded.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xop10c2w5854a03ryhah.PNG)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pcxrky1puawhzz9trptw.PNG)

#Update - 2-11-2021
14. Setup a comments section for my website.

I did not use any third party commenting platform, but rather chose to go with my [DynamoDB table](https://dev.to/jicoing/8-database-2cl4) to store the contents of the `textarea` or comment box. Whenever a user leaves a comment, the previous comment is overwritten. This is only suitable for only one comment for now. No user information is stored, they are only identified by their unique `visitor count`. Dynamodb is scanned using separate lambda functions for comment retrieval.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pwjfk1yy0impirfvy95l.PNG)

Lambda: `myKomlaComments`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oosfw5fv088eked19ipo.PNG)



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0vobgcej8t0ytnl5d9l4.gif)