DEV Community

Hansel Dsouza
Hansel Dsouza

Posted on • Edited on

Cloud Resume Challenge: ofCORS your request failed. Check your headers!

I was browsing LinkedIn a couple of weeks ago and came across this insightful post, You're not ready for feature flags. I have to admit, "Stop putting cheese on raw burger" caught my eye. Forrest Brazeal writes an insightful post on getting the basics right.

Towards the end of the blog post, he mentions the Cloud Resume Challenge. A challenge that exposes you to cloud computing concepts in pursuit of hosting your resume online. I took this an opportunity to brush up on my basics and get them right. (Spoiler: I've got some more learning to do)

The Challenge Requirements

The Challenge required you to build your resume using HTML and CSS and host it on AWS S3. It also required you to have a visitor counter on your website, using JS, API Gateway, DynamoDB and a Lambda function + some tests. All these resources needed to be declared in code using SAM or equivalent. Lastly, version control and CI/CD using Github Actions.

Much of this was familiar territory to me through my day job, however, I wanted to challenge myself to take this on. Writing python tests and javascript was uncharted waters for me as I live on the Operations/Infrastructure side of the house. Also, I had not written any HTML/CSS in 3 or 4 years.

HTML/CSS

Naturally, I started with writing out the CFN/SAM templates first and trying to deploy them using Github Actions. Once successful, I sat down to write the meat of the HTML/CSS. I explored a CSS framework called Bulma. It was great to learn and play with, I'll be going back for seconds.

JS/Python/CORS tests

I'm comfortable writing Python to interact with APIs and SDKs. Having used boto in the past, I figured this might go quickly; I was wrong. I got past working with DynamoDB and APIGateway quickly, and then I hit a wall when it came to writing Python tests, getting JS/JQuery to successfully call the APIGW endpoint with CORS working correctly.

insert appropriate meme here

After playing with pytest and moto for hours, I finally saw the green light.

Alt Text

With the tests out of the way, I started to tackle JQuery and fixing CORS. After playing with multiple different settings and going down many rabbit holes I got it working!

Alt Text

GitHub Actions

GitHub actions was fun to play with, I especially enjoyed learning the syntax for the workflow files. The documentation is detailed and well-written.

Conclusion

I really enjoyed taking on this challenge! I definitely need to go back and play with the Moto library and Jquery more. I also need to strengthen my SAM skillset as it is incredibly versatile. Remember, get the basics right!

Final Website: https://www.hdsouza.com/

Top comments (0)