ChrisBell.eu

It has been a while since I last blogged to say the least, but I just wanted to share a tip on working with AWS Amplify as I struggled to find this information easily. I’ve been working with Amplify since the beginning of 2019 and recently launched a SaaS that leans on Amplify Console quite a bit. In the polishing phase of the project, it seemed unintuitive on how to apply caching (Cache control headers) on static assets.

In the responses I saw sent via Amplify Hosting, it was applying default Cache Control headers with a max-age of 0, which is far from ideal when sending big React based bundles.

I know that the hosting uses a managed Cloudfront distribution under the hood, but there’s no way to get to it. I started going down some wacky paths such as applying meta data directly to the S3 objects via a custom script, when it got me thinking - at what point could I even run this script? That’s when I started studying the amplify.yml format and eventually came across custom headers.

With that, here’s an example amplify.yml build config you can use to apply long lasting cache times to some arbitrary static assets. Hope that helps someone!