Svelte Is Cool
CloudFront + Svelte
A CloudFront distribution serving main and test versions of a static website.
Under the hood:
Users make requests that are intercepted by the viewer request lambda. If the request contains our session cookie we forward the request to CloudFront, otherwise we randomly assign a cookie value of main or test in order to split site traffic.
Requests are cache hits if the site version corresponding to the cookie is stored in CloudFront, in this case the site is promptly returned to the user. If CloudFront doesn't have the requested site version cached, it will trigger an origin request.
The origin request lambda checks the value of our cookie and based off of it will request one of our two origins (either main or test). For this example each version of the site will get its own S3 bucket (recommended by AWS).
Our origin will respond with the appropriate version of the site. The origin response lambda will pass the value of the cookie (determined in step 1) back to the user and to CloudFront.
The cookie value (along with a path variable) is used as the cache key and will help to process all subsequent requests to CloudFront.
The cookie and path variable are returned to the user. The cookie gets stored in the browser's session storage and will ensure users recieve the same version of our site per every request (called Sticky Sessions)
Tech Stack
Client: TypeScript, JavaScript, Svelte, HTML, CSS, Three.js
Server: AWS, CloudFront, Lambda, S3
Features
- Custom vertex and fragment shaders make for a colorful background.
- A center button can be clicked to animate the background, makes use of Bezier Curve function to ease-in transition.
- Main version of site has blue font, test version has green font. You can manually set the cookie value to switch between versions.
- Github Actions workflow builds assets, uploads to S3, and invalidates CloudFront Cache so user requests always see latest version.
Related
Some resources I found instrumental in helping with this project
