Last week we wanted to create better social media share images for Serverless-Stack.com. We wanted to generate them dynamically. So we decided to build this in serverless using SST! The entire thing is publicly available on GitHub (https://github.com/serverless-stack/social-cards). We also added a chapter going over the details of how we built it and how it integrates with our static sites. The gist of it is that we create HTML templates that are loaded locally in a Lambda function. It takes screenshots of these using Puppeteer and caches it in S3. We also add CloudFront in front of it with a custom domain. Check out all the details here. https://serverless-stack.com/chapters/dynamically-generate-social-share-images-with-serverless.html

So it’s generated in runtime or once and cached?

Yeah generated on the first request and cached from that point on.

But how it knows when to generate it?

There’s a meta tag on our webpages, that Twitter/FB/etc. will hit when you share the URL. That’s what triggers generating the image.

I see.

We take the request URL and convert it into an S3 key, then check if that key exists in S3.

Ohhh nice.

Yeah and a CloudFront distribution in front of it all.

Yeah cdn makes sense.

For those who want a hosted solution my mate runs this: https://ogimpact.sh/

Would you at some point move the AWS Chrome Layer into the SST config instead of hardcoding it?

@justindra Sorry I missed this. What do you mean by moving into the SST config?

All good @Jay! I mean would we be able to define these installable lambda layers through SST/Cdk instead of hardcoding an arn.

Interesting, so being able to specify them by name instead of their ARN?

Yep exactly. I think that would be a lot more re-deployable when creating new environments etc.

cc @Frank